Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

Trong bài viết này mình sẽ giúp các bạn Tự tạo hiển thị sản phẩm theo danh mục Woocommerce một cách đơn giản nhất

Tự tạo hiển thị sản phẩm theo danh mục Woocommerce
4.8 (95%) 20 votes
Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

Chào các bạn,

Một chức năng mà mình thấy có khá nhiều bạn đang quan tâm là thay vì sử dụng shortcode hay Plugin để hiển thị sản phẩm theo danh mục trong Woocommerce, thì ta có thể tự làm nó với code của chính mình.
Trong bài viết này mình sẽ giúp các bạn Tự tạo hiển thị sản phẩm theo danh mục Woocommerce một cách đơn giản nhất

Tự tạo hiển thị sản phẩm theo danh mục Woocommerce
Cùng bắt đầu nào!

– Thông thường bạn sẽ cần có vòng lặp(Loop) lấy ra bài viết như sau :

<?php
$vnkings = new WP_Query(array(
'post_status'=>'publish',
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> '4'));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// nội dung cần lặp
<?php endwhile ; wp_reset_query() ;?>

Nếu sử dụng Loop như trên thì nó sẽ mặc định lấy bài trong Post type = Post (chính là phần tin tức của các bạn)

– Vậy chúng ta cần 1 số điều kiện nâng cao để nó bắt được sản phẩm trong một danh mục cụ thể ở Woocommerce:

<?php
$vnkings = new WP_Query(array(
'post_type'=>'product',
'post_status'=>'publish',
'tax_query' => array(
	  array(
		  'taxonomy' => 'product_cat',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
  ),
'orderby' => 'ID',
'order' => 'DESC',
'posts_per_page'=> '4'));
?>
<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
// Nội dung từng sản phẩm
<?php endwhile ; wp_reset_query() ;?>

Giải thích :

  • WP_Query(): tạo 1 Query với các điều kiện bên trong
  • ‘post_type’=>’product: Lấy các bài viết trong post type Product
  • ‘post_status’=>’publish’: Hiển thị các bài viết đã đăng(không phải bài nháp)
  • ‘taxonomy’ => ‘product_cat’: Bên trên ta thấy đã lấy bài viết ở Product, vậy tiếp theo ta hướng nó tới Danh mục cụ thể là Taxonomy product_cat
  • ‘field’ => ‘id’: Cách để lấy ra taxonomy là sử dụng ID của taxonomy đó
  • ‘terms’ => ‘ID_Của_Danh_Mục_Sản_Phẩm’: Đây chính là phần khai báo ID của danh mục sản phẩm bạn cần nhập vào
  • ‘orderby’ => ‘ID’,’order’ => ‘DESC’: Hiển thị sản phẩm từ mới đến cũ
  • ‘posts_per_page’=> ‘4’: hiển thị ra số lượng sản phẩm bạn muốn, cụ thể ở đây mình show ra 4 sản phẩm

Lấy ID_Của_Danh_Mục_Sản_Phẩm bằng cách sửa danh mục sản phẩm và xem ID trên thanh Address trình duyệt
Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

– Khi đã có vòng lặp ra các sản phẩm trong danh mục cụ thể rồi, chúng ta tìm hiểu đến cách hiển thị các sản phẩm trong vòng lặp đó nhé:
(Trước tiên bạn nên đọc bài viết này để xem ta có những hàm gì để lấy ra dữ liệu trong Woocommerce: Tổng hợp các hàm hiển thị dữ liệu cho Woocommerce)

– Bây giờ ta sẽ có đoạn code cụ thể như sau:

<div class="vnkings_category_product">
	<div class="head_vnkings">
		<h3 class="title_head"><a href="<?php echo get_term_link(ID_Của_Danh_Mục_Sản_Phẩm); ?>"><?php echo get_cat_name(ID_Của_Danh_Mục_Sản_Phẩm);?></a></h3>
	</div>
	<?php
	$vnkings = new WP_Query(array(
	'post_type'=>'product',
	'post_status'=>'publish',
	'tax_query' => array(
	  array(
		  'taxonomy' => 'product_cat',
		  'field' => 'id',
		  'terms' => 'ID_Của_Danh_Mục_Sản_Phẩm'
	  )
	),
	'orderby' => 'ID',
	'order' => 'DESC',
	'posts_per_page'=> '4'));
	?>
	<?php while ($vnkings->have_posts()) : $vnkings->the_post(); ?>
	<div class="list_sp col-md-3">
		<a class="image_sp" href="<?php the_permalink() ;?>"><?php the_post_thumbnail("medium",array( "title" => get_the_title(),"alt" => get_the_title() ));?></a>
		<h4 class="title_sp"><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a></h4>
		<span class="price"><ins><span class="amount">Giá: <?php echo get_post_meta( get_the_ID(), '_regular_price', true ); ?></span></ins></span>
	</div>
	<?php endwhile ; wp_reset_query() ;?>
</div>

Lưu ý:

  • get_term_link() : lấy link danh mục sản phẩm
  • get_cat_name() : hiển thị tiêu đề danh mục sản phẩm
  • Hãy thay ID_Của_Danh_Mục_Sản_Phẩm bằng id danh mục sản phẩm của bạn nhé

Xem thử kết quả bên Vnkings.com:
Tự tạo hiển thị sản phẩm theo danh mục Woocommerce

Bằng sự sáng tạo của bạn hãy thử tạo style riêng cho phần này! nếu thành công hãy khoe phần bạn làm với mình qua fanpage hoặc comment nhé 😀

Bài liên quan

  1. Hi bạn,
    Đầu tiên là cảm ơn bài viết rất hay của bạn.
    Bạn cho mình hỏi, có lần nào bạn chèn thêm cái button add to card vào vòng lặp đó chưa, sau khi mình đã làm giống bạn nhưng mình chèn thêm 1 nút add to card vào nữa, khi nhấn nút thì nó lại load lại trang mặc dù có vào giỏ hàng. Vậy bạn có hướng giải quyết nào không. Thanks!

    • Chào bạn, nếu bạn muốn nó load dạng ajax không load trang thì vòng lặp ban cần trong div có class là woocommerce
      Ví dụ:

      <div class="woocommerce">
      Vòng lặp có kèm button add to cart.
      </div>
      

      Bở vì Woo Hỗ trợ Js cho các phần tử thuộc div class = woocommerce

  2. mình coppy đoạn code trên đã thay id danh mục sản phẩm bằng id danh mục danh mục sản phẩm của mình ! chèn đoạn code trên vào tệp index.php xong thì bị treo trang luôn ! phải vào cpanlen xóa đi thì mới vào đc trang!
    làm ơn hướng dẫn cho mình chi tiết hơn được không vì trình độ lập trình của mình rất non chỉ muốn biết sơ sơ để tùy biến cho trang của mình làm ơn giúp mình với

  3. hello bạn, cho mình hỏi là sao mình click vào sản phẩm trên menu thì không ra sản phẩm nào hết. Mình đã change permanlink đầy đủ hết rồi vẫn không khắc phục được. Mình tạo và đăng sản phẩm mới bấm review thì ok nhưng khi load trang chủ xem lại thì không thể được, mình hỏi nhiều nơi nhưng chưa có cách giải quyết, bạn giúp dùm mình nhé. Trường hợp này mình search cũng không ra. Cám ơn bạn .

  4. Cho mình hỏi, mình muốn hiển thị hết sản phẩm trong đó mình loại trừ một categoris mình không thíc nó hiển thị ra thì làm thế nào hả ??? Bằng cách khác có thể thêm 2,3 hoặc nhiều hơn id ở đây dc k ? ‘terms’ => ‘ID_Của_Danh_Mục_Sản_Phẩm’ (‘terms’ => 1,2,3,4 ….)

  5. Mình có 1 đoạn code như vậy, hiển thị mọi thứ ok, tuy nhiên nếu mình làm nhiều file danh mục khác nhau thì nó lại chỉ hiện danh mục đầu tiên thôi @@, cứ cái widge nào được kéo lên trên cùng thì hiện, còn mấy cái sau là ko hiện sản phẩm, mặc dù đã check đi check lại. Ad có thể xem giúp mình xem lý do tại sao ko -_-

     'publish',
    'post_type'=>'product',
    'tax_query' => array(
    array(
    'taxonomy' => 'product_cat',
    'field' => 'id',
    'terms' => '19'
    )
    ),
    'orderby' => 'ID',
    'order' => 'DESC',
    'posts_per_page'=> '10'));
    ?>
    have_posts()) : $list->the_post();$i++ ?>
    get_img_url(the_content( ));
    }else{
    $imgUrl = $feature_img;
    }
    if(!empty($imgUrl)){
    $imgUrl =$jaiimage->get_new_img_url($imgUrl, $width, $height);
    }
    ?>
    
    <a href="" title=""><img src="" alt="">
    
    <a href="" title="">
    
    Giá: get_price_html(); ?>
    
    <?php
    echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '                     ',
    esc_url( $product->add_to_cart_url()),
    esc_attr( $product->id ),
    esc_attr( $product->get_sku() ),
    $product->is_purchasable() ? 'Mua hàng' : '',
    esc_attr( $product->product_type )
    ),
    $product ); ?>
    
  6. trong đoạn hướng dẫn trên mình không có đoạn get_userdata nên không biết code của web bạn bị lỗi gì bạn nhé. bạn thử tìm hàm đó trên code của bạn rồi xem lại xem thế nào.

  7. ad ơi cho e hỏi chút với, e muốn hiển thị khi theo kiểu click vào 1 danh mục sản phẩm cha bất kỳ thì sẽ show ra 1 list các danh mục con và sản phẩm của danh mục con đấy kiểu như web trananh.vn ấy ạ, có cách nào làm như vậy ko a?

  8. Bạn ơi, có thể chỉ cho mình fix để chỉnh lại sản phẩm trên 1 hàng được không ? Mình cóp vào nhưng nó nằm nhiều hang. Cảm ơn bạn đã chia sẽ 😀

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?