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

Ngày đăng: 05 - 06 - 2021 Lượt xem: 470 lượt

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 12 votes
Article Rating

guest
1 Comment
Bình chọn
Mới nhất Cũ nhất
Inline Feedbacks
View all comments
Văn phòng công chứng

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

Bài viết liên quan

Hiển thị ngày dự kiến ​​giao hàng trên trang Sản phẩm

Hiển thị ngày dự kiến ​​giao hàng trên trang Sản phẩm

27 - 04 - 2021

Ngày dự kiến sản phẩm woocommerce như thế nào? Vd thứ Hai trước 16:00 – đoạn mã này được in...

Thay chữ Sale thành % giảm giá trong woocommerce

Thay chữ Sale thành % giảm giá trong woocommerce

19 - 04 - 2021

Thay Sale thành % giảm giá woocommerce? Nhiều khi chúng ta không muốn hiển thị chữ SALE khi sản phẩm...

Thêm tab trong trang sản phẩm WooCommerce

Thêm tab trong trang sản phẩm WooCommerce

15 - 04 - 2021

Thông thường, trong trang sản phẩm của woocommerce sẽ có 3 tabs khác nhau giúp bạn hiển thị các...

Tùy chỉnh thông tin thanh toán trong Woocommerce

Tùy chỉnh thông tin thanh toán trong Woocommerce

05 - 04 - 2021

Tùy chỉnh thông tin thanh toán trong Woocommerce như thế nào? Ai cũng biết Woocommerce là plugin nổi tiếng nhất...

5 plugin review tốt nhất cho WordPress

5 plugin review tốt nhất cho WordPress

08 - 03 - 2021

5 plugin review tốt nhất cho WordPress là những plugin nào? Bạn đang tìm kiếm các plugin đánh giá sản...

Top 5 plugin tốt với WooCommerce

Top 5 plugin tốt với WooCommerce

08 - 03 - 2021

Top 5 plugin tốt với WooCommerce tốt nhất hiện nay? Bạn đang tìm kiếm những plugin tốt nhất cho một...

1
0
Would love your thoughts, please comment.x
()
x