How to Add Star Rating To WooCommerce Product

Add Star Rating To WooCommerce ProductAre you looking for a quick and easy way to display star ratings in WooCommerce? In today’s tutorial, we will share a simple solution for you to achieve this even without enabling reviews.

WooCommerce, by default, allows you to show star ratings for products with ratings greater than zero. This means that a customer needs to review the product for the ratings to be displayed. From an expert point of view, this messes up the user interface.

WooCommerce does not have a built-in solution for this problem. This is why we are going to use a custom code snippet to achieve this.  This means that you need some technical skills to implement this solution.

Add Star Rating To WooCommerce Product

By the end of this post, you will be able to add star ratings to WooCommerce products. When a product has not yet been rated, empty stars are displayed along with the text “Rate this product”.

On the other hand, when a product has at least one review, the rating is displayed in stars as well as in text. In both cases, if the user clicks the stars, they will be directed to the review section of the product.

It is worth mentioning that this tutorial assumes that you have WooCommerce installed on a WordPress site.

Let us get right into it.

Steps to Add Star Rating To WooCommerce Product

Here are the simple steps you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to add star rating to the WooCommerce product.
 
add_action('woocommerce_after_shop_loop_item_title', 'njengah_woocommerce_template_single_excerpt', 5);
function njengah_woocommerce_template_single_excerpt() {
// The "echo '</a>';" line below MAY BE needed to close the anchor tag (link/href) added for product images
// That way, we can use a different (custom) link for our star ratings and star rating text
// Comment this out if it is not applicable in your case.
echo '</a>';
global $product;
$rating = $product->get_average_rating();
if ( $rating > 0 ) {
$title = sprintf(__( 'Rated %s out of 5:', 'woocommerce' ), $rating);
} else {
$title = 'Rate this product:';
$rating = 0;
}
$rating_html = '</a><a href="' . get_the_permalink() . '#respond"><div class="star-rating ehi-star-rating"><span style="width:' . (( $rating / 5 ) * 100) . '%"></span></div><span style="font-size: 0.857em;"><em><strong>' . $title . '</strong></em></span></a>';
echo $rating_html;
// Now we display the product short description. This is optional.
wc_get_template('single-product/short-description.php');
}
  1. This is the outcome:star rating

Conclusion

That is all you need to do to add a star rating to all the products in your WooCommerce store. This will make it very easy for customers to rate products in your store.

For illustration purposes, we have used the storefront theme. It is important to note that this solution uses custom styles inherited from the theme we are using. This is just a guide for anyone looking to achieve a similar result.

Remember always to use a child theme when making changes in your WooCommerce store. This will ensure that they are not lost during an update.

If you are not familiar with handling code, we recommend using a plugin. You can also contact a qualified developer to create a custom solution for you.

We hope that this tutorial pointed you in the right direction.

Similar Articles