Hiển thị Star Ratings bên dưới giá sản phẩm Woocommerce

Cách hiển thị star rating woocommerce như thế nào ?

Trở ngại lớn nhất với các website bán hàng trực tuyến là xây dựng được lòng tin giữa khách hàng và website bán hàng của bạn.

Thói quen của người dùng mua hàng trên internet hiện nay đó là tìm kiếm các thông tin, đánh giá về sản phẩm trước khi quyết định mua.

Sản phẩm chất lượng tốt, được tin dùng và hữu ích sẽ cộng hưởng vào cách mà khách hàng cảm nhận về bạn và doanh nghiệp của bạn. Chính vì vậy mà đánh giá (reivew )trong website là 1 phần giúp web của bạn thu hút khách hàng và tăng doanh số,…

Hiển thị star rating bên dưới giá sản phẩm

Để thêm đánh giá sao (star rating) hiển thị bên dưới giá ở trang archive, rất đơn giản bạn chỉ cần thêm đoạn code sau vào tệp functions.php:

add_action(‘woocommerce_after_shop_loop_item_title’,’change_loop_ratings_location’, 2 );
function change_loop_ratings_location(){
remove_action(‘woocommerce_after_shop_loop_item_title’,’woocommerce_template_loop_rating’, 5 );
add_action(‘woocommerce_after_shop_loop_item_title’,’woocommerce_template_loop_rating’, 15 );
}

Hiển thị số lượng xếp hạng

Để lấy số liệu đánh giá rating, bạn sử dụng đoạn mã bên dưới.

add_filter( ‘woocommerce_product_get_rating_html’, ‘loop_product_get_rating_html’, 20, 3 );
function loop_product_get_rating_html( $html, $rating, $count ){
if ( 0 < $rating && ! is_product() ) {
global $product;
$rating_cnt = array_sum($product->get_rating_counts());
$count_html = ‘ <div class=”count-rating”>’ . $rating_cnt .'</div>’;
$html       = ‘<div class=”container-rating”><div class=”star-rating”>’;
$html      .= wc_get_star_rating_html( $rating, $count );
$html      .= ‘</div>’ . $count_html . ‘</div>’;
}
return $html;
}
Khi thêm bạn sẽ có thể gặp 1 số lỗi về dàn hàng đó là của Css, dưới đây là code Css khắc phục điều đó:
.woocommerce .star-rating span{
  font-family: 'star';
}
.container-rating {
    display: flex;
    align-items: center;
 }

Lời kết

Dưới đây mình đã chia sẻ cách hiển thị star rating woocommerce, nếu bạn thấy hay đừng quên để lại bình luận bên dưới nhé

Nếu các bạn thấy hay có thể theo dõi chuyên mục thủ thuật wordpress để biết thêm nhiều kiến thức mới nha.

Hãy follow fanpage để nhận được những bài viết mới nhất nhé : Hocwordpress Group

Chúc bạn có những kiến thức về  wordpress thú vị và hay ho !

4 43 votes
Đánh giá bài viết
Hiển thị Star Ratingsstar rating woocommerce
Dỗ Toàn: ยิงปลา slotonline เกมสล็อต เกมยิงปลา

View Comments (3)

  • Mình vừa test thử, rất oki luôn. Mình cũng thêm kkrankting vào luôn bài viết để kết quả hiện thị trên google được nổi bật hơn. Cảm ơn bạn rất nhiều vì đã chia sẻ!

  • dạ em làm theo nhưng nó chỉ hiện số. Ví dụ như 5 sao thì nó hiện là 5.00 chứ không phải là 5 ngôi sao ạ :((((((

Leave a Comment
Related Post
  1. Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong trang danh sách sản phẩm
  2. Tạo thông báo khách mua hàng cho cửa hàng WordPress
  3. Thêm ký tự vào trước và sau giá sản phẩm trong WooCommerce
Leave a Comment