WooCommerce
      Back to home
      1. Knowledge Base
      2. Integrations
      3. WooCommerce

      WooCommerce Integration

      TABLE OF CONTENTS

      Introduction

      Feefo allows businesses to seamlessly integrate customer feedback and reviews into their WooCommerce store. This guide provides step-by-step instructions for manually setting up a WooCommerce data source in the Feefo Hub and integrating Feefo review widgets into your WordPress site.

       

      Setting Up WooCommerce Data Source in Feefo

      To connect your WooCommerce store to Feefo, follow these steps:

      Prerequisites

      • Ensure the WooCommerce plugin is installed and activated on your WordPress site.
      • You must have admin-level access to your WordPress site.
      • WooCommerce permalinks should be configured for human-readable URLs.

      Configure Permalinks

      1. Navigate to WordPress
      2. Then click Settings
      3. Select Permalinks

      Set permalinks to either Day and Name or Post Name for better readability.

      Generate API Keys

      1. Click the WooCommerce logo
      2. Then choose Settings
      3. Select the Advanced tab and enable the Legacy API if it’s not already enabled.
      4. Under the REST API section, click Add Key
      5. Fill in the following details:
        • Description : Enter "Feefo" or another memorable name.
        • User : Select an admin user.
        • Permissions : Set to at least Read .
      6. Click Generate API Key to retrieve the consumerKey and consumerSecret.

      Get version number

      1. Within your WordPress admin panel click on WooCommerce.
      2. Then choose Status.
      3. Under System Status you should find your WooComemerce version number.

      Provide Details to Feefo

      Share the following details with Feefo:

      • consumerKey
      • consumerSecret
      • Your WordPress domain (e.g., https://yourdomain.com)
      • WooCommerce version number
      • Preferred frequency of data uploads (This will be daily by default)


      Integrating Feefo Review Widgets

      Feefo offers customisable widgets to display reviews and ratings on your WooCommerce store. Below are the steps to integrate the Slide-out Reviews Tab, Product Stars, and On-page Product Reviews.

      Prerequisites

      • Admin-level access to WordPress.
      • Basic understanding of adding code snippets to your theme files.

      Slide-out Reviews Tab

      The Slide-out Reviews Tab is a floating widget that displays Feefo reviews prominently on your site.

      Copy the following code snippet and replace MERCHANTID with your unique Feefo merchant identifier:

      <script type="text/javascript" src="https://api.feefo.com/api/javascript/MERCHANTID"></script><div id="feefo-service-review-floating-widgetId"></div>


      Add the code snippet to your theme's main header file:

      1. Navigate to Appearance
      2. Click Theme File Editor
      3. Locate the Theme Header (header.php) file under Theme Files.
      4. Paste the code snippet above the </header> tag.
      5. Save changes by clicking Update File.

      The Slide-out Reviews Tab will now appear on your website.

      Product Stars and On-page Product Reviews

      These widgets display product-specific reviews and ratings on individual product pages. 

      Customising your product pages may involve some complexity, but generally, you will need to add the following code snippets to your main product template file. This file is often labeled as single-product.php or content-single-product.php in the theme editor.

      To ensure proper functionality, it is important to include both the Product Stars snippet and the On-page Product Reviews snippet together.

      Product Stars Widget

      Use the following code snippet to display product stars near the "Add to Cart" button:

      <div class="feefo-review-badge-wrapper-product"></div>

      Add this snippet to your product page template file (e.g., single product.php or content-single-product.php).

      On-page Product Reviews Widget

      Use the following code snippet to display detailed product reviews below the product description. This is for your child/basic product, utilising your Product SKU:

      <div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-product-sku="$product->get_sku()"></div>


      This code snippet incorporates a dynamic variable for your product SKU, which may vary based on your specific setup.

      Alternatively, if you're working with a parent SKU, you can utilise the following code:

      This is specifically for parent or grouped products and utilises the Parent SKU:

      <div id="feefo-product-review-widgetId" class="feefo-review-widget-product" data-parent-product-sku="$parent_product->get_sku()"></div>


      Save the changes and test the widgets on your product pages.

       

      Troubleshooting Tips

      If the widgets do not display correctly, ensure that:

      • Your Feefo account is active and properly linked to your WooCommerce store.
      • The MERCHANTID in the code snippets matches your Feefo account.
      • The correct theme files were edited (e.g., header.php, single-product.php).
      • Clear your browser cache and refresh the page to see updates.
      • For legacy versions of WordPress or WooCommerce, consult the official documentation or contact Feefo support for assistance.

       

      Summary

      By following these steps, you can successfully integrate Feefo with your WooCommerce store and enhance your website with trusted customer reviews. For further assistance, reach out to Feefo's support team.