Hiển thị sản phẩm WooCommerce theo tab danh mục trong WordPress – TUAN DC

Posted on by mtoplistChuyên mục:Top List

Đánh giá bài viết

Có nhiều mục đích để hiển thị sản phẩm với những yêu cầu khác nhau, Nếu sử dụng Themes Page Builder thì điều này dễ dàng để sắp xếp nhờ vào các phần đã viết sẵn. Với theme tự code, bạn phải tự viết các truy vấn và hàm lặp phức tạp để hoàn thành yêu cầu. Trong bài viết này, mình sẽ chia sẻ với bạn một cách để hiển thị sản phẩm WooCommerce theo tab danh mục trong WordPress sử dụng truy vấn.

Chuẩn bị template tab HTML

Để bắt đầu, bạn phải trước một cấu trúc HTML. cấu trúc này nên có css và Javascript để hoạt động tốt đã, sau đó mình sẽ lồng chúng và các vòng lặp để xuất ra kết quả chính xác nhất. Dưới đây là một đoạn mã HTML Tab của mình.

<div class="e-tabs not-dqtab">
   <div class="row row-noGutter">
     <div class="col-sm-12">
       <div class="content">

          <!--VÙNG HIỂN THỊ TÊN DANH MỤC (TÊN TAB)-->
          <ul class="tabs tabs-title clearfix hidden-xs">
            <li class="tab-link current" data-tab="tab-1">
                <span>TÊN DANH MỤC</span>
            </li>
          </ul>
          <!--VÙNG HIỂN THỊ TÊN DANH MỤC (TÊN TAB)-->
 
          <!--VÙNG HIỂN THỊ TAB-->
          <div id="tab-1" class="tab-content">
             <div class="products products-view-grid ">
                <div class="row row-noGutter">
 
                   <!--VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB-->
                   <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                      <div class="product-box">
 
                      </div>
                   </div>
                   <!--VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB-->
 
                 </div>
              </div>
 
           </div>
           <!--VÙNG HIỂN THỊ TAB-->
 
        </div>
      </div>
    </div>
 </div>

Với đoạn trên mình xác định 2 phần như sau:

Phần 1: là vùng “VÙNG HIỂN THỊ TÊN DANH MỤC (TÊN TAB)”.

Phần 2: là vùng “VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB”.

Sau khi đã có mã giao diện HTML và xác định được vùng thì bây giờ mình sẽ đưa các câu truy vấn và hàm lặp để biến mã HTML tĩnh thành giao diện động.

Tích hợp mã template HTML vào theme

Mình sẽ xử lý từng vùng như sau:

Hiển thị danh mục điều hướng

Phần này mình sử dụng một mảng để lấy các thuộc tính đưa vào hàm get_terms. Trong này mình sử dụng 'parent'=>0 là để lấy lên những danh mục cha và bỏ qua các danh mục con. Nếu bạn bỏ cái này thì nó sẽ lấy hết tất cả những danh mục không kể là danh mục cha hay con. Biến $product_categories sẽ lưu trữ các danh mục được trả về. Mình sẽ sử dụng nó trong vòng lặp áp dụng cho phần 2. Đoạn code như sau:

<!--VÙNG HIỂN THỊ TÊN DANH MỤC (TÊN TAB)-->
 <ul class="tabs tabs-title clearfix hidden-xs">
   <?php $args = array('parent' => 0 );
         $product_categories = get_terms( 'product_cat',$args);
         $count = count($product_categories);
         if ( $count > 0 ){
            $i=0;
            foreach ( $product_categories as $product_category ) {
                $i++;
                $title_cate = $product_category->name;?>
                  <li class="tab-link current" data-tab="tab-<?php echo $i;?>">
                     <span><?php echo $title_cate;?></span>
                  </li>
    <?php } ?>
  </ul>
 <!--VÙNG HIỂN THỊ TÊN DANH MỤC (TÊN TAB)-->

Như vậy là mình đã hiển thị được các danh mục là tên tab.

Hiển thị vùng tab của danh mục và sản phẩm thuộc danh mục

Đầu tiên mình sử dụng tiếp tục hàm lặp như trên để lấy lặp lấy “tab content” của từng mục như sau:

<?php if ( $count > 0 ){
  $i=0;
  foreach ( $product_categories as $product_category ) {
    $i++;
    $slug_cate = $product_category->slug; ?>
 
    <!--VÙNG HIỂN THỊ TAB-->
    <div id="tab-<?php echo $i;?>" class="tab-content">
        <div class="products products-view-grid ">
           <div class="row row-noGutter">
             
               <!--VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB-->
               <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
                  <div class="product-box">
 
                  </div>
               </div>
               <!--VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB-->

           </div>
        </div>
 
    </div>
    <!--VÙNG HIỂN THỊ TAB-->
 <?php } } ?>

Bây giờ mình sẽ lấy tất cả sản phẩm trong danh mục dựa vào biến $slug_cate.

<?php $feat_pro = new WP_Query( 
                              array('post_type' => 'product', 
                              'product_cat' => $slug_cate));
       while ( $feat_pro->have_posts() ) : 
       $feat_pro->the_post(); 
       global $product;
 ?> 

 <!--VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB-->
 <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
     <div class="product-box">
        <!--Nội dung sản phẩm ở đây-->
     </div>
 </div>
 <!--VÙNG HIỂN THỊ SẢN PHẨM TRONG TAB-->

 <?php endwhile; wp_reset_query(); ?>

Tất cả thuộc tính của sản phẩm nằm trong biến global $product, bạn sử dụng biến này để lấy ra thông tin sản phẩm nhé.

Đây là kết quả mình làm trong một project thực tế với đoạn mã trên

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

mtoplist