Bài viết sau ChuanSeoWeb sẽ hướng dẫn bạn cách hiển thị sản phẩm theo category. Bài viết này thuộc chuyên mục WordPress Development. Đây là một trong những kiến thức cơ bản khi bạn lập trình các chức năng trong WordPress. Bạn có thể dùng shortcode có sẳn trong woocommerce hoặc tự viết code hiển thị sản phẩm theo category. Dưới đây mình sẽ hướng dẫn bạn cả 2 cách trên.

Có thể bạn quan tâm: Hiển thị bài viết cùng chuyên mục trong wordpress

Code hiển thị sản phẩm theo category

Trong phần này mình sẽ hướng dẫn bạn tạo ra một hàm chuyên để lấy danh sách các sản phẩm theo slug danh mục sản phẩm. Trong file function.php của theme bạn thêm hàm sau vào:

function chuanseoweb_html_list_product_by_cat_slug( $cat_slug = '' ) {

	if( empty( $cat_slug ) ) return;

	$args=[
		'post_type' => 'product',
		'product_cat' => $cat_slug,
		'posts_per_page' => 6, 
		'order' => 'desc',
	];
	
	$products = new \WP_Query($args);

	$html = "";
	$html .= "<div class='csw-list-product'>";

	if($products->have_posts()) {
		while($products->have_posts()) {
			$products->the_post();

			global $product;				

			$html .= "<div class='csw-product-item'>";

			$html .= "<a class='csw-media' href='".get_the_permalink()."'>".get_the_post_thumbnail(get_the_ID(), 'thumnail', array( 'class' =>'thumnail') )."</a>";
			$html .= "<h3 class='csw-title'><a href='".get_the_permalink()."'>".get_the_title()."</a></h3>";
			$html .= "<div class='csw-product-price'>".$product->get_price_html()."</div>";
			$html .= "<a class='csw-add-cart' href='".home_url()."?add-to-cart=".get_the_ID()."'>".esc_html__('Thêm vào giỏ hàng', 'ntl-csw')."</a>";
			$html .= "</div>";
			
		}
	} 
	wp_reset_postdata();
	$html .= "</div>";

	return $html;
}

Trong hàm chuanseoweb_html_list_product_by_cat_slug() sẽ dùng 1 tham số là slug của category. Để lấy slug category bạn vào Products -> Categories. Danh sách các slug danh mục chính là các đường dân.

Có thể bạn quan tâm: Cách tao shortcode wordpress mới nhất 2021

Bạn muốn lấy danh sách sản phẩm nào thì bạn dùng slug danh mục đó thêm vào hàm chuanseoweb_html_list_product_by_cat_slug (). Bạn thêm code php sau vào nơi bạn muốn hiển thị sản phẩm theo category:

$list_product = chuanseoweb_html_list_product_by_cat_slug('accessories');
echo $list_product;

Khi thêm đoạn code trên nó sẽ hiển thị sản phẩm theo category. Tiếp theo bạn cần thêm một chút code css để cho danh sách sản phẩm này dễ nhìn hơn chút. Bạn thêm đoạn code css sau vào file css trong theme:

.csw-list-product {
  display: flex;
  flex-wrap: wrap;
}
.csw-list-product .csw-product-item {
  width: calc(33.33% - 20px);
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .csw-list-product .csw-product-item {
    width: 100%;
  }
}
.csw-list-product .csw-product-item:nth-child(3n + 1), .csw-list-product .csw-product-item:nth-child(3n + 2) {
  margin-right: 30px;
}
@media (max-width: 767px) {
  .csw-list-product .csw-product-item:nth-child(3n + 1), .csw-list-product .csw-product-item:nth-child(3n + 2) {
    margin-right: 0px;
  }
}
.csw-list-product .csw-product-item .csw-media {
  display: inline-block;
  margin: 0 0 20px 0;
}
.csw-list-product .csw-product-item .csw-title {
  margin: 0 0 10px 0;
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: #333;
}
.csw-list-product .csw-product-item .csw-title a {
  font-size: 18px;
  line-height: 24px;
  color: #333;
  font-weight: 600;
  transition: 0.4s;
}
.csw-list-product .csw-product-item .csw-title a:hover {
  color: #f00;
}
.csw-list-product .csw-product-item .csw-product-price {
  margin: 0 0 10px 0;
}
.csw-list-product .csw-product-item .csw-product-price span {
  font-size: 16px;
  line-height: 20px;
}
.csw-list-product .csw-product-item .csw-product-price del span {
  color: #999;
}
.csw-list-product .csw-product-item .csw-product-price ins span {
  color: #666;
}
.csw-list-product .csw-product-item .csw-add-cart {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  background: #202b5d;
  padding: 10px 20px 10px 20px;
  transition: 0.4s;
}
.csw-list-product .csw-product-item .csw-add-cart:hover {
  background: #f00;
}

Sau khi thêm đoạn code css trên bạn sẽ nhận được danh sách các sản phẩm như sau:

Như vậy bạn đã hoàn thành code hiển thị sản phẩm theo category. Tiếp theo mình sẽ hướng dẫn bạn cách đơn giản hơn là dùng shortcode có sãn của WooCommerce. Bạn chỉ cần thêm đoạn shortcode của WooCommerce này vào với các tham số truyền vào là nó sẽ hiển thị sản phẩm theo danh mục.

Có thể bạn quan tâm: Cách thêm widget cho wordpress mới nhất 2021

Hiển thị sản phẩm theo category bằng shortcode woocommerce

Bạn tham khảo shortcode về product category của woocommerce tại đây. Ví dụ shortcode của woocommerce hiển thị danh sách các sản phẩm theo danh mục:

[product_category category="accessories"]

category ở đây là slug của danh mục.

Kết Luận

Qua bài viết trên mình đã hướng dẫn bạn cách code hiển thị sản phẩm theo category. Mình hy vọng sẽ giúp ích cho bạn. Nếu có câu hỏi nào bạn vui lòng để lại bình luận bên dưới. Cám ơn bạn đã quan tâm bài viết.