Are 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:
- Log into your WordPress site and access the Dashboard as the admin user.
- 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'); }
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.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.
Similar Articles
- How to Get Current Product ID WooCommerce
- How to Customize WooCommerce Product Pages With Elementor Pro
- How to Add Extra Text to Price WooCommerce
- List of 30+ Overall Best WordPress SEO Plugins For Higher Ranking
- How to Get Current Product WooCommerce
- How Many Products Can WooCommerce Handle?
- What is the Best Payment Gateway for WooCommerce
- WooCommerce Different Prices For Different Countries
- How to Add Subcategories WooCommerce
- How to Add WooCommerce Products to a Page
- How to Customize Product Category Page In WooCommerce
- How to Add Google Analytics to WooCommerce
- How to Migrate from Shopify to WooCommerce
- How to Add CAPTCHA WooCommerce Login
- How to Import Products WooCommerce
- How to Add Social Login In WooCommerce Social Login
- How to Export Products In WooCommerce