Offer “Complete The Look” Recommendations in Product Pages

This guide shows you how to use WooCommerce Product Recommendations to add curated Complete the Look product recommendations in product pages.

Plugins/Extensions Used

↑ Back to top

• WooCommerce
• WooCommerce Product Recommendations
• Storefront

Configuration

↑ Back to top

Create a “Complete the Look” Engine

↑ Back to top

1. Create an Engine
   • Go to WooCommerce > Recommendations > Engines and click Create new.
   • Under Title, enter “Complete the Look”.
   • Choose the Product Engine Type.
2. Add Filters
   • Locate the Filters section in the Engine Configuration panel.
   • Add a Current Tag Filter.
   • Select any to recommend products that have any of the tags assigned to the currently viewed product.
   Product tags are descriptive labels you can add to your products. Take a few minutes to understand how product tags work and use them to create curated groups of matching products before you create the “Complete the Look” Engine.
3. Add Amplifiers
   • Go to the Amplifiers section.
   • Add a Conversion Rate Amplifier.
   • Select high to low to recommend products with the highest conversion rate first.
   • Add a Popularity Amplifier.
   • In the first dropdown, select high to low.
   • In the second one, choose a time interval, for example last 7 days, to favor top-selling products ordered in this period.
   • Add a Freshness Amplifier.
   • Select new to old to favor the most recently created products.
   Use the +/- buttons to increase/decrease the relative weight of each Amplifier in relation to others.
4. Save the Engine Click the Create button to save the Engine you just configured.

Deploy the “Complete the Look” Engine

↑ Back to top

1. Deploy the Engine Click Deploy in the message that appears after saving the Engine. Alternatively:
   • Navigate to WooCommerce > Recommendations > Locations.
   • Search for and select the “Complete the Look” Engine.
   • Click the Deploy button.
2. Configure Display Settings
   • In the Title field, enter “Complete the Look”. This will be displayed above the recommended products.
   • Select a number of Product columns and Product rows for the product recommendations. Use the default settings to display a single row of 4 products.
3. Choose Location Select the Location where you’d like the recommendations to appear. To display the recommendations before the product page tabs, choose Product > Before Tabs.
4. Add Visibility Conditions Add Visibility Conditions to display “Complete the Look” recommendations conditionally. For example, you may want to offer them only if the currently viewed product has a specific tag:
   • Go to the Visibility Conditions section.
   • Add a Product tag condition.
   • In the dropdown that appears, select in.
   • Finally, add one or more tags in the last field. In this case, we added the light-brown-formal-look tag.
   This ensures that the recommendations will be displayed only when viewing a product from the light-brown-formal-look tag.

   

5. Finalize the Deployment Click Deploy to deploy this Engine to the specified Location.

Result

↑ Back to top

Making Changes

↑ Back to top

To edit the configuration of the “Complete the Look” Engine:

1. Navigate to WooCommerce > Recommendations > Engines.
2. Locate and Edit the “Complete the Look” Engine.
3. Update the Engine to save your changes.

To edit the Display Settings, Location, or Visibility Conditions of the “Complete the Look” Engine deployment:

1. Navigate to WooCommerce > Recommendations > Locations.
2. Go to the Product section.
3. Click the Before Tabs tab.
4. Expand the “Complete the Look Rated” Engine deployment and make changes as needed.
5. Save your changes.

If you have only deployed a few Engines on your site, you may find it easier to locate and edit the “Complete the Look” Engine deployment by navigating to WooCommerce > Recommendations > Locations > Overview.

Tips

↑ Back to top

Notes on Full Page Caching

↑ Back to top

If your server is configured to serve cached content/pages, certain recommendation engines deployed in catalog/product pages may:

• fail to display dynamic, personalized, or conditional content; or even
• not be rendered at all.

To get these recommendations to display properly for visitors without an active session, you can use an alternative method for rendering recommendations that will bypass your server’s page cache on these pages:

1. Go to WooCommerce > Settings > Recommendations.
2. Locate the Deployments rendering > Use AJAX option and enable it.

Note that enabling this option may introduce a noticeable delay between the time that a page has fully loaded and the time that recommendations become visible to visitors without an active session. This delay will depend on the speed of your server, and the quality of your each visitor’s network connection. If this is an issue, the next option is to completely disable the page caching features enabled on your site/server (not recommended!).

Questions & Support

↑ Back to top

Have a question before you buy? Please fill out this pre-sales form. Already purchased and need assistance? Get in touch with us via the Help Desk!