Blog

2018.11.12

Get WooCommerce customer reviews from all products, display average and all ratings in a histogram without a plugin?

In categories: Tutorials, Website development, Woocommerce, Wordpress

I have just completed developing a new customer review feature for Uniqcube light cubes. The idea was to display customer reviews from all products under each product since all products are basically the same product just with a unique design.

I thought that developing this is going to be a walk in the park and I will be done in no time, but as it turned out, WooCommerce does not allow you to do this that easily and you will have to come up with a custom solution.

In this post I would like to share my experience and show you how it can be done without using any plugins.

Why customer reviews matter?

Before we get to the development, let’s dive a little bit into the reviews themselves. User generated content is a force that should not be underestimated. As a study by Brightlocal has shown – 93% of consumers, prior to making a decision of purchase, read online reviews to find out if the product, business is good or bad.

Displaying other customer reviews will not only increase your sales, but also get you higher SEO rankings.

Google uses reviews as one of the components to determine if the website is real or fake therefore if you have this beautiful user generated content under your belt, search engines will reward you with extra traffic over those who do not have them – how cool is that!

Why would anyone want to display all product reviews under a single product?

If you have a store that sells a variety of different products that are hardly related to one another then displaying all product reviews under each product might be confusing. But if you have a series of products that are basically the same with some slight design or material variations then displaying all reviews on one page could be quite useful.

Also you might like to display information about all reviews on your homepage where your visitors will see average rating of all products thus informing them about the overall quality of the store or products it sells.

How to get customer reviews from all products and display them?

I will repeat myself, but WooCommerce is the best and most popular e-commerce solution. It is an amazing product for starting your online business. All the functions, hooks and filters it provides to customize your shop is spectacular, but there are some things that you will have to create yourself. So let’s get our hands dirty and dive into the development. Here is an example where I have used these functions to output all reviews.

Go ahead and open up your functions.php (located in your current themes folder) and add this function to it.

Now we have a function that allows us to display all product reviews on any page of our theme. You can copy this function and paste it in your single product page for example.

If you are going to replace the default WooCommerce customer review output, you also might want to disable review product tab by adding this peace of code to functions.php file.

How to get all approved review count from across all products?

After displaying all reviews on a single page, I had to output a number of total reviews I have on my shop. Here is a quick function that will allow you to get this number. Add this to your functions.php file.

Now ad this peace of code to the template where you would like to display it.

How to get and display average customer rating of all products?

After that I wanted to display average rating and rating in the form of stars. For this we are going to use multiple functions that have to be added to your functions.php file.

After that add this line where you would like to output the average rating of all products with stars.

How to display all ratings in a histogram in WooCommerce without a plugin?

And the last thing that was missing for me was a histogram of total customer reviews as one that can be seen on Amazon. This is the function that should go into your functions.php file.

And now you can add this function where you would like to showcase the histogram of all customer reviews.

Adding a pinch of CSS

You have now the ability to output all reviews, average review and customer review histogram but in order to make it all look right you will need some bits of CSS code as well. Add these next lines of CSS to your themes style.css file.

The CSS is going to require some additional work on your part to make it aligned with your theme but this will get you going.

Conclusion

Today I have showed you how to get all customer reviews on a single product page. Hopefully it does save you some time and help you get those review improvements ready much faster. Let me know if this helps you or share your code improvements with others below in the comments section.

Nauris Kolāts

Nauris is a freelance designer / developer who loves to dig into the UX as much as in the ground for fishing worms. And fishing is just one amongst the long list of his active lifestyle hobbies.

Other posts

Your thoughts

 

Latest work