Khi vận hành một cửa hàng trực tuyến trên WordPress sử dụng WooCommerce, hiển thị số lượng đánh giá cùng với xếp hạng sao của sản phẩm giúp tăng mức độ tin cậy của khách hàng. Trong bài viết này, chúng tôi hướng dẫn bạn cách thêm số lượng đánh giá sao vào sản phẩm bằng cách sử dụng đoạn mã PHP đơn giản và cập nhật mới nhất cho năm 2025.
Lợi ích của việc hiển thị số lượng đánh giá sản phẩm
Việc hiển thị số lượng đánh giá sản phẩm không chỉ giúp người dùng dễ dàng nhận biết mức độ phổ biến của sản phẩm mà còn mang lại nhiều lợi ích khác, bao gồm:
- Tăng sự tin tưởng của khách hàng: Một sản phẩm có nhiều đánh giá chứng tỏ sản phẩm đó được nhiều người mua và sử dụng.
- Cải thiện tỷ lệ chuyển đổi: Khách hàng có xu hướng mua hàng từ những sản phẩm có nhiều đánh giá hơn là những sản phẩm chưa có đánh giá.
- Tối ưu SEO: Google có thể hiển thị đánh giá sao trên kết quả tìm kiếm, giúp tăng tỷ lệ nhấp chuột (CTR).
- Cải thiện trải nghiệm người dùng: Khách hàng có thể nhanh chóng đưa ra quyết định mua hàng dựa vào xếp hạng và số lượng đánh giá.
Mã code hiển thị số lượng đánh giá sao trên danh sách sản phẩm
Dưới đây là đoạn mã giúp hiển thị số lượng đánh giá sao ngay bên cạnh xếp hạng sao của sản phẩm trong WooCommerce.
Mã code cơ bản để hiển thị số lượng đánh giá
Thêm đoạn code sau vào file functions.php của theme con (child theme):
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 . ' đánh giá)</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;
}
Giải thích đoạn mã trên:
woocommerce_product_get_rating_html: Filter này được dùng để tùy chỉnh cách hiển thị đánh giá sao trong WooCommerce.global $product;: Lấy thông tin sản phẩm hiện tại.get_rating_counts(): Hàm này lấy số lượng đánh giá cho sản phẩm.wc_get_star_rating_html($rating, $count): Hàm này hiển thị đánh giá sao theo xếp hạng của WooCommerce.
Cập nhật mã code ngày 12/04/2024
Phiên bản cập nhật ngày 12/04/2024 giữ nguyên cách hoạt động nhưng cải thiện hiệu suất và tối ưu cú pháp.
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 . ' đánh giá)</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;
}
🔹 Cải thiện: Code ngắn gọn, tối ưu cho phiên bản WooCommerce mới.
Cập nhật mã code ngày 09/02/2025
Trong bản cập nhật mới nhất năm 2025, mã code đã được cải thiện để hiển thị rõ ràng hơn khi sản phẩm chưa có đánh giá.
add_filter('woocommerce_product_get_rating_html', 'loop_product_get_rating_html', 100, 3);
function loop_product_get_rating_html($html, $rating, $count) {
global $product;
$rating_cnt = array_sum($product->get_rating_counts());
if ($rating_cnt == 0) {
$count_html = '<div class="count-rating">(0 đánh giá)</div>';
$html = '<div class="container-rating"><div class="star-rating">';
$html .= wc_get_star_rating_html(0, 0);
$html .= '</div>' . $count_html . '</div>';
} else {
$count_html = '<div class="count-rating">(' . $rating_cnt . ' đánh giá)</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;
}
🆕 Điểm mới trong bản cập nhật này:
- Hiển thị rõ khi không có đánh giá: Nếu sản phẩm chưa có đánh giá, sẽ hiển thị
(0 đánh giá)thay vì không có thông tin gì. - Tối ưu hiệu suất: Giảm số lần gọi hàm không cần thiết.
CSS để tùy chỉnh giao diện hiển thị đánh giá
Sau khi thêm mã PHP, bạn có thể sử dụng đoạn CSS sau để đảm bảo hiển thị đẹp mắt hơn.
/* Tùy chỉnh đánh giá sao */
.count-rating {
margin-top: 7px;
font-size: 14px;
color: #777;
}
.container-rating {
display: flex;
align-items: center;
}
.star-rating {
margin-right: 5px;
}
Câu hỏi thường gặp
Làm sao để thêm đoạn code này vào website WordPress?
Bạn có thể thêm mã PHP vào file functions.php của theme con hoặc sử dụng plugin như Code Snippets.
Đoạn code này có ảnh hưởng đến hiệu suất website không?
Không đáng kể, vì nó chỉ lấy số lượng đánh giá khi cần thiết mà không thực hiện truy vấn phức tạp.
Tôi có thể hiển thị số lượng đánh giá ở trang chi tiết sản phẩm không?
Mặc định đoạn code trên chỉ hiển thị trong danh sách sản phẩm. Nếu muốn hiển thị trong trang chi tiết, hãy loại bỏ điều kiện !is_product().
WooCommerce có hỗ trợ hiển thị số lượng đánh giá mặc định không?
WooCommerce hiển thị đánh giá sao, nhưng không hiển thị số lượng đánh giá ngay trong danh sách sản phẩm. Đoạn code này giúp bổ sung tính năng đó.
Nếu tôi không muốn hiển thị (0 đánh giá), tôi nên làm gì?
Bạn có thể chỉnh sửa mã PHP và loại bỏ phần hiển thị khi rating_cnt == 0.
Kết luận
Việc hiển thị số lượng đánh giá sao trong WooCommerce giúp tăng độ tin cậy và cải thiện trải nghiệm người dùng. Với đoạn mã trên, bạn có thể dễ dàng tùy chỉnh WooCommerce để hiển thị số lượng đánh giá sản phẩm. Hy vọng hướng dẫn này hữu ích cho bạn! 🚀
