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

Ngày đăng: 05 - 06 - 2021 Lượt xem: 883 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 !

3.8 19 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

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

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

19 - 10 - 2021

Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm Đã có một vài...

Hợp nhất giỏ hàng WooCommerce và trang thanh toán chỉ với 4 bước đơn giản.

Hợp nhất giỏ hàng WooCommerce và trang thanh toán chỉ với 4 bước đơn giản.

29 - 09 - 2021

Làm thế nào để hợp nhất giỏ hàng WooCommerce với trang thanh toán? Một số người rất cần hợp nhất...

Hiển thị danh mục sản phẩm woocommerce

Hiển thị danh mục sản phẩm woocommerce

08 - 06 - 2021

Hiển thị danh mục sản phẩm woocommerce như thế nào? Chắc hẳn đôi khi chúng ta muốn tùy chỉnh...

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...

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