How to Create a Woocommerce Product Rating Overview
Many websites that accept product reviews will have a product rating chart at the top of those reviews, showing you how many people gave a product 5 stars, 4 stars, and so on. You may have seen this on Amazon, for example, like so:
Below, I’ll provide some code that explains exactly how to create something like that. Specifically, we’ll create this:
I’ll provide the PHP code and then the CSS, with a bit of explanation at the bottom.
Just want to get started? You’ll first want to add this code to your Woocommerce single-product.php file. This is usually in your theme’s folder, then in another folder called woocommerce. If it’s not there, you’d need to create it and, of course, you’ll need to have a basic understanding of how creating and modifying a theme works.
<?php
$args = array(
'post_type' => 'product',
'post_id' => get_the_ID(),
'status' => 'approve'
);
$comments = get_comments( $args );
$fives = 0;
$fours = 0;
$threes = 0;
$twos = 0;
$ones = 0;
$total = 0;
foreach ($comments as $c) {
$total++;
$rating_value = get_comment_meta($c->comment_ID, 'rating', true);
if ($rating_value == 5) {
$fives++;
}
if ($rating_value == 4) {
$fours++;
}
if ($rating_value == 3) {
$threes++;
}
if ($rating_value == 2) {
$twos++;
}
if ($rating_value == 1) {
$ones++;
}
}
$total_fives = 0;
$total_fours = 0;
$total_threes = 0;
$total_twos = 0;
$total_ones = 0;
if ($fives > 0) {
$total_fives = ($fives / $total) * 100;
}
if ($fours > 0) {
$total_fours = ($fours / $total) * 100;
}
if ($threes > 0) {
$total_threes = ($threes / $total) * 100;
}
if ($twos > 0) {
$total_twos = ($twos / $total) * 100;
}
if ($ones > 0) {
$total_ones = ($ones / $total) * 100;
}
?>
<div class="rx-flex-grid-50 st-rating-snapshot">
<h3>Rating Snapshot</h3>
<ul>
<li>
<span class="stars-title">5 stars</span>
<span class="stars-graph"><i style="width:<?=$total_fives; ?>%"></i></span>
<span class="stars-count"><?=$fives; ?></span>
</li>
<li>
<span class="stars-title">4 stars</span>
<span class="stars-graph"><i style="width:<?=$total_fours; ?>%"></i></span>
<span class="stars-count"><?=$fours; ?></span>
</li>
<li>
<span class="stars-title">3 stars</span>
<span class="stars-graph"><i style="width:<?=$total_threes; ?>%"></i></span>
<span class="stars-count"><?=$threes; ?></span>
</li>
<li>
<span class="stars-title">2 stars</span>
<span class="stars-graph"><i style="width:<?=$total_twos; ?>%"></i></span>
<span class="stars-count"><?=$twos; ?></span>
</li>
<li>
<span class="stars-title">1 star</span>
<span class="stars-graph"><i style="width:<?=$total_ones; ?>%"></i></span>
<span class="stars-count"><?=$ones; ?></span>
</li>
</ul>
</div>
This CSS should give you something like the appearance of our screenshot way above in this post, but shouldn’t mess with your fonts or other design elements all that much.
.st-rating-snapshot {
padding: 20px 0;
}
.st-rating-snapshot ul {
padding: 0;
margin: 0;
list-style: none;
}
.st-rating-snapshot li {
display: flex;
justify-content: space-between;
}
span.stars-title {
width: 15%;
}
span.stars-graph {
width: 75%;
background: #f5f6f9;
border-radius: 3rem;
overflow: hidden;
}
.stars-graph i {
display: block;
background: #a4d65e;
height: 1.5rem;
}
span.stars-count {
width: 10%;
text-align: center;
}
@media (max-width:767px) {
.rx-reviewbox h3 {
text-align: center;
}
.st-rating-snapshot {
padding: 20px;
}
span.stars-title {
width: 20%;
}
span.stars-graph {
width: 65%;
}
}
For those of you who are interested, here’s a bit more on what the aforementioned PHP side of this code does. Each code snippet has a brief explanation beneath it.
<?php
$args = array(
'post_type' => 'product',
'post_id' => get_the_ID(),
'status' => 'approve'
);
$comments = get_comments( $args );
get_comments() is a WordPress function that does exactly that, it gets comments. WordPress reviews, and the ratings inside of them, are just that – slightly modified WordPress comments.
The $comments variable will hold the array that get_comments() returns.
$fives = 0;
$fours = 0;
$threes = 0;
$twos = 0;
$ones = 0;
$total = 0;
Here we’re just setting up some variables that we’ll use later. Specifically, we’re going to need to know how many of each star type (1, 2, 3, 4 or 5 stars) the product has been given, and then we’ll need to know the total number of ratings that have been given as well.
foreach ($comments as $c) {
$total++;
$rating_value = get_comment_meta($c->comment_ID, 'rating', true);
if ($rating_value == 5) {
$fives++;
}
...
if ($rating_value == 1) {
$ones++;
}
}
This foreach ($comments as $c) statement says, “For each comment that is in our $comments array, give them to us one at a time, each as $c.”
$total++ adds one to our $total variable, it’s a counter.
$rating_value = get_comment_meta($c->comment_ID, 'rating', true); gets the actual 1 – 5 star rating from each individual comment’s meta data in the database.
Then, each of the if statements like if ($rating_value == 5) and the $fives++ just do more counting. “If this comment/review has a 5 star rating, increase the value of $fives++ by one.
$total_fives = 0;
$total_fours = 0;
...
More variables, which we will use to get a percentage of the total ($total) number of ratings that any given rating count might have. For example, if a product has 10 reviews, and 8 of them are 5 star reviews, then 80% are 5 star reviews.
if ($fives > 0) {
$total_fives = ($fives / $total) * 100;
}
...
That is our math. It says, ‘To get our rating percentage ($total_fives), divide the total count of 5 star ratings ($fives by the total number of ratings all together ($total), and then multiply that by 100.”
Everything after that is our HTML.
Questions are welcome in the comments! Customizations requests would be more appropriately asked as a paid project request.
Up Next: How to Absolutely Disable Woocommerce Coming Soon Mode