Code tạo thanh bar hiển thị số lượng đánh giá đẹp mà không cần plugin

Với đoạn code nho nhỏ sau, bạn sẽ biến phần đánh giá sản phẩm của mình trở nên đẹp mắt và chuyên nghiệp hơn, như hình bên dưới

Cách làm cũng đơn giản, với 2 thao tác là ra.

Chèn code sau vào functions.php của theme đang dùng

functionaddstar_pttuan(){if ( is_singular('product') ) {global $product;  $rating_arr = $product->get_rating_counts();  $review_count = $product->get_rating_count();  $countstar = $product->get_average_rating();if($countstar=='0'){$countstar ='Chưa có đánh giá';}?><divclass="rating-table row row-small align-middle"><divclass="rating-table__total col large-4 small-12 medium-12"><divclass="title-rating">Điểmđánhgiátrungbình</div><divclass="rating_total"><?phpecho $countstar;?></div><divclass="star-rating-custom"><?phpechowc_get_rating_html($countstar,$review_count);?></div></div><divclass="rating-table__bar col large-4 small-12 medium-12"><divclass="bar-star"><?phpfor ($i=5; $i >0 ; $i--) {                 $rating_count =0;                $rating_per =0;if(isset($rating_arr[$i])){                  $rating_count = $rating_arr[$i];                  $rating_per =round(($rating_count/$review_count)*100,0);                  }echo'<div class="ptt-row star-rating-'.$i.'">';echo'<div class="ptt-col-1">'.$i.'<img src="https://saigondata.vn/img/star.png"'.' class="star-cust"></div>';echo'<div class="ptt-col-2"><div class="ptt-meter-bar"><div class="ptt-bar-temperature" style="width:'.$rating_per.'%"></div></div></div>';echo'<div class="ptt-col-3">'.$rating_count.'</div>';echo'</div>';            };?></div></div><divclass="rating-table_cmt col large-4 small-12 medium-12"><ahref="#reviews"><span>Đểlạiđánhgiá</span></a></div></div><?php}}add_filter('comments_template','addstar_pttuan',10);

Chèn đoạn css sau vào style.css của theme đang dùng

.rating-table_cmt a{border:1pxsolidtransparent;border-radius:4px;padding:12px16px;font-size:14px;line-height:14px;color:#fff;background:#60842a;}.rating_total{font-size:22px;line-height:60px;color:#cb1c22;font-weight:500;margin-bottom:4px;}.title-rating{font-size:18px;}.ptt-bar-temperature{height:100%;background:red;border-radius:5px;}.fa-star {font-size:13px;color:#ea9d02;margin-left:3px;}.ptt-col-1{width:35px;display:flex;}.rating-table__total,.rating-table_cmt{text-align:center}.star-rating-custom.star-rating{margin:auto;}.ptt-col-2{width:100%;margin:auto10px;}.ptt-meter-bar{border-radius:5px;height:10px;width:100%;background:#454444;}.ptt-row{display:flex;align-items:center;justify-content:space-between;}.star-cust {height:15px;margin:auto;}