• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Tạo slider cho product gallery trong WooCommerce
hosting-tot-nhat-danh-cho-wordpress

Tạo slider cho product gallery trong WooCommerce

Cập nhật: 25/10/2021 Trung Hiếu 5 Bình luận

Mục lục Hiện
  • 1. Đối với theme Paradise
  • 2. Tại sao nên chọn Product Gallery Slider for WooCommerce?
  • 3. Tạo slider cho product gallery và lightbox cho hình ảnh
    • 3.1. Tab General Options
    • 3.2. Tab Lightbox Options

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

tao-slider-cho-product-gallery-trong-woocommerce

Để 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ó.

bat-slider-lightbox-zoom-cho-product-gallery-tren-theme-paradise

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

cai-dat-va-kich-hoat-plugin-product-gallery-slider-for-woocommerce

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

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

  • Product gallery với slider:

product-gallery-voi-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.

product-gallery-slider-for-woocommerce-lightbox-options

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

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

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Vô hiệu hóa WooCommerce Brands để tăng tốc độ
Loại bỏ font chữ của plugin WooCommerce
Loại bỏ font chữ của plugin WooCommerce
Chèn breadcrumbs của Rank Math SEO vào theme Paradise
Chèn breadcrumbs của Rank Math SEO vào theme Paradise

Chuyên mục: Thủ thuật WordPress Thẻ: Paradise child theme/ WooCommerce

wpcanban-com-facebook-group

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Tự động áp dụng coupon trong WooCommerce
Bài viết sau Sửa lỗi không nhận được email khi dùng CloudFlare CDN »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. hainb 9 bình luậnviết

    05/04/2023 lúc 14:52

    Có thể gọi gallery này ra page shop hoặc page home ko?

    Bình luận
    • Trung Hiếu Quản lýviết

      05/04/2023 lúc 15:04

      Không bạn nhé. Nó chỉ hỗ trợ trong single product page thôi.

      Bình luận
      • hainb 9 bình luậnviết

        22/04/2023 lúc 17:51

        ok anh. Chúc anh có nhiều chia sẻ hữu ích hơn nữa nhé!

        Bình luận
        • Trung Hiếu Quản lýviết

          22/04/2023 lúc 20:35

          Cảm ơn bạn. :D

          Bình luận
  2. Thu Hà 46 bình luậnviết

    30/10/2021 lúc 11:58

    trang của em cũng dùng slider cho product gallery, rất đẹp

    Bình luận

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới. Tặng miễn phí ebook "Bảo mật WordPress toàn tập" do WP Căn bản biên soạn!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-chat-luong-cao

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Thủ thuật CloudFlare

Sửa lỗi WordPress

Thủ thuật LiteSpeed

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Xóa base slug của custom post type và taxonomy 04/07/2025
  • Ra mắt plugin Hybrid Object Cache độc quyền tại WP Căn bản 30/06/2025
  • Monarx Security được tích hợp vào dịch vụ WordPress Hosting 15/06/2025
  • Hiển thị code trong bài viết của WordPress 07/06/2025

Bình luận mới nhất

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Tịnh Nguyễn trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Hướng dẫn nâng cấp PHP 7.4 cho website WordPress
  • dự án vlasta hải phòng trong Hướng dẫn nâng cấp PHP 7.4 cho website WordPress

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 1.007 Bài viết - 35.554 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting