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

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');

function filter_custom(){

if( !is_product() ): ;?>

<?php if(!wp_is_mobile()){;?>

</div>

</form>

</div>

</form>

</div>

</form>

</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');

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

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

function add_js(){;?>
    <script type="text/javascript">
jQuery(document).ready(function() {
    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);
    }
    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);
    }
});
jQuery("a.deselect").each(function(){
    this.search = "";
});
</script>
<?php };
add_action('wp_footer','add_js');

function add_js(){;?>

jQuery(document).ready(function() {

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);

}

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);

}

});

jQuery("a.deselect").each(function(){

this.search = "";

});

</script>

<?php };

add_action('wp_footer','add_js');

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

.title_page {
    float: left;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}
.sort_custom {
    display: flex;
    margin-top: 5px;
    justify-content: flex-end;
}
.sort_custom form {
    padding: 0 0 0 20px;
}
.sort_custom .pt-checkbox {
    margin-right: 0px;
}

.title_page {

float: left;

text-transform: uppercase;

font-size: 20px;

font-weight: bold;

line-height: 30px;

}

.sort_custom {

display: flex;

margin-top: 5px;

justify-content: flex-end;

}

.sort_custom form {

padding: 0 0 0 20px;

}

.sort_custom .pt-checkbox {

margin-right: 0px;

}

Lưu lại và check nhé

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

Xem thêm:

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

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

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

Bài viết cùng chủ đề:

Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed

Cách tắt tính năng tự động cập nhật trong WordPress (auto update)

Xoá chữ CATEGORY ARCHIVES trong theme Flatsome

Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS

Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome

Hướng dẫn các tạo bảng thông tin khuyến mãi và chỉ hiển thị cho các sản phẩm được lựa chọn

Hướng dẫn cách thêm các gợi ý đánh giá tự động cho woocommerce – Hỗ trợ SEO

Code tự động lưu ảnh vào host khi copy nội dung từ website khác

Sửa lỗi file tìm kiếm search của Flatsome bị treo khi tìm kiếm

Lập Kế Hoạch Digital Marketing – Phiên Bản Tinh Gọn

21 Cách tăng 3 lần tỷ lệ chuyển đổi của các trang E-Commerce

10 Yếu Tố Xếp Hạng Từ Khóa SEO Google (Cập Nhật 03/2020)

Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form

Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome

Trả lời Hủy

Phần mềm bản quyền

Update sản phẩm

Thêm mới sản phẩm

Đặt hàng, thanh toán

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

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

Bài viết cùng chủ đề:

Khắc phục lỗi Autocad The License manager is not functioning or is improperly installed

Cách tắt tính năng tự động cập nhật trong WordPress (auto update)

Xoá chữ CATEGORY ARCHIVES trong theme Flatsome

Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS

Hướng dẫn thu gọn nội dung chi tiết sản phẩm và mô tả danh mục cho Flatsome

Hướng dẫn các tạo bảng thông tin khuyến mãi và chỉ hiển thị cho các sản phẩm được lựa chọn

Hướng dẫn cách thêm các gợi ý đánh giá tự động cho woocommerce – Hỗ trợ SEO

Code tự động lưu ảnh vào host khi copy nội dung từ website khác

Sửa lỗi file tìm kiếm search của Flatsome bị treo khi tìm kiếm

Lập Kế Hoạch Digital Marketing – Phiên Bản Tinh Gọn

21 Cách tăng 3 lần tỷ lệ chuyển đổi của các trang E-Commerce

10 Yếu Tố Xếp Hạng Từ Khóa SEO Google (Cập Nhật 03/2020)

Hướng dẫn tự làm SEO hiệu quả với 5 – 7 triệu/tháng

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Tùy biến Contact Form 7 – Chia Form thành 2 cột & Chèn icon vào Form

Flatsome Icons – Hướng dẫn sử dụng bộ icon mặc định của Flatsome

Trả lời Hủy

Đăng nhập

Đăng ký