vnfaster@gmail.com

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.

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

  7. Chào ad, mình đã đọc bài viết của bạn nhiều lần có nhiều bài hay mình đã áp dụng trên website của mình. Nhưng mình đang gặp khó khăn không biết xử lý thế nào về y/c: hiển thị tất cả các danh mục cha(level 1), sau khi vào 1 danh mục cha lại chuyển đến 1 trang hiển thị tất cả các danh mục level 2. Mong bạn giúp đỡ

  8. Mình đang dùng 1 web bán hàng sử dụng WC, vì cũng mới nhận SEO không để ý rằng trước khi update plugin và wordpress thì hình như nó hoạt động bình thường. Nhưng sau khi update thì hiện tại giỏ hàng không hiện ra sản phẩm dù vẫn báo số. Mình có xem tình trạng thì hình như giao diện lỗi thời, vậy cách khắc phục thế nào. Liệu mình xóa đi cài lại plugin bản cũ trước đó có ok không?

  9. Xin chào,
    Mình muốn hiển thị sản phẩm liên quan (related) chỉ show trong danh mục con (subcategory), không show trong danh mục cha (parent category) thì làm như thế nào trong Child theme? Mình search google thấy chỉ là tạo file related.php, paste code vào mà không thấy thay đổi gì.
    Cám ơn bạn.

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

Bạn cần đăng nhập để bình luận.

Audio truyện full

phàm nhân tu tiên audio

vũ thần chúa tể audio

thế giới hoàn mỹ audio

vô thượng thần đế audio

vạn cổ thần de audio

tiên nghịch audio