Hướng dẫn Woocommerce

Hiển thị sản phẩm được đánh giá cao trong WooCommerce

Bài viết tiếp theo trong loạt bài hướng dẫn WooCommerce này mình sẽ hướng dẫn cho các bạn cách hiển thị sản phẩm được đánh giá cao trong WooCommerce. Có nghĩa là mình sẽ hiển thị danh sách sản phẩm được sắp xếp theo thứ hạn đánh giá (sao) trong WooCommerce.

Tính năng đánh giá sản phẩm của WooCommerce

Plugin WooCommerce cung cấp cho chúng ta chức năng đánh giá sản phẩm (review). Chức năng này cho phép chúng ta để lại nhận xét về sản phẩm, đồng thời đánh giá sao cho sản phẩm (Cao nhất là 5 sao).

Để bật chức năng này các bạn vào: Wp-admin -> WooCommerce -> Thiết lập -> Sản phẩm -> Duy chuyển xún dưới cùng, (Để mặc định là oke nhất, còn nếu bạn muốn tùy chỉnh thì yêu cầu thì có thể tùy chỉnh)

Cấu hình sản phẩm được đánh giá trong admin

Form đánh giá sản phẩm có xếp hạng sao

Hiển thị danh sách sản phẩm được đánh giá cao WooCommerce

Để hiển thị danh sách sản phẩm sắp xếp theo đánh giá, các bạn dùng đoạn code sau

<?php $args = array(
 'posts_per_page' => 10,
 'post_status'    => 'publish',
 'post_type'      => 'product',
 'meta_key'       => '_wc_average_rating',
 'orderby'        => 'meta_value_num',
 'order'          => 'DESC',
);?>
<?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 
  $rating_count = $product->get_rating_count();
  $review_count = $product->get_review_count();
  $average      = $product->get_average_rating();
?>
 <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>
    <?php if ( $rating_count > 0 ) : ?>
          <?php echo wc_get_rating_html( $average, $rating_count ); ?>
        <?php else: ?>
          <div class="star-rating">
            <span style="width:0%"><strong class="rating">0</strong> trên 5 dựa trên <span class="rating">0</span> đánh giá</span>
          </div>
        <?php endif; ?>
    <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 có đánh giá từ cao đến thấp. Sản phẩm nào có đánh giá sao nhiều hơn sẽ hiển thị trước rồi đến các sản phẩm có sao ít hơn và cuối cùng là những sản phẩm không sao.

Đoạn code trên mình cũng hiện số sao đánh giá ra luôn rồi nha. Các bạn tham khảo có thể tùy chỉnh cho phù hợp.

Tóm lại:

Hôm nay mình đã hướng dân cho các bạn cách lấy danh sách sản phẩm được đánh giá cao, hy vong bài viết này sẽ giúp ích cho các bạn trong quá trình học lập trình theme wordpress. Mình vẫn tiếp tục ra đều các bài viết về chủ để hướng dẫn WooCommerce các bạn chú ý theo dõi nha!

Có thắc mắc hoặc góp ý chi cho bài viết các bạn cứ comment phía dưới, mình rất vui lòng đón nhận và tiếp thu 😀

Chào các bạn!

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