Code cach tao dau sao đánh giá trên html năm 2024

Trong một số trang , yêu cầu hiện thị số lượng đã review sản phẩm ( đánh giá sao ) muốn show ra để mọi người cùng biết , Mình sẽ chỉ bạn thêm số đánh giá cho sản phẩm vào sau dấu sao nhé.

Thêm số đánh giá cho sản phẩm trong wordpess

Bạn coppy code bên dưới cho vào file Functoin nhé

add_filter( 'woocommerce_product_get_rating_html', 'loop_product_get_rating_html', 100, 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;

}

Sau khi thêm xong , bạn thử vào đánh giá 1 sản phẩm nào đó nhé

bạn quay lại trang sản phẩm sẽ thấy Số lượng đánh giá được Show ra nhé

ah , thêm chút css là ok

/*Đánh giá sao*/

.count-rating {

margin-top: 7px;

}

.container-rating {

display: flex;

}

Chúc bạn Thành công nhé

Điểm 3.8/5 - ( Có 114 bình chọn)

Star Rating là tiện ích khảo sát, đánh giá của người dùng đối với Website. Có tiện ích star rating trông website của chúng ta sẽ chuyên nghiệp hơn, đặc biệt khi website của bạn là 1 website bán hàng thì việc nhận phản hổi của khách hàng là điều rất quan trọng, để bạn có thể điều chỉnh quy cách phục vụ, giao diện, thông tin sản phẩm... nhằm phục vụ khách hàng ngày một tốt hơn.

Vì vậy trong bài này mình giới thiệu đến các bạn một cách đơn giản để làm Star Rating. bạn chỉ cần kết hợp HTML radio và thuộc tính CSS3 để thiết kế tiện ích khỏa sát người dùng.

HTML

Ta tạo cấu trúc html cho mẫu rating đơn giản như sau:

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

Và ta chèn thêm thư viện font Awesome để tạo hình icon ngôi sao.

<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>

CSS Và đoạn css sau sẽ giúp ta tạo hiệu ứng cho các ngôi sao.

div.stars {
  width: 270px;
  display: inline-block;
}
input.star { display: none; }
label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: 
# 444;
  transition: all .2s;
}
input.star:checked ~ label.star:before {
  content: '\f005';
  color: 
# FD4;
  transition: all .25s;
}
input.star-5:checked ~ label.star:before {
  color: 
# FE7;
  text-shadow: 0 0 20px 
# 952;
}
input.star-1:checked ~ label.star:before { color: 
# F62; }
label.star:hover { transform: rotate(-15deg) scale(1.3); }
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}

Và đây là kết quả:

Chỉ đơn giản vậy thôi là ta đã có được Star Rating cho website của mình rồi. Từ giờ, bạn có thể dễ dàng nhận được kết quả khảo sát từ phía khách hàng về website và sản phẩm... của mình.