--- title: "Tạo slider cho product gallery trong WooCommerce" author: "Trung Hiếu" date: "2021-07-28" lastmod: "2021-10-25" url: "https://wpcanban.com/wordpress/thu-thuat-wordpress/tao-slider-cho-product-gallery-trong-woocommerce.html" --- # Tạo slider cho product gallery trong WooCommerce Tạo slider cho product gallery trong WooCommerce một cách đơn giản. ![tao-slider-cho-product-gallery-trong-woocommerce](https://wpcanban.com/wp-content/uploads/2021/07/tao-slider-cho-product-gallery-trong-woocommerce.png) Để tối giản thiết kế và làm nhẹ mã nguồn, nhiều [WordPress theme](https://wpcanban.com/category/wordpress/wordpress-themes) có hỗ trợ [WooCommerce](https://wpcanban.com/tag/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](https://wpcanban.com/wordpress/thu-thuat-wordpress/tat-tinh-nang-tao-lai-anh-thumbnail-cua-woocommerce.html) - [Hướng dẫn thêm nhãn cho sản phẩm trong WooCommerce](https://wpcanban.com/wordpress/thu-thuat-wordpress/them-nhan-cho-san-pham-trong-woocommerce.html) ## Đố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](https://wpcanban.com/mua-paradise-child-theme) 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ó*. ![bat-slider-lightbox-zoom-cho-product-gallery-tren-theme-paradise](https://wpcanban.com/wp-content/uploads/2021/07/bat-slider-lightbox-zoom-cho-product-gallery-tren-theme-paradise.png) 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](https://vi.wordpress.org/plugins/woo-product-gallery-slider/)). ![cai-dat-va-kich-hoat-plugin-product-gallery-slider-for-woocommerce](https://wpcanban.com/wp-content/uploads/2021/07/cai-dat-va-kich-hoat-plugin-product-gallery-slider-for-woocommerce.png) 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. ![product-gallery-slider-for-woocommerce-general-options](https://wpcanban.com/wp-content/uploads/2021/07/product-gallery-slider-for-woocommerce-general-options.png) 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-mac-dinh](https://wpcanban.com/wp-content/uploads/2021/07/product-gallery-mac-dinh.png) - Product gallery với slider: ![product-gallery-voi-slider](https://wpcanban.com/wp-content/uploads/2021/07/product-gallery-voi-slider.png) ### 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. ![product-gallery-slider-for-woocommerce-lightbox-options](https://wpcanban.com/wp-content/uploads/2021/07/product-gallery-slider-for-woocommerce-lightbox-options.png) 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ả. ![demo-lightbox-cho-anh-san-pham](https://wpcanban.com/wp-content/uploads/2021/07/demo-lightbox-cho-anh-san-pham.png) 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.* :)