Tạo slider cho product gallery trong WooCommerce

Tạo slider cho product gallery trong WooCommerce một cách đơn giản.

Để tối giản thiết kế và làm nhẹ mã nguồn, nhiều WordPress theme có hỗ trợ WooCommerce khác, không được tích hợp sẵn tính năng slider cho thư viện ảnh của sản phẩm (product gallery). Điều này dẫn đến việc ảnh thumbnail của sản phẩm sẽ hiển thị hết ra ngoài, trông khá xấu, đặc biệt là trong trường hợp gallery của sản phẩm có nhiều ảnh. Để khắc phục nó, các bạn sẽ cần phải nhờ đến sự trợ giúp của một plugin có tên là Product Gallery Slider for WooCommerce.

Tham khảo thêm:

• Vô hiệu hóa tính năng tạo lại ảnh thumbnail của WooCommerce
• Hướng dẫn thêm nhãn cho sản phẩm trong WooCommerce

Đối với theme Paradise

Tính năng slider, lightbox và zoom đã được tích hợp sẵn trong Customizer của theme Paradise kể từ phiên bản 5.5.0 trở đi. Tất cả những gì các bạn cần làm là truy cập Appearance => Customize => Tối ưu trải nghiệm => Chuyển tính năng Bật lightbox và slider sang trạng thái Có.

Lưu lại và tận hưởng kết quả.

Tại sao nên chọn Product Gallery Slider for WooCommerce?

• Miễn phí.
• Đầy đủ các tùy biến cơ bản.
• Cho phép tạo cả slider lẫn lightbox.
• Dễ cài đặt và sử dụng.
• Khá nhẹ.

Tạo slider cho product gallery và lightbox cho hình ảnh

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin Product Gallery Slider for WooCommerce (download).

2. Truy cập Codeixer => Gallery Settings. Tại đây, các bạn sẽ thấy 2 tab là General Options và Lightbox Options.

Tab General Options

Cho phép các bạn thiết lập tính năng slider cho product gallery.

Trong đó:

• Navigation Icons: hiển thị icon điều hướng cho slider.
• Icon Color: màu sắc của icon điều hướng.
• Thumbnails to Show: số hình thumbnail hiển thị trên slider.
• Slider AutoPlay: tự động chạy slider.
• Slide Infinitely: vòng lặp cho slider.
• Mouse Dragging: cho phép dùng chuột để kéo slider.
• Image Zoom: tắt/ bật tính năng phóng to ảnh mặc định của WooCommerce khi rê chuột vào.

Click vào nút Save Changes để lưu lại và kiểm tra kết quả.

• Product gallery mặc định:

• Product gallery với slider:

Tab Lightbox Options

Cho phép bạn thiết lập tính năng phóng to ảnh sản phẩm khi người dùng click chuột vào.

Trong đó:

• Image Caption: hiển thị caption (phụ đề) của hình ảnh.
• Background Color: màu nền của lightbox.

Click vào nút Save Changes để lưu lại và kiểm tra kết quả.

Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn biết giải pháp khác đơn giản và hiệu quả hơn giúp tạo slider cho product gallery trong WooCommerce? Đừng quên chia sẻ nó với chúng tôi thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)