Plugin hiển thị slide, gallery WooCommerce

Plugin khi kích hoạt hỗ trợ hiển thị các gallery ảnh sản phẩm WooCommerce dạng slide ở các trang shop, category, tag. Khách hàng có thể tương tác xem trước hình ảnh các biến thể của sản phẩm.

PXG Woo Variation Swatches hỗ trợ hiển thị hình ảnh site sử dụng: Fifu, WooCommerce hoặc plugin hình ảnh khác. Site demo: http://site3.wikipoly.com/product-category/test2211/

PXG Woo Variation Swatches
PXG Woo Variation Swatches

Plugin hiển thị biến thể sản phẩm WooCommerce
Mã nguồn: CSS, JavaScript, PHP
  • Hiển thị gallery, slide hình ảnh sản phẩm các trang shop, categories, tags, search.
  • Hiển thị gallery theo danh sách id sản phẩm, kết nối các bài viết trên blog với danh sách sản phẩm liên quan. Ví dụ bài viết về Halloween bạn có thể chèn danh sách sản phẩm về halloween đang bán trên site.
  • Hiển thị gallery slide tùy chỉnh từ danh sách url hình ảnh qua shortcode ở vị trí nội dung trên site.
  • Tích hợp hỗ trợ hiển thị cho WooCommerce Variation (đang tích hợp). Tuy nhiên, hiện tại các site dữ liệu lớn mọi người hạn chế dùng variation mặc định của woo để tránh nặng site (trừ khi có giải pháp chi phí cho phần cứng máy chủ). Thay vào đó nên dùng các plugin sử dụng variation có cấu trúc JSON.
  • Hỗ trợ hiển thị hình ảnh từ plugin Fifu, WooCommerce. Các plugin khác hỗ trợ tích hợp theo yêu cầu, chi phí cố định 100k/ lần tích hợp plugin bất kỳ.
  • Hỗ trợ cài đặt, xử lý lỗi tích hợp.
  • Tích hợp tính năng trên CMS khác, framework, code tay,... chi phí thỏa thuận.

Cấu hình hiển thị chung

Slide: số hình ảnh sản phẩm hiển thị trong gallery.

Allow shuffle: cho phép gallery xáo trộn thứ tự hiển thị mỗi lần xem mới trang (refresh).

Allow full screen: cho phép xem gallery hình ảnh sản phẩm ở chế độ toàn màn hình.

Ví dụ số slide là 3 kết quả hiển thị như sau:

Ví dụ số lide là 4 kết quả hiển thị như sau:

Hiển thị gallery hình ảnh sản phẩm WooCommerce

Mặc định khi kích hoạt plugin sẽ thay thế hình ảnh sản phẩm WooCommerce sang dạng gallery ở các trang shop, categories, tags, search,…

Lưu ý: ở một số themes có sự can thiệp vào template hỗ trợ từ woocommerce có thể sẽ không hiển thị gallery được. Thông thường các vị trí này thường là product widget. Mình nhận tích hợp thêm với chi phí thỏa thuận.

Hiển thị gallery hình ảnh sản phẩm trong nội dung bài viết

Sử dụng shortcode để hiển thị danh sách gallery sản phẩm trong nội dung bài viết bất kỳ. Ví dụ bài viết trên blog về review các loại đèn led trang trí halloween, cây thông,… có thể dùng shortcode sau để chèn danh sách sách phẩm đang bên trên site ở vị trí cần hiển thị trong nội dung.

Cài đặt, xây dựng, thiết kế web/blog cá nhân, web affiliate, plugins, chrome extension và code tool theo yêu cầu.

[pxg_woo_variation_swatches ids="845|843|844" thumb="4" width="400" allowfullscreen="true"]

Kết quả danh sách hình ảnh slide của sản phẩm có id là: 843, 844 và 845 sẽ hiển thị ở vị trí sử dụng.

Slide hiển thị hình ảnh qua danh sách link ảnh tùy chỉnh

Ngoài việc hiển thị gallery cho sản phẩm woocommerce bạn cũng có thể dùng shortcode để hiển thị banner, slide, gallery theo danh sách liên kết tùy chỉnh trong nội dung sản phẩm, bài viết trên site. Shortcode hỗ trợ tính năng và các thông số như sau:

medias: là danh sách liên kết hình ảnh, mỗi link phân cách bởi dấu |.

thumb: là số hình ảnh hiển thị trong gallery.

allowfullscreen: true/false để cho phép hiển thị hoặc không hiển thị tính năng xem gallery toàn màn hình.

Sử dụng shortcode

[pxg_woo_variation_swatches medias="http://wikipoly.com/wp-content/uploads/2022/11/Farmer-Even-The-Devil.gif|http://wikipoly.com/wp-content/uploads/2022/11/Skull-Job-The-Hardest-Part-Of-My-Job-Is-Being-Nice-To-People-Who-Think-They-Know-How-To-Do-My-Job-TheLoveosOf.jpg|http://wikipoly.com/wp-content/uploads/2022/11/Some-People-Just-Need-A-Pat-On-The-Back-Funny-Tshirt-Best-Seller.jpg|http://wikipoly.com/wp-content/uploads/2022/11/Yes-It-Is-My-Birthday-MONTH-ND-ST-RD-Custom-your-t-shirt-Just-add-your-birthday.jpg|http://wikipoly.com/wp-content/uploads/2022/11/Custom-Ugly-Christmas-Sweater-Just-Add-Your-Family-Name.jpg|http://wikipoly.com/wp-content/uploads/2022/11/Buy-personalised-t-shirt-online-best-cheap-t-shirt-for-men-women.jpg|http://wikipoly.com/wp-content/uploads/2022/11/Buy-personalised-hoodie-online-best-cheap-hoodies-for-men-women.jpg" thumb="8" width="400" allowfullscreen="true"]

Kết quả hiển thị

Trả lời