Have you been capturing customer reviews on your WooCommerce store but want to display them more effectively? Want to show trust badges that highlight how highly your products and store are rated? Do you just need to build more trust with your potential buyers? Today, we’re going to talk about how to use the customer reviews you’ve been capturing in WooCommerce with “Customer Reviews for WooCommerce” to build your customer trust by displaying reviews and trust badges more effectively throughout your website.
We’re going to look at two things as part of today’s article:
- Improving the display of customer reviews on your product pages; and
- Displaying reviews throughout your website.
Prefer to watch it on video instead?
Examples
As an example, lets have a look at arianrhodaromatics.com.
You can see on this product that they’ve collected a number of reviews.
This is how they look using the standard configuration of Customer Reviews for WooCommerce that we set up in my previous blog post.
It’s not too bad, but we can improve it with a few small changes.
Customer reviews are shown using the standard WooCommerce display, which is sorted based on the oldest first with all of your reviews shown at once, forcing customers to scroll all the way to the end of the list to get to the newest reviews. That can be a long scroll if there’s a lot of reviews.
Customer Reviews for WooCommerce does add this verified review badge automatically.
We don’t have to do anything to set it up, it’s there as part of the default functionality, which is great, but there is more we can do with it.
So, how do we add a graph like this one at the top of the reviews with our breakdown of star ratings?
How do we make our reviews sort by most recent?
How do we add the voting option to allow potential customers to vote on whether a review is helpful or not?
How do we sort by most helpful reviews based on these votes?
How do we display our reviews on other pages?
And how do we show these review trust badges?
Get Ready
Well first off, I’m assuming that you’ve got the “Customer Reviews for WooCommerce” plugin installed on your WooCommerce store already. If not head to my blog post on how to get customer reviews automatically by configuring the “Customer Reviews for WooCommerce” plugin with my recommended settings. Follow those instructions to install it and get it configured, then come back here.
Once you have Customer Reviews for WooCommerce installed and configured correctly, come with me over to your WordPress dashboard and head to the Reviews dropdown.
Go to Settings. This will take you to the main settings screen where we configure the settings I talked about in my previous blog post. Again if you haven’t set this up yet, go to this blog post and do it now.
In this blog post, we are going to look at the Review Extensions settings and the Trust Badge settings.
Review Extensions
Let’s start with Review Extensions because this is the section that is going to most affect the display of our products.
From this screen our first few options are just related to the WooCommerce review form. I’m not going to go into them in this article but have a look because you can configure how that form is displayed in this section if you wish.
Review Shortcodes
Scroll down to the Review Shortcodes section and you will see that we can enable short codes and Gutenberg blocks
Tick that box, that’s really important because that gives us the ability to use the shown shortcodes and their arguments throughout our website to display our reviews.
You can copy and paste all of these review short codes as they are and the arguments that are accepted by them to configure how they look.
So for example on this page, I’m using the Customer Reviews grid shortcode.
There’s a number of arguments available, shown below each shortcode. You can see them all in use in the sample shortcodes that are shown in this section, and you can see an explanation below the shortcode example of what each one does. You can use none or all of the arguments depending on what reviews you want to show and how you want them to look.
I’ve used some of those arguments from that group, but not all of them: [cusrev_reviews_grid shop_reviews=”true” count=”9″ count_shop_reviews=”6″]
That particular shortcode is also available as a block in the WordPress Gutenberg editor so you don’t even need to use the shortcode if you don’t want to.
Display Options
Coming down further are the rest of our display options that we really want to look at.
Review Summary Bar
The review summary bar. If we turn this on, this enables the graph at the top of the reviews showing the breakdown of star ratings.
We really want to turn this option on because this adds that awesome graph at the top of our reviews showing potential customers a quick overview of how the product has been rated by past buyers.
Our website visitors can quickly see a comparison of how many people voted one star versus five stars, and everything in between.
Vote for Reviews
The vote for reviews option lets people upvote and downvote our reviews.
Where it says “was this review helpful to you”, customers can then vote yes or no.
Remove Plugin Branding
The remove plugin branding option will turn off the “Powered by Customer Reviews plugin” text that displays either under the graph, if it’s enabled, or with the reviews if it’s not enabled.
I like to leave this option on because Customer Reviews is providing the plugin for free and why so not support them?
Lazy Load Reviews
Under the lazy load reviews section, if we tick the display reviews with the ‘show more’ button, as the title suggests, this then displays a reduced number of reviews with a show more button.
Clicking the button loads more reviews below the ones already visible. This is great because it doesn’t display every review on the page all at once, potentially making for a very long page if there are a lot of reviews.
Default Quantity of Reviews
When we turn on review lazy loading, it also gives us access to the default quantity of reviews.
I usually leave this set at five because that’s fairly short to look at making it easy to skim over.
Default Sorting Order
Lazy loading reviews also gives us access to the default sorting order which will show the most recent reviews first or we can switch it to the most helpful reviews first.
In either case at the top of the page, customers can always change the sort order to the option that they prefer.
Review Form
The WooCommerce review form is displayed by default, but you can turn it off. Turning it off means that customers can only leave reviews via the Customer Reviews for WooCommerce form after they’ve been sent an invitation.
I usually leave this review form on for customers who opt to leave a review this way instead. When it is enabled, Customer Reviews for WooCommerce does improve the overall appearance by putting the form behind an “Add a review” button at the top of the review list. This is a much nicer look than the default and saves customers scrolling all the way to the end of the page to get to the review form.
Instead, customers can click the button and it just loads the form up straight away.
This is also a way to prevent spam. Disabling the WooCommerce review form means that customers can only leave a review after they have been sent an invitation and therefore it’s almost impossible to get spam reviews coming in.
Save Your Review Extensions
Once you’ve configured these options, click the blue save changes button at the end of the page.
After saving these settings, you can start to use the CusRev shortcodes and Gutenberg blocks around your website.
CusRev Gutenberg Review Block
Let’s say we wanted to display some of our reviews on a page that we’re working on using the Gutenberg editor.
Click the plus (+) icon to add a new block.
Search for reviews.
You’ll see we’ve got our default WooCommerce options here for all reviews, reviews by product, or reviews by category. Then we’ve also got the reviews grid.
Now, this reviews grid is the same grid that we can get using the shortcode that we looked at on the settings screen, so I’m going to add that one.
When it loads up, you’ll see it appear with the default settings over on the right hand side of the editor.
We have a number of options available.
Number of Reviews
Number of reviews is the number of product reviews we want to show. A maximum of 6 can be shown in the reviews grid when we add it via the Gutenberg block.
Number of Shop Reviews
Number of shop reviews is the number of reviews of your store that are shown, if shop reviews are enabled for collection (if you enabled shop reviews in your main Customer Reviews for WooCommerce configuration) and enabled for display (coming up in a couple of sections). A maximum of 3 shop reviews can be shown in the reviews grid when we add it via the Gutenberg block.
It’s really important to note that shop reviews are shown in addition to product reviews, so these two numbers are added together. 6 product reviews plus 3 shop reviews means 9 review cards will be shown in total.
Make sure to configure these numbers so that your grid stays consistent otherwise you’ll get things that look uneven like this:
Show Products
Show products is the little section below the review text with the product name and image in it. Turning this off will hide that section.
Product Links
If products are shown, product links turns the product image and name into a link to the actual product page on your WooCommerce store so visitors can click it and be taken to the product.
Shop Reviews
Do you want to enable the display of shop reviews? That’s what the “number of shop reviews” at the top of the settings is referring to. If you don’t enable the display of shop reviews then that number is ignored altogether.
Inactive Products
Do you want to display reviews for inactive products? In other words, do you want to display reviews for products that are no longer active on your store?
Avatars
Do you want to show customer avatars? That’s the image shown beside the review which will show their Gravatar, for example, if they have one.
Sort By
Next, we can choose how to sort our reviews. The options are either to sort by date or by rating. Date will sort based on the date the reviews were submitted. Rating will sort based on the customer rating given. So for example, you may choose rating if you only want to display 5-star ratings.
Sort Order
Then we can choose our sort order. The reviews grid defaults to a descending sort order but we can also switch it to ascending or random.
Product Categories
Below the main review grid settings we have product categories. If we expand that section. we can choose to only display reviews for specific categories.
You can either scroll through the list of categories to find the ones you want, or use the search box. Once you have found them, tick the box beside the categories to restrict the reviews to just the ticked ones.
Products
In the next section, we can choose specific products to show reviews for.
We do this by either selecting the product, or by searching for it the same way we did for product categories.
Once we select the desired products, the grid will only show us reviews for those specific products.
Colors
There are a number of options available in the colors section that represent different parts of the review grid:
- External border – the border around the outside of the review grid.
- Review card border – the border that’s immediately around each review.
- Background – the background colour for the entire grid. I’ve noted this doesn’t always display depending on your theme.
- Review card background – the background colour for each individual review. the section in the review
- Product area background – that’s the colour for the section of each review where the product image and name are shown, if you have the show products option enabled.
Advanced Options
Then we have advanced options at the end and this lets us insert additional CSS classes that we can use in our theme to adjust the appearance of the review grid. If you don’t know what a CSS class is, you don’t need to worry about this section.
CusRev Shortcodes
All right, so that’s how you configure your Customer Reviews for WooCommerce review grid using the block in the Gutenberg editor but what about if you want to use the shortcode?
What about if you’re using a page builder, for example, like Elementor?
CusRev Reviews Grid
Well, come with me now and I will show you exactly how we would use the shortcodes with Elementor. Shortcodes can, however, also be used in many other places.
So, in Elementor, I’ll use the about page on arianrhodaromatics.com.
That’s this page here where we’ve got this big grid of customer reviews.
To set this up using shortcodes, go into the Elementor pagebuilder for the page or template you want to add reviews to and search for the shortcode element.
Drag the shortcode element into the position where you want to show reviews.
Copy in the most relevant shortcode based on the ones shown in the Customer Reviews for WooCommerce extension settings.
On this page, I’ve used the CusRev Reviews Grid shortcode, [cusrev_reviews_grid] with a couple of arguments that allow me to configure how I want it to look.
I’ve added the shop_reviews=”true” argument to display shop reviews.
Next, I’ve set the count argument to count=”9″ to display 9 product reviews.
Finally, I’ve set count_shop_reviews=”6″ to display 6 shop reviews.
Just as a quick reminder, enabling shop reviews will show 1 review by default, and that number is in addition to the number of product reviews specified in the count argument. So if I had 9 product reviews and 1 shop review, I would have an uneven grid.
That’s all the arguments I’ve specified and that creates this display:
Available Arguments
There are other arguments we can use to perform all the same functions we saw in the Gutenberg block version of the Customer Reviews Grid. Here are all the arguments available for the CusRev Reviews Grid shortcode:
- “count” defines the number of product reviews to show. For performance reasons, it is recommended to keep it between 1 and 9, but you can show more than that if you need to.
- “show_products” can be “true” or “false” and defines if pictures and the names of products should be shown below each review.
- “product_links” can also be “true” or “false” and defines if product names will be linked to the relevant product pages.
- “sort_by” can be set to “date” to sort reviews by date or to “rating” to sort reviews by their rating out of 5.
- “sort” controls how reviews are sorted. Sort can be set to “ASC”, “DESC” or “RAND” to show reviews in an ascending, descending or random order.
- “categories” accepts a comma-separated list of product category IDs to show only reviews corresponding to the categories of products that match the specified IDs.
- “products” accepts a comma-separated list of product IDs to show only reviews corresponding to the specified products.
- “color_ex_brdr” is a hex colour code to be used as the external border around the reviews grid.
- “color_brdr” is a hex colour code to be used as the inner borders shown around individual review cards.
- “color_ex_bcrd” is a hex colour code to be used as the background of the entire grid, outside of individual cards.
- “color_bcrd” is a hex colour code to be used as the background of review cards.
- “color_pr_bcrd” is a hex colour code to be used as the background colour of the product areas inside review cards if show_products is set to true.
- “shop_reviews” can be “true” or “false” and specifies if general shop reviews will be shown in addition to product reviews.
- “count_shop_reviews” defines the total number of shop reviews to show. It is recommended to keep it between 0 and 3 but can be more.
- “inactive_products” can be “true” or “false” and specifies if reviews for unpublished products will be shown.
- “avatars” can be “true” or “false” and defines if reviews will include customer avatars, eg from Gravatar.
So, that’s the basics of how the customer reviews grid Gutenberg block and these short codes work to bring in your reviews from Customer Reviews for WooCommerce and can be used to display them in different places around your website.
You can use the shortcodes anywhere that your WordPress website will allow shortcodes. That includes pages, posts, widgets and page builder templates as well, like the Elementor page that we were just looking at. I’ve also used these shortcodes with Beaver Builder in much the same way.
Trust Badges
Remember that overall review display I showed earlier in the article?
This one:
This badge shows:
- the total number of reviews
- the overall store rating
- the overall product rating
How do you display that?
Well, from your customer reviews for WooCommerce settings, go to the trust badges section.
Trust Badges
This settings section is where we enable or disable the display of the green trust badges that show alongside each individual review that has been collected by Customer Reviews for WooCommerce. Trust badges are enabled by default when Customer Reviews for WooCommerce is activated.
If for some reason you wanted to turn those badges off, you would untick this option.
However, we need trust badges to be enabled in order to display these bigger badges with our overall ratings, so I would recommend leaving this enabled.
Verified Reviews Page
Just below the trust badge setting, you’ll see the verified reviews page field. This is where you can specify a URL path on the CusRev website where all of your reviews are collected and shown.
By default this will be set to your store URL, for example: https://www.cusrev.com/reviews/arianrhodaromatics.com
You can change this if you want to, but I don’t think it is necessary.
Badge Shortcodes
Below the verified reviews page field you’ll see we have a range of review badge examples.
On the Arianrhod Aromatics website, you can see what these look like, pre-filled with:
- total number of reviews
- overall store ratings
- overall product ratings
You’ll see above each of these is a short code that applies to them. Simply copy that shortcode and paste it in anywhere that you want to display these blocks that supports shortcodes.
There are three arguments available for these shortcodes:
- “type” is the badge type. I find it easiest to just copy this directly from the sample badge.
- “border” can be either “yes” or “no” and determines whether to show a border around the badge or not.
- “color” is a hex colour code to be used as the background colour for the badge.
Here is an example of the “small dark badge with store ratings” that has all arguments specified: [cusrev_trustbadge type=”SDP” border=”yes” color=”#3D3D3D”]
So, let’s say I wanted to add this badge to my WordPress website.
I would just select the shortcode on the Trust Badges page for the badge type I want to use and copy it.
I can insert this anywhere that I can use shortcodes in WordPress. Again, this includes pages, posts, widgets and page builders like Elementor or Beaver Builder.
Gutenberg Blocks
So, to add the shortcode to my page in Gutenberg I would first insert a shortcode block and I can then paste my shortcode in.
Elementor
To do this in my page builder, Elementor, I would first add a shortcode element, and then paste in the shortcode.
That’s all that you have to do, just make sure you save your changes when you’re done.
All done!
That’s it! You now know how to take the reviews that you’ve been collecting and display them around your website using the Gutenberg reviews block and shortcodes.
Your reviews can now start to work harder for you to build trust with your customers.
You can show your overall review badges with your total number of ratings and your average rating, both for your store if you’ve enabled store reviews, and for your products. You can stick that on your website anywhere that your theme or your page builder will let you, including using Gutenberg blocks or shortcodes.
I hope you found this article helpful. Make sure to check back the rest of the articles in this series on how to leverage the Customer Reviews for WooCommerce plugin to build customer trust and increase sales on your WooCommerce store.
