Tạo bộ lọc sản phẩm woocommerce theo meta key

Tạo bộ lọc sản phẩm woocommerce theo meta key, kết quả của bài viết này là đi tạo một bộ lọc như hình bên dưới

Tạo custom field cho bộ lọc

Vâng những trường dữ liệu như trên là không có sẳn mà chúng ta phải tạo custom field, mình sẽ sử dụng acf để tạo và sau đây là code json của nó, bạn copy về import là ok

Tạo bộ lọc bỏ vào sidebar

Để tạo các form lọc như hình, mình sẽ sử dụng shortcode để làm và sau đây là code (code dùng trong class)

js để xử lý cho form lọc

css thì để trang trí cho bộ lọc đẹp, còn js là chúng ta sẽ bắt sự kiện click vào radio để gửi dữ liệu đến url của product cat hoặc shop

chúng ta sẽ tạo một file product_cat.js

Nội dung file:

import product_cat.js file này vào head

Chúng ta chỉ import file này ở product cat template và shop template

Custom query product cat hoặc shop template

Chúng ta cần custom query meta để thêm vào query hiện tại của template

 

 

 

5/5 (1 Đánh giá)

Gửi Phản Hồi
Chọn đánh giá của bạn
4 Bình Luận
5
5
1 đánh giá
4
0 đánh giá
3
0 đánh giá
2
0 đánh giá
1
0 đánh giá
Thông tin người gửi
Anh Chị


Đăng ký nhận bài viết mới

Khi mình đăng bài mới bạn sẽ nhận nó qua Email


Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress