Thủ thuật, Woocommerce Ngày 17/03/2022 7896 lượt xem

Hướng dẫn custom bộ lọc của woocommerce wordpress

Do trong bộ lọc của woocommerce wordpress khá đơn điệu , hôm nay mình có tìm hiểu nên chia sẽ lại bài custom bộ lọc cho phù…

Lê Anh ĐôngFlatsome trên Google News

Hướng dẫn custom bộ lọc của woocommerce wordpress

Do trong bộ lọc của woocommerce wordpress khá đơn điệu , hôm nay mình có tìm hiểu nên chia sẽ lại bài custom bộ lọc cho phù hợp với web làm bằng wordpress cho trang bán hàng nhé

Hướng dẫn custom bộ lọc của woocommerce wordpress

Thêm bộ lọc được custom lại

Để tạo ra các được field checkbox như demo thì chúng ta sẽ sử dụng input type checkbox nhé. Các bạn follow đoạn code dưới này để làm được điều đó nhé.

Sử dụng hook woocommerce_before_main_content và đặt điều kiện để nó chỉ hiển thị tại các trang danh mục. Ngoài ra mình còn đặt điều kiện không hiển thị ở trên mobile nữa, các bạn có thể thay điều kiện đó nhé.Và đây là kết quả sau khi thêm đoạn code kia vào

Hướng dẫn custom bộ lọc của woocommerce wordpress
Hướng dẫn custom bộ lọc của woocommerce wordpress

Bây giờ chúng ta chỉ cần thêm 1 đoạn script nữa để bộ lọc này có thể hoạt động được nhé.

các bạn thử kết quả xem nó có chạy ok không nhé.

Thêm CSS nữa. Ở đây mình custom theo ý mình nên các bạn có thể thay bằng CSS của các bạn vào nhé.

Lưu lại và check nhé

 

Chúc các bạn thành công !

Theo : https://pttuan410.com/huong-dan-tao-bo-loc-giong-tgdd/

Điểm 5/5 - ( Có 3 bình chọn)

Có Nhận xét cho "Hướng dẫn custom bộ lọc của woocommerce wordpress"

  1. Pingback: Hướng dẫn custom bộ lọc của woocommerce wordpress - FLATSOME - FREE EVERY THING

Để 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 *

Các dịch vụ của FLATSOME.XYZ