The Storefront Reviews extension adds a component to your homepage that allows you to display reviews in a variety of different styles and contexts. There’s also a shortcode enabling you to display reviews on other areas of your store.

Installation

1. Unzip and upload the plugin’s folder to your /wp-content/plugins/ directory.
2. Activate the extension through the ‘Plugins’ menu in WordPress.
3. Assign the Homepage template to a page.
4. Enter the WordPress Customizer and view that page to begin using the plugin.

For more information on installing and managing plugins, see: Managing and Installing Plugins.

There are two components to this extension; the homepage section which is added automatically to pages with the Homepage template assigned, and the shortcode which gives you the flexibility to display reviews anywhere.

The homepage component is added (hooked in to the homepage action with a priority of 90) and will by default display recent reviews automatically.

The configuration of this component is handled via the Customizer, visible when viewing a page that has the Homepage template applied. If you open the Customizer (Appearance > Customize) and view that page, you will find a new section titled ‘Storefront Reviews’.

This is where you control the scope of reviews to display as well as the various design options. We’ll go through each setting individually now:

This settings allows you to change the title displayed above the reviews on the homepage. If you don’t want to display a title, just leave this blank.

This is where you control which reviews to display. By default the most recent reviews posted on your store will display, but you can also enjoy further control with two extra options:

Reviews of a specific product
If you select this option, a new input will appear allowing you to input a product ID. If you do so, the most recent reviews for that product only will be displayed. The easiest way to find a product ID is by hovering over a product on the Products screen of your dashboard.

Specific reviews
If you select this option, a new input will appear allowing you to input a comma separated list of specific review IDs. Doing so will display only those specific reviews on the homepage. To find a specific review ID navigate to the Comments screen in your dashboard. There, hover over the review you wish to display and place your cursor on the ‘Unapprove’ link. Notice the destination URL which if you’re using Chrome will appear in the bottom left hand corner. It will contain a number in the query string after the comment.php reference. That number is the comment ID.

Here you can choose how to display your reviews from three preset layouts. Just click the one you’d like to use.

Review style 1

Review style 2

Review style 3

Displaying the reviewers Gravatar adds credibility to the review. However depending on your stores audience, you might find that not many customers actually have Gravatars. In this case, hiding the Gravatars is probably the best thing to do.

This setting simply governs the maximum number of reviews to display. If you’re displaying specific reviews and have input the ID’s you can ignore this setting.

This setting defines how many columns the reviews are organised into. You can choose a one, two or three column layout.

Enabling the Carousel option will display reviews in a scrollable carousel rather than stacking them.

This setting allows you to change the color of the star rating display across your site.

Aside from the homepage component, you can also use the storefront_reviews shortcode to display reviews anywhere on your site. It offers the same functionality as the homepage component which you can control with the following shortcode attributes:

• ‘title’ – The section title. Leave blank to not display a title
• ‘columns’ – The number of columns reviews are arranged into (1|2|3)
• ‘number’ – The maximum number of reviews to display (int)
• ‘scope’ – The scope of reviews (recent|specific-product|specific-reviews)
  • ‘product_id’ – The product ID when using the specific-product scope
  • ‘review_ids’ – A comma separated list of specific review IDs when using the specific-reviews scope
• ‘layout’ – The review layout (style-1|style-2|style-3)
• ‘carousel’ – Control whether to display the reviews in a carousel (0|1)
• ‘gravatar’ – Control whether to display the Gravatar or not (0|1)

Here’s an example of how you might use the shortcode:

Alternatively you can insert a shortcode using the Storefront Reviews shortcode generator button.

How do I move the homepage component?
If you’d like to re-arrange your homepage content we recommend our own Homepage Control plugin.