Implementing WP Review Pro with Divi

WP Review Pro with Divi by Elegant Themes

I recently implemented a new review platform on Adult Student Resource Center called WP Review Pro. The platform integrates a customizable product review template into posts. The review displays multiple, customizable rating factors, then calculates them into an overall rating. Then, it allows your users to rate the product, either by selecting one of the stars or writing a review with a star rating in the comments section.

WP Review Pro
WP Review Pro’s content display

 

Set up WP Review Pro on the Divi Theme

I use Elegant Themes Divi Builder on the ASRC site, which is technically not supported by WP Review Pro. However, I was able to get it working with only two minor issues, which we’ll look at in a minute.  Here are the setup instructions to optimize the integration with Divi:

1. WP Review Pro basic setup options

WP Review Pro does not show up in my wp-admin sidebar like other plugins. Instead, to access the settings, I had to go to Settings > WP Admin Pro.

WP Review Pro general settings
WP Review Pro recommended general settings

 

See above for the recommended settings for WP Review Pro.  Below these settings, you can set optional settings regarding the user comments, and then you’ll probably want to set ‘Rating to show’ to author total. Finally, it is recommended to check all the registered image sizes.  Select save changes, then go to the defaults tab.

WP Review Pro recommended default settings
WP Review Pro recommended default settings

Under defaults, go ahead and change review location to ‘Custom (use shortcode).’  We’ll see why in a minute.

Finally, set up the User Ratings – I selected ‘Both’ because I wanted my users to be able to select a star rating OR provide a star rating with a comment review.  Select save changes, and you’re done for now.

2. Create a test post

I recommend creating a test post to make sure that the settings work with your theme, and so that you can return to the WP Review Pro settings to customize the background and text colors of the review module. It helps to have an idea as to what the module looks like first.

Go to Posts > Add New. If you want to use the Divi Builder, go ahead and select that. If not, just start typing the content of your review.

In the Review section (below content if using the standard editor, at the top if using Divi Builder), select the desired review type (star, point, percentage, circle – it is a good idea to stick with one standard for all of your reviews).  This opens up all of the WP Review Pro post options.

WP Review Pro new review
WP Review Pro new review

These settings are important because they can show up in search engine results. It’s a good idea make sure the proper ‘reviewed item schema’ is selected, the product name is accurate and to use the same SEO-friendly text in this description, your meta description (if you are using an SEO plugin) and your excerpt.

WP Review Pro new review more settings
WP Review Pro new review more settings

Next, scroll down to ‘Review item’ and set your review criteria, and your star rating for each. You can set as many of these as you want.  Then, look at the ‘custom location’ box – it should be checked since we set that default option earlier. Below this option is the shortcode you need to copy and paste into your content where ever you want the review module to be.

I did not mess with the remaining options in this section – I’m choosing to standardize the color of my review module through the plugin settings (more on that below).

Next, scroll down to the summary section and type…a summary. This is what your readers are going to see in the review module, and roughly half are going to stop here, so make it good. You want to summarize why you are or are not recommending this product in a quick blurb – see the top of this post for an example.

Finally, under User Reviews, verify the user review style – this should match what you set previously in the plugin settings. I would recommend checking the box next to hide comments total rating as well, so you don’t clutter your review module. This way, the ratings of the users who select a star rating only and the users who include a star rating with their review are combined in the module.

The final step is to type some text into the body of the post, and then preview to see what it looks like.

3. Customize the text and background color of the WP Review Pro module

WP Review Pro styling settings
WP Review Pro styling settings

With your new post and preview windows still open, open another window and go back to your wp-admin panel. Go to Settings > WP Review Pro > Styling. Here, you can adjust the color of the stars (Review Color), font, heading and general background colors and the border color. You can also adjust the size of the box. I suggest adjusting, saving and then refreshing your preview page to see how it looks until you get it right.

So now you know how to create a review. Unfortunately, there were a few issues I encountered with the WP Review Pro plugin working with my Divi theme.

WP Review Pro issues with Divi

Issue #1: Review template invisible on post

When I tested my first review, I used mostly default settings, including the review location set to before content. This caused the module to display mostly invisible, except for the far right of it. The workaround here was already mentioned – set the review location to custom, then simply paste the shortcode into the post where ever you want the module to show.

Issue #2: WP Review Pro comments not displaying

When I did my test post, and then a published post, the comment section was still defaulting to the WordPress comments.

The WP Review Pro comment system use the WordPress comments template – it simply modifies it a bit to add in the stars and its own text. However, if there is another comment system in place also modifying the WordPress comments template, it might be overriding WP Review Pro.  My culprit was Jetpack. In Jetpack > Settings > Discussion, I turned off the option ‘Let readers use WordPress.com, Twitter, Facebook, or Google+ accounts to comment.’

Now, WP Review Pro was taking over the comments on review posts.

Now that I have WP Review Pro working with my Divi theme, I’m excited to start posting interactive reviews!

Disclaimer: this post contains affiliate links

Leave a Reply