Tạo bộ lọc cho sản phẩm trong WooCommerce

Source: Tạo bộ lọc cho sản phẩm trong WooCommerce

Trong trang danh mục sản phẩm, chúng ta nên tạo bộ lọc cho sản phẩm theo giá, thuộc tính,… Bộ lọc sẽ giúp khách hàng dễ dàng tìm được sản phẩm phù hợp với nhu cầu của mình. Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo bộ lọc sản phẩm theo giá và thuộc tính.

Trước khi thực hiện bài viết này, bạn hãy vào kho giao diện để cài đặt cho mình bộ giao diện Cửa hàng cơ bản Xin vui lòng.

Trang danh mục sản phẩm

Tạo bộ lọc cho sản phẩm

Sau khi cài đặt và kích hoạt chủ đề BasicStore, bạn vào menu Trưng bày > Vật dụng. Bạn sẽ thấy ở bên phải có một Thanh bên với tên Thanh bên cửa hàng.

Ở bên phải, bạn có thể kéo các Tiện ích sau vào Mua thanh bên Gọi món:

• Bộ lọc đang hoạt động: cho phép nó hiển thị các bộ lọc được áp dụng.
• Lọc sản phẩm theo thuộc tính (2 cái): để áp dụng lọc sản phẩm theo thuộc tính Dung tích và Màu sắc mà tôi đã tạo trong bài viết trước.
• Lọc sản phẩm theo giá: để lọc sản phẩm theo giá.
• Sản phẩm đã xem gần đây: Để lọc ra những sản phẩm khách hàng vừa xem.

Sau đó, bạn thiết lập các widget được thêm vào Sidebar như sau:

• Bộ lọc sản phẩm đang hoạt động: chỉ cần thay đổi tiêu đề thành “Lọc”.
• Lọc sản phẩm theo thuộc tính (2 cái): Một bạn đã đặt tiêu đề “Công suất”, tính chất chọn “dung-luong”. Phần còn lại bạn để tiêu đề “Màu”, tính chất “Mau”. Nếu sản phẩm có nhiều thuộc tính, bạn có thể thêm bộ lọc thuộc tính theo cách này.
• Lọc sản phẩm theo giá: chỉ cần thay đổi tiêu đề thành “Lọc theo giá”.
• Sản phẩm đã xem gần đây: Bạn có thể thay đổi tiêu đề và chỉnh sửa số lượng sản phẩm hiển thị.

Sau mỗi cài đặt, hãy nhớ nhấn. cái nút Cứu Xin vui lòng!

Lọc các sản phẩm ra khỏi trang chủ

Bây giờ bạn ra khỏi trang Shop sẽ thấy các vật dụng bộ lọc sản phẩm hiển thị bên phải như hình dưới đây.

Hãy thử lọc sản phẩm theo thuộc tính cũng như giá cả để xem kết quả. Khi bạn lọc sản phẩm, tiện ích Lọc Nội dung bộ lọc sẽ được hiển thị.

bản tóm tắt

Trên đây là hướng dẫn lọc sản phẩm bằng các widget WooCommerce có sẵn. Để làm cho các bộ lọc này trông đẹp hơn, bạn có thể sử dụng các chủ đề WooCommerce chuyên nghiệp. Chúc may mắn!

Via: sieucoder.com

from sieucoder.com https://ift.tt/3sypLwe
via Sieucoder.com