Xếp hạng sao html

Trở nên đáng sợ nhất với các trang web bán hàng trực tuyến được xây dựng được lòng tin giữa khách hàng và trang web 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 thông tin, đánh giá về sản phẩm trước khi quyết định mua hàng

Sản phẩm chất lượng tốt, được tin dùng và hữu ích sẽ cộng hưởng theo 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ố,…

Xếp hạng sao html

Hiển thị xếp hạng sao bên dưới giá sản phẩm

Để thêm đánh giá sao (xếp hạng sao) hiển thị bên dưới giá ở trang lưu trữ, rất đơn giản, bạn chỉ cần thêm đoạn mã sau vào tệp functions. php

add_action(‘woocommerce_after_shop_loop_item_title’,’change_loop_ratings_location’, 2 );

hàm 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 );

}

Show display number of ratings

Để lấy số liệu đánh giá xếp hạng, 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 );

hàm loop_product_get_rating_html( $html, $rating, $count ){

nếu ( 0 < $rating &&. is_product() ) {

toàn cầu $product;

$rating_cnt = array_sum($product->get_rating_counts());

        $count_html = ‘ ’ . $rating_cnt .'

’;

        $html       = ‘’;

$html. = wc_get_star_rating_html( $rating, $count );

$html. = ‘’. $count_html. ‘’;

}

trả về $html;

}

Khi biết thêm, bạn có thể gặp 1 số lỗi về dàn hàng đó là của Css, dưới đây là mã 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ị xếp hạng sao woocommerce, nếu 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

Điểm 4. 6 /5 dựa vào 87 đánh giá

Tiện ích đánh giá xếp hạng cho các bài viết dạng 5 sao thì mặc định trong Blogger cũng có hỗ trợ tiện ích này, tuy nhiên nó nhìn không chuyên nghiệp và khó tùy chỉnh hơn. Hôm nay bài viết này sẽ giới thiệu cho các bạn một cách có thể tạo ra tiện ích đánh giá 5 sao một cách chuyên nghiệp với nhiều tùy chỉnh rất hữu ích và tạo nên 1 tiện ích thật đẹp mắt, chuyên nghiệp

Xếp hạng sao html


Ở đây mình sẽ hướng dẫn các bạn thêm vào các template blogspot, các nền tảng khác các bạn vẫn có thể làm tương tự theo hướng dẫn. Ở đây tiện ích có hỗ trợ ngôn ngữ Tiếng Việt nên rất phù hợp để các bạn đưa vào website hay blog của mình.

Đầu tiên bạn vào rating-widget. com và chọn nền tảng cần tạo (Ở đây mình chọn Blogger)

Xếp hạng sao html


Tiếp theo bạn tiến hành tùy chỉnh thông tin của tiện ích

Xếp hạng sao html

- Kiểu. là phần bạn chọn kiểu đánh giá mà bạn muốn
- Chủ đề & Màu sắc. Bạn chọn giao diện và màu sắc cho tiện ích
- Ngôn ngữ & Phông chữ. You select language and font chữ phù hợp
- Nhãn. Tùy chỉnh vị trí hiển thị các số theo xếp hạng
- Sao. Chọn số lượng ngôi sao hiển thị cho tiện ích
- Văn bản tùy chỉnh. Bạn có thể tùy chỉnh chữ hiển thị xếp hạng cho từng ngôi sao từ thấp đến cao.

Sau khi tùy chỉnh xong, bạn có thể nhấp vào Thêm vào Blogger (Nếu muốn tự động thêm vào Blogger của bạn), tuy nhiên ở đây mình hướng dẫn các bạn cách nhúng mã bình thường để . Bạn chọn Hiển thị mã nguồn và sẽ nhận được mã tương tự bên dưới.

Xếp hạng sao html