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, theme Paradise của WP Căn bản, cũng như 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

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ả.

Dưới đây là demo tính năng này trên theme Paradise:

• 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. :)