Thêm bộ lọc sản phẩm tuỳ chỉnh trong Woocommerce

Mình sẽ hướng dẫn các bạn thêm bộ lọc tuỳ chỉnh vào trang cửa hàng woocommerce theo dạng checkbox nhưng không có ajax

Mục đích làm cho người dùng tiện hơn khi lọc sản phẩm, chỉ cần click chọn chứ không cần thao tác mở chọn theo cách truyền thống của woocommerce

Các bạn copy đoạn code dưới đây để vào functions.php trong child-theme nhé (đừng để vào theme chính, tránh bị lỗi khi update theme)

Đoạn code này để hook vào phía trên đầu nơi hiển thị sản phẩm trong trang shop (woocommerce_before_main_content)

//Bộ lọc checkbox 
function filter_product_xso(){
if( !is_product() ): ;?>
<?php if(!wp_is_mobile()){;?>
<div class="loc-san-pham-theo">
<form id="popular-form">
<div class="range-check">
<input class="xso-checkbox" type="checkbox" value="popularity" id="popular" name="orderby" onChange="this.form.submit()"/>
<label for="popular">Phổ biến</label>
</div>
</form>
<form id="rating-form">
<div class="range-check">
<input class="xso-checkbox" type="checkbox" value="rating" id="rating-check" name="orderby" onChange="this.form.submit()"/>
<label for="rating-check">Đánh giá cao</label>
</div>
</form>
<form id="datecheck">
<div class="range-check">
<input class="xso-checkbox" type="checkbox" value="date" id="date" name="orderby" onChange="this.form.submit()" />
<label for="date">Mới nhất</label>
</div>
</form>
<form id="oldproduct">
<div class="range-check">
<input class="xso-checkbox" type="checkbox" value="old-product" id="old-product" name="orderby" onChange="this.form.submit()" />
<label for="old-product">Cũ nhất</label>
</div>
</form>
<form id="pricedesc">
<div class="range-check">
<input class="xso-checkbox" type="checkbox" value="price-desc" id="price-desc" name="orderby" onChange="this.form.submit()" />
<label for="price-desc">Giá giảm dần</label>
</div>
</form>
<form id="pricesmall">
<div class="range-check">
<input class="xso-checkbox" type="checkbox" value="price" id="price" name="orderby" onChange="this.form.submit()" />
<label for="price">Giá tăng dần</label>
</div>
</form>
</div>
<?php }else{
echo '<div class="sapxep">Sắp xếp: '; woocommerce_catalog_ordering();};
endif;
};
add_action('woocommerce_before_main_content','filter_product_xso');

Sau đó các bạn chèn tiếp đoạn code JQuery ngay bên dưới để bộ lọc hoạt động nhé.

function add_js(){;?>
<script type="text/javascript">
jQuery(document).ready(function() {
if (window.location.href.indexOf("popularity") > -1) {
jQuery('#popular-form input[type="checkbox"]').prop('checked', true);
}
else if (window.location.href.indexOf("rating") > -1) {
jQuery('#rating-form input[type="checkbox"]').prop('checked', true);
}
else if (window.location.href.indexOf("date") > -1) {
jQuery('#datecheck input[type="checkbox"]').prop('checked', true);
}
else if (window.location.href.indexOf("old-product") > -1) {
jQuery('#oldproduct input[type="checkbox"]').prop('checked', true);
}
else if (window.location.href.indexOf("price-desc") > -1) {
jQuery('#pricedesc input[type="checkbox"]').prop('checked', true);
}
else if (window.location.href.indexOf("price") > -1) {
jQuery('#pricesmall input[type="checkbox"]').prop('checked', true);
}
});
jQuery("a.deselect").each(function(){
this.search = "";
});
</script>
<?php };
add_action('wp_footer','add_js');

Cuối cùng là cần phải CSS lại để bộ lọc đẹp hơn

Trong đoạn CSS này mình đã ẩn luôn bộ lọc mặc định của woocommerce và hộp checkbox của từng thẻ input

Trên giao diện mobile mình sẽ ẩn đi và cho hiển thị lại bộ lọc mặc định của woocommerce nhé, vì trên giao diện mobile để mặc định sẽ tiện và đẹp hơn.

/********Bộ lọc sản phẩm checkbox******/
.woocommerce-ordering {display: none;}
.loc-san-pham-theo {display: flex;margin-top:0px;margin-bottom: 30px;justify-content: flex-end;border-bottom:1px solid #ddd;}
.loc-san-pham-theo input[type=checkbox]+label{cursor:pointer;color:#1f2a37;transition: .2s all;padding: 8px 10px;}
.loc-san-pham-theo input[type=checkbox]+label:hover, .loc-san-pham-theo input[type=checkbox]:checked+label{transition: .2s all;color:#fff; background-color:#1F2A37;padding: 8px 10px;border-radius:3px}
.loc-san-pham-theo input[type=checkbox]{margin-right:3px;display:none;}
.loc-san-pham-theo form {padding: 0 0 0 10px;}
@media (max-width: 768px){.loc-san-pham-theo {justify-content: center;}}
@media (max-width: 576px){.woocommerce-ordering {display: block;}
.loc-san-pham-theo{display:none;}}