This guide walks you through the steps needed to test and add the relevant code for the Shopper Approved widgets after going through the Shopper Approved app in WooCommerce.
Survey code
The thank you page survey code will be automatically placed on your site when you enable the survey within the app. The survey will populate on the order confirmation page after a customer checks out.
To verify the survey is working as expected, we recommend placing an order and going through the entire checkout process like a customer would to ensure the survey pops up as expected.
Testing the survey
After placing an order, the survey should pop up. Fill out the survey and submit.
Log in to your Shopper Approved account, navigate to Seller Ratings > Manage Seller Ratings.
You should see your review at the top of the list. It will look similar to this example:
Please reach out to [email protected] if you do not see the survey after you placed an order, do not see the review you left within manage seller ratings, or if your review is not marked as "test" to prevent any issues with your review collection.
The following sections pertain to toggles within the Shopper Approved app:
Seal
After enabling the 'Install the Floating Seal’ toggle and clicking the "Install Seal" button,
the seal will be automatically placed in your site's footer using the wp_footer action hook.
The seal will not be visible until you collect 10 or more store reviews.
Here is what a default seal will look like:
Customizing the seal
Once your seal is displaying properly, you have the option to customize the seal by logging in to your Shopper Approved account and navigating to Seals & Widgets > Manage Seals.
From there, create a new preset and customize the seal to your liking.
Replacing the existing seal code
We recommend having a developer replace the code for you.
To replace the seal code with the existing default code, navigate to the plugin files (Tools > Plugin File Editor). The relevant function to locate from the URL below is update_seal_code and replace the existing seal code snippet.
Important note: After replacing the code, go back to the Shopper Approved app, and turn the "Install the Floating Seal" off and back on to see the changes reflected.
If you want to put the seal in the header, you’ll need to create custom code to do that or if you have a header.php file on your theme then you can add it there. If you are using a 3rd party page builder, then you can go to your header template and add an html block for the seal on the header.
If you do not see the seal after you have collected 10 or more reviews, please reach out to [email protected] for help.
Reviews Page
If you do not already have an existing reviews page (domain.com/reviews), our app has created one for you.
This will also add a shortcode [shopperapproved_reviews] inside the page content.
If you do already have a reviews page, you will want to copy and paste the Review Page Widget Code from within the Shopper Approved app into your existing reviews page.
Here is what a default reviews page looks like:
Customizing the reviews page
If you would like to customize your reviews page, navigate to Seals & Widgets > Reviews Page Widget within your Shopper Approved account.
Create and name your new reviews page preset.
Customize the settings to your liking
Copy the code.
Replace the reviews page code with the existing reviews page shortcode within your WooCommerce app under Pages > "Reviews" page.
Placing a "Reviews" page link on your website
After the reviews page has either been created by us or you have added the code to your existing reviews page, you will want to display a link to the Reviews page so customers can easily find them. We recommend either in the header, footer or both.
Within WooCommerce, go to Appearance > Menus > Select a menu to edit.
Find and select ‘Reviews’ and click “Add to menu” and then “Save Menu”.
Your "Reviews" page link should now be displayed in the menu you selected.
Rotating Widget
The rotating widget will have to be manually placed on your website after you toggle the widget on within the app. You can place the rotating widget anywhere you would like on your home page.
From within your WooCommerce store, navigate to Pages > Home Page > Edit. Note: your home page may have a different name.
Add an HTML block to insert the rotating widget code.
Paste the Widget Code from the app inside the Custom HTML block and Click “Save or Publish”.
Once you collect reviews, you will see the rotating widget on your home page.
Customizing your widget
You can customize the rotating widget by navigating to Seals & Widgets > Rotating Widget within your Shopper Approved account.
Create and name your preset.
Customize the rotating widget to your liking.
Copy and replace the existing rotating widget code under your home page under Pages > Home Page > Edit.
Note: Your Home page may have a different title.
Product reviews on Category pages
The category code will be automatically placed on your website via the toggle in the app. It should show up on your collection pages once you have collected product reviews.
If you do not see product reviews on your collection pages, please reach out to [email protected].
Product reviews on Product Pages
The product page code will be automatically placed on your website via the toggle in the app. Product review count and star rating will appear near the product name.
Product reviews will be displayed lower on your product page.
Until you have collected product reviews, we display your store reviews as a fallback.
Customizing your product widget
If you'd like to customize your product page settings, you can navigate to Setup > Product Page Code and create a new preset. Customize your product page to your liking and then copy the code and replace the existing code within your WooCommerce store.
Replacing the product widget code
We recommend having a developer replace the code.
If you have customized the product widget, you can update the widget code from within the plugin files (Tools -> Plugin File Editor). The relevant function to locate from the URL below is update_product_star_code.
URL: [WORDPRESS_SITE]/wp-admin/plugin-editor.php?file=shopperapproved-reviews/admin/class-shopperapproved-admin-menus.php&plugin=shopperapproved-reviews/shopperapproved.php
Editing Widget CSS
We recommend having a developer update any CSS.
The CSS of all the widgets can be added or updated in this file:
URL: [WORDPRESS_SITE]/wp-admin/plugin-editor.php?file=shopperapproved-reviews/public/css/shopperapproved-public.css&plugin=shopperapproved-reviews/shopperapproved.php
Important note: For the CSS changes to take effect, make sure to clear your browser's cache.
If you need help with your integration, please reach out to [email protected].