• Bỏ qua primary navigation
  • Skip to main content
  • Bỏ qua primary sidebar

Thủ thuật thiết kế website

Chia sẻ kinh nghiệm thiết kế website

  • Trang chủ
  • Joomla
    • Thủ thuật Joomla
    • Joomla Extensions
    • Joomla Themes
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Web Development
    • HTML/CSS
    • Javascript
    • PHP
  • PHP Framework
    • Codeigniter
    • Laravel
    • Laminas
  • App Developer
    • React Native
    • Flutter
  • SEO
  • Chia sẻ
  • Phần mềm
Bạn đang ở:Trang chủ / Wordpress / Thủ thuật WordPress / [Woocommerce] Hướng dẫn custom bộ lọc của Woocommerce

[Woocommerce] Hướng dẫn custom bộ lọc của Woocommerce

27/05/2021 - admin Để lại bình luận

Để có thể tạo được 1 bộ lọc chuyên nghiệp như TGDĐ thì đòi hỏi phải biết rất nhiều thứ liên quan đến ajax. Hôm nay, trong giới hạn hiểu biết của mình, mình sẽ hướng dẫn cho các bạn cách làm 1 bộ lọc cũng tương tự như của TGDĐ ( Giống đến 9,9% ) Chỉ khác ở những cái quan trọng thôi ^^.

Các bạn xem hình ảnh dưới đây để biết thứ mà mình muốn làm nhé

Bộ lọc mặc định của Woocommerce

Bộ lọc custom lại giống TGDĐ 9,9%

Các bạn follow các đoạn code dưới đây để có thể thực hiện được điều này nhé.

Xóa bộ lọc mặc định của woocommerce

Để có thể xóa bộ lọc mặc định của woocommerce thì đa phần chúng ta ( Những người biết ít về code ) sẽ dùng display:none cho nó, đúng không mọi người?

Tuy nhiên, để xóa bỏ nó hoàn toàn thì các bạn có thể tham khảo bài viết này nhé.

Để có thể ẩn đi phần woocommerce ordering mặc định của theme Flatsome thì các bạn có thể thêm vào function.php của mình 1 đoạn code sau:

function removedefault(){
    remove_action( 'flatsome_category_title_alt', 'woocommerce_result_count', 20 );
    remove_action( 'flatsome_category_title_alt', 'woocommerce_catalog_ordering', 30 );
}
add_action('init','removedefault');

Thêm bộ lọc được custom lại giống TGDĐ đến 9,9%

Mỗi lần nói đến việc giống TGDĐ đến 9,9% vì giống mấy bạn chào bán theme giống demo đến 9,9% vậy đó ^^.

Thôi quay lại việc custom lại bộ lọc nhé. Để 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_TGDD_99(){
if( !is_product() ): ;?>
    <div class="title_page"><?php woocommerce_page_title(); ?></div>
    <?php if(!wp_is_mobile()){;?>
  <div class="sortbypttuan410">
  <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_TGDD_99');

Ở trên mình sẽ 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ộ lọc custom lại giống TGDĐ 9,9%

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

Như vậy là xong, các bạn thử kết quả xem nó có chạy ok không nhé.

À quên, còn 1 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;
}
.sortbypttuan410 {
    display: flex;
    margin-top: 5px;
    justify-content: flex-end;
}
.sortbypttuan410 form {
    padding: 0 0 0 20px;
}
.sortbypttuan410 .pt-checkbox {
    margin-right: 0px;
}

Như vậy là xong bộ lọc giống TGDĐ đến 9,9% rồi nhé ^^. Nói vui thôi chứ TGDĐ nó không làm theo cách củ chuối này đâu. Nhưng các bạn có thể tùy biến đoạn code trên bằng các field mà mình mong muốn như field giá, field danh mục v.v

Có bất kì thắc mắc nào thì các bạn cứ đặt câu hỏi ở đây nhé, trong khả năng của mình mình sẽ sp các bạn.

Nguồn : https://pttuan410.com

0 0 đánh giá
Article Rating
Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Sidebar chính

LỜI NGỎ

Đây là blog cá nhân, cung cấp các thông tin, kiến thức và kinh nghiệm về lập trình và cuộc sống. Những bài viết được mình sưu tập từ nhiều nguồn, mọi chi tiết liên quan đến bản quyền xin vui lòng liên hệ qua email kairu2607@gmail.com ! Cám ơn rất nhiều.

Tìm kiếm

Thủ thuật Wordpress

Chức năng theo dõi đơn hàng cho Woocommerce

Thay đổi cách hiển thị thông tin tài khoản ngân hàng của Woocommerce

Hướng dẫn thêm trường yêu cầu xuất hóa đơn VAT vào Woocommerce

Hướng dẫn thêm trạng thái sản phẩm trong Woocommerce

[Woocommrece] Thêm note phương thức thanh toán Woocommrece

Tự động điền các thuộc tính của ảnh dựa trên tiêu đề

Hướng dẫn cách truyền tiêu đề sản phẩm vào Contact Form 7

Codeigniter Framework

[CodeIgniter 4] Codeigniter 4 Remove Public and Index.php From URL

[CodeIgniter 4] How to upload Codeigniter 4 website on share hosting?

Sửa lỗi website Codeigniter 2.x không chạy được với PHP 7.x

[CodeIgniter 4] Sử dụng cURL trong CodeIgniter 4

[CodeIgniter 4] Sử dụng cache để tăng tốc website trong CodeIgniter 4

[CodeIgniter 4] Xử lý hình ảnh chuyên nghiệp trong CodeIgniter 4

[CodeIgniter 4] Hướng dẫn gửi mail trong CodeIgniter 4

Dịch vụ Thiết Kế Website

React Native

Setting ANDROID_HOME enviromental variable on Mac OS X

Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation

All Image/Fast Image in React Native app not working on iOS 14 beta and Xcode 12 beta – Fix image cannot show in iOS 14

Phần mềm hay

Remote System Explorer (SSH, Telnet, FTP and DStore protocols)

Update Control 2.0 – Công Cụ Tắt Update Trên Windows 10/11

Defender Control 2.1 – Vô Hiệu Hóa Windows Defender

Manga Comic Downloader

Phần mềm download truyện tranh KnightComic

Copyright © 2022 · Metro Pro on Genesis Framework · WordPress · Đăng nhập

wpDiscuz