Hiển thị sản phẩm nổi bật trong WooCommerce (featured products)

Để khai trương cho chuyên mục hướng dẫn WooCommerce trên Blog Huy Kira, hôm nay mình sẽ cho ra bài đầu tiên khá nhẹ nhàng đó là bài viết: Hướng dẫn hiển thị sản phẩm nổi bật trong WooCommerce.

WooCommerce là plugin mạnh nhất để làm website bán hàng wordpress hiện tại. Với hơn 5 triệu lượt download đủ để thể hiện sức mạnh của nó.

Chuyên mục hướng dẫn WooCommerce trên Blog Huy Kira tập trung hướng dẫn lập trình theme WooCommerce. Ban đầu sẽ là những bài viết thủ thuật, làm quen, sau sẽ là những series xây dựng website hoàn chỉnh. Thôi không dài dòng nữa chúng ta bắt đầu vào bài ngày hôm nay. Hiển thị sản phẩm nổi bật trong WooCommerce:

Sản phẩm nổi bật WooCommerce

Trong plugin WooCommerce nhà cung cấp đã làm sẵn tính năng sản phẩm nổi bật, Bạn có thể dễ dàng set và unset 1 sản phẩm có là nổi bật hay không cực kỳ đơn giản.

Để set 1 sản phẩm trở thành nổi bật các bạn làm như sau:

Bước 1: Đăng nhập vào admin, duy chuyển đến menu sản phẩm

Bước 2: Ở list danh sách sản phẩm sẽ có 1 cột là ngôi sao. Ở đây bạn có thể bật tắt ngôi sao của từng sản phẩm. Ngôi sao được bật có nghĩa là sản phẩm đó là sản phẩm nổi bật

Hiển thị sản phẩm nổi bật trong WooCommerce

Về bản chất sản phẩm của WooCommerce cũng là custom post type trong wordpress thôi. Nên chúng ta sẽ dùng vòng lặp get post new WP_Query với post_type là product để get sản phẩm nổi bật ra.

Cụ thể chúng ta có đoạn code get sản phẩm nổi bật như thế này:

<?php
	$tax_query[] = array(
	    'taxonomy' => 'product_visibility',
	    'field'    => 'name',
	    'terms'    => 'featured',
	    'operator' => 'IN',
	);
?>
<?php $args = array( 'post_type' => 'product','posts_per_page' => 10,'ignore_sticky_posts' => 1, 'tax_query' => $tax_query); ?>
<?php $getposts = new WP_query( $args);?>
<?php global $wp_query; $wp_query->in_the_loop = true; ?>
<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>
<?php global $product; ?>
	<div class="item-product">
		<a href="<?php the_permalink(); ?>">
			<?php echo get_the_post_thumbnail(get_the_ID(), 'thumnail', array( 'class' =>'thumnail') ); ?>
		</a>
		<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		<div class="price-product"><?php echo $product->get_price_html(); ?></div>
		<a href="<?php bloginfo('url'); ?>?add-to-cart=<?php the_ID(); ?>">Thêm vào giỏ</a>
	</div>
<?php endwhile; wp_reset_postdata(); ?>

<?php

$tax_query[] = array(

'taxonomy' => 'product_visibility',

'field' => 'name',

'terms' => 'featured',

'operator' => 'IN',

);

<?php $args = array( 'post_type' => 'product','posts_per_page' => 10,'ignore_sticky_posts' => 1, 'tax_query' => $tax_query); ?>

<?php $getposts = new WP_query( $args);?>

<?php global $wp_query; $wp_query->in_the_loop = true; ?>

<?php while ($getposts->have_posts()) : $getposts->the_post(); ?>

<?php global $product; ?>

<?php echo get_the_post_thumbnail(get_the_ID(), 'thumnail', array( 'class' =>'thumnail') ); ?>

</a>

<div class="price-product"><?php echo $product->get_price_html(); ?></div>

</div>

<?php endwhile; wp_reset_postdata(); ?>

Đoạn code trên mình get 10 sản phẩm nổi bật trong WooCommerce. Bạn lưu ý một số trường như sau

$tax_query[] đây là một mảng chứa nhiều mảng con, để lấy sản phẩm nổi bật phải bắt buộc khai báo như trên
<?php global $product; ?> bạn nhớ khai báo biến toàn cục $product để có thể get được mất thành phần con như giá, sale…
Thẻ <a> thêm vào giỏ hàng không phải ajax mỗi lần thêm vào giỏ nó sẽ load lại trang, nếu không thích đoạn code thêm vào giỏ này bạn có thể lên mạng search kết qủa khá nhiều

Tóm lại:

Bài viết hôn nay mình đã hướng dẫn cho bạn cách get sản phẩm nổi bật WooCommerce. Do phiển bản của WooCommerce luôn update nên có thể đoạn code trên sẽ update theo thời gian. Hoặc sẽ không dùng được đối với các phiên bản WooCommerce thấp hơn.

Nếu gặp vấn đề gì về tính năng này bạn vui lòng comment phía dưới mình sẽ hỗ trợ.

Sắp tới mình sẽ cho ra liên tục loạt bài về WooCommerce trong chuyên mục hướng dẫn WooCommerce này. Các bạn nhớ theo dõi nhé.

Chúc các bạn học wordpress thành công!