Hướng dẫn Woocommerce

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(); ?>

Đ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!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native(2015) => Fullstack ... ?? tối về viết blog... (Còn tiếp...)

Recent Posts

Cafe với Anh Huy nghe kể chuyện hành trình fonttiengviet.com

Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…

9 tháng ago

Giới thiệu thiết kế web Quảng Nam Web – quangnamweb.com

Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…

10 tháng ago

Hướng dẫn viết widget bài viết theo chuyên mục trong wordpress

Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…

12 tháng ago

Tạo website để viết blog với chi phí thấp nhất ai cũng làm được

Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…

12 tháng ago

WordPress có cùi bắp? Có sống tốt với nghề thiết kế website wordpress?

Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…

1 năm ago

Share mẫu website blog cá nhân cực nhẹ, giống hocwordpress.vn

Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…

1 năm ago