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

Ngày đăng: 05 - 06 - 2021 Lượt xem: 4028 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 43 votes
Đánh giá bài viết

Nhận thông báo
Nhận thông báo cho
guest

3 Góp ý
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ẻ!

shaki

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 ạ :((((((

Du Lịch Gia Khang

đơn giản mà hay quá, cảm ơn tác giả

Bài viết liên quan

Tạo tab mới trong trang sản phẩm WooCommerce

Tạo tab mới trong trang sản phẩm WooCommerce

24 - 04 - 2022

Theo mặc định, WooCommerce chỉ hỗ trợ những tab cơ bản như mô tả, thông tin thêm, đánh giá. Vậy...

Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

22 - 04 - 2022

Bạn có từng nghĩ rằng, sẽ tốt hơn nếu giỏ hàng tự động cập nhật khi thay đổi số...

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

18 - 04 - 2022

Theo mặc định, WooCommerce chỉ hiện nhãn cho sản phẩm hết hàng và đang được giảm giá. Nhưng nếu...

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

07 - 04 - 2022

Bạn có nhu cầu muốn xoá, đổi tên, thay đổi vị trí của tính năng sắp xếp trong WooCommerce....

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

02 - 03 - 2022

Bạn muốn loại bỏ dữ liệu WooCommerce ra khỏi trang web? Nếu bạn chỉ gỡ cài đặt plugin và...

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

12 - 12 - 2021

Bạn đang tìm cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce? Theo mặc định, giá...

3
0
Would love your thoughts, please comment.x