Custom bộ lọc mặc định của Woocommerce WordPress đẹp mắt

Custom bộ lọc mặc định của Woocommerce như thế nào cho đỡ nhàm chán? Do trong bộ lọc mặc định 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 mặc định của Woocommerce 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é.

function filter_custom(){
if( !is_product() ): ;?>
<div class=”title_page”><?php woocommerce_page_title(); ?></div>
<?php if(!wp_is_mobile()){;?>
<div class=”sort_custom”>
<div class=”titlesort”>Ưu tiên xem: </div>
<form id=”pricedesc”>
<div class=”range-check”>
<input class=”pt-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=”pt-checkbox” type=”checkbox” value=”price” id=”price” name=”orderby” onChange=”this.form.submit()” />
<label for=”price”>Giá tăng dần</label>
</div>
</form>
<form id=”datecheck”>
<div class=”range-check”>
<input class=”pt-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=”pt-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>
</div>
<?php }else{
echo ‘<div class=”sapxep”>Sắp xếp: ‘; woocommerce_catalog_ordering();};
endif;
};
add_action(‘woocommerce_before_main_content’,’filter_filter_custom’);

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é.