Hướng Dẫn Tạo Bộ Lọc Biến Thể Sản Phẩm Woocommerce

Tạo bộ lọc biến thể sản phẩm WooCommerce được nhiều bạn quan tâm khi xây dựng một website bán hàng. Ở các sản phẩm sẽ có nhiều biến thể khác nhau ví dụ: màu sắc, chất liệu, kích thước và bạn cần phân loại ra để khách hàng dễ xem sản phẩm thì bài viết này dành cho bạn.

Bài viết này sẽ hướng dẫn bạn cách sử dụng plugin Variation Swatches để tạo bộ lọc theo màu sắc và chất liệu chuyên nghiệp, đẹp mắt và tối ưu chuyển đổi cho cửa hàng online.

Tạo Bộ Lọc Theo Màu Sắc Woocommerce
Tạo Bộ Lọc Biến Thể Woocommerce

1. Variation Swatches là gì?

Variation Swatches for WooCommerce là một plugin hỗ trợ hiển thị các thuộc tính sản phẩm (màu sắc, chất liệu, kích thước…) bằng hình ảnh, màu sắc, nút, văn bản, thay vì chỉ dùng menu xổ xuống mặc định. Điều này giúp nâng cao trải nghiệm người dùng, tăng tỷ lệ chuyển đổi đơn hàng và làm cho website trông chuyên nghiệp hơn.

Plugin Variation Swatches
Plugin Variation Swatches

2. Vì sao nên sử dụng Variation Swatches?

  • Hiển thị màu sắc sản phẩm bằng ô màu trực quan.
  • Giao diện đẹp, thân thiện với người dùng.
  • Hỗ trợ lọc sản phẩm theo thuộc tính trên trang danh mục.
  • Dễ cài đặt, tương thích hoàn toàn với WooCommerce.
  • Hỗ trợ hiển thị ảnh mẫu, hoặc chất liệu dưới dạng icon.

3. Các bước tạo bộ lọc theo màu sắc, chất liệu

Bước 1: Cài đặt plugin Variation Swatches

Bạn có thể cài đặt trực tiếp từ WordPress Dashboard:

  1. Truy cập Gói mở rộng → Cài mới.
  2. Tìm plugin: Variation Swatches for WooCommerce.
  3. Cài đặt và kích hoạt.

Có cả bản miễn phí và bản Pro. Bản miễn phí đủ dùng cho các nhu cầu cơ bản như màu sắc, chất liệu.

Bước 2: Tạo thuộc tính sản phẩm (Attribute)

  1. Vào Sản phẩm → Thuộc tính.
  2. Thêm thuộc tính “Màu sắc” hoặc “Chất liệu”.
  3. Chọn kiểu hiển thị:
    • Màu sắc: Chọn Color.
    • Chất liệu: Chọn Image nếu muốn hiển thị icon, hoặc Label để hiển thị chữ.

Ví dụ:

  • Tên thuộc tính: Màu sắc – kiểu hiển thị: Color.
  • Tên thuộc tính: Chất liệu – kiểu hiển thị: Image hoặc Label.

Bước 3: Thêm giá trị cho thuộc tính

Sau khi tạo thuộc tính, bạn cần thêm các giá trị tương ứng:

  1. Nhấn vào “Cấu hình điều khoản” bên thuộc tính Màu sắc hoặc Chất liệu.
  2. Thêm các giá trị như:
    • Đỏ, Xanh, Đen (đối với màu).
    • Da, Vải, Lụa (đối với chất liệu).
  3. Chọn mã màu hoặc hình ảnh đại diện cho từng giá trị.

Bước 4: Gán thuộc tính cho sản phẩm

  1. Mở sản phẩm cần áp dụng.
  2. Trong mục Dữ liệu sản phẩm, chọn “Biến thể”.
  3. Chọn các thuộc tính vừa tạo và thêm biến thể tương ứng.
  4. Lưu lại.

Bước 5: Kiểm tra hiển thị và bộ lọc

Sau khi hoàn thành, vào trang sản phẩm để xem kết quả:

  • Các ô chọn màu sắc sẽ hiển thị bằng màu hoặc hình ảnh.
  • Người dùng có thể chọn màu/chất liệu dễ dàng.
  • Nếu dùng theme hỗ trợ, bộ lọc sản phẩm ở sidebar cũng sẽ có các tùy chọn lọc theo màu/chất liệu.

4. Cải tiến thêm với bản Pro (tùy chọn)

Variation Swatches Pro có thêm các tính năng như:

  • Hiển thị ảnh demo sản phẩm khi chọn màu.
  • Bộ lọc nâng cao ở sidebar.
  • Tooltip khi rê chuột lên biến thể.
  • Ẩn/hiện biến thể không có sẵn hàng.
  • Hỗ trợ hiển thị Grid biến thể sản phẩm.

5. Một số lưu ý khi sử dụng

  • Đảm bảo theme đang dùng tương thích với WooCommerce.
  • Nên dùng ảnh minh họa rõ ràng khi sử dụng chất liệu dạng hình ảnh.
  • Luôn cập nhật plugin để tránh lỗi xung đột.

6. Gợi ý theme và plugin tương thích

Bạn có thể kết hợp plugin này với các theme và công cụ sau để tối ưu giao diện:

  • Theme Flatsome, WoodMart, Astra, Kadence…
  • Plugin: WooCommerce Filter, Elementor, WOOF – Product Filters…

Kết luận

Tạo bộ lọc theo màu sắc, chất liệu với plugin Variation Swatches sẽ giúp website bán hàng của bạn trở nên chuyên nghiệp, thu hút và thân thiện hơn với người dùng. Đây là một công cụ miễn phí, dễ sử dụng, nhưng lại mang lại hiệu quả rất lớn cho việc tăng trải nghiệm mua sắm và doanh số.

Với 8 năm kinh nghiệm từ các lĩnh vực MMO, marketing, blogger, wordpress và những nền tảng khác được mình đúc rút ra với mong muốn có thể chia sẻ có ích đến mọi người.

Related Posts

Bit Social Pro

Bit Social Pro – Plugin Lên Lịch Tự Động Đăng Bài Lên Mạng Xã Hội WordPress

Bit Social Pro là một trong những plugin WordPress mạnh mẽ nhất hiện nay giúp bạn tự động hóa việc chia sẻ nội dung lên các nền tảng mạng xã…

Skole Theme

Skole – Mẫu Theme Trường Học Mẫu Giáo Chuẩn SEO WordPress

Nếu bạn đang tìm kiếm một giao diện WordPress phù hợp để xây dựng website cho trường mẫu giáo, nhà trẻ, trung tâm giáo dục mầm non, thì Skole –…

Mở Khóa Facebook tại Vinh

Mở Khóa Facebook tại Vinh – Giải Pháp Nhanh Chóng và Hiệu Quả

Bạn đang gặp rắc rối với tài khoản Facebook bị khóa, vô hiệu hóa, hoặc bị hack tại Vinh, Nghệ An? Đừng lo lắng! Việc tài khoản Facebook gặp sự…

Link Whisper Pro

Link Whisper Pro – Plugin Tạo Liên Kết Nội Bộ SEO Onpage WordPress

Link Whisper Pro đang trở thành một trong những plugin hỗ trợ SEO onpage được ưa chuộng nhất hiện nay trên nền tảng WordPress. Không chỉ giúp tối ưu liên…

Cách Đổi Tên Miền Giữ Thứ Hạng

Cách Đổi Tên Miền Giữ Thứ Hạng Để Chuyển Đổi Tên Miền Mà Không Mất SEO

Cách đổi tên miền giữ thứ hạng là vấn đề mà rất nhiều chủ website quan tâm khi muốn thay đổi thương hiệu, mở rộng kinh doanh hoặc đơn giản…

Theme Cavin

Theme Cavin – Giao Diện Blog Cá Nhân Chuẩn SEO WordPress

Theme cavin không quá cầu kì về giao diện hay bố cục nhưng vẫn làm nổi bật tổng thể blog của bạn khi người dùng truy cập. Nhà phát triển đã…

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

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *