Display Cross-Sells in Product Pages

This guide shows you how to use WooCommerce Product Recommendations to display category-based cross-sells in product pages. You will learn how to create a Summer Essentials block of recommendations that:

• contains products from the Summer Accessories and Suncare categories; and
• is displayed when the currently viewed product belongs in the Swimwear category.

Plugins/Extensions Used

↑ Back to top

• WooCommerce
• WooCommerce Product Recommendations
• Storefront

Configuration

↑ Back to top

Create a “Summer Essentials” Engine

↑ Back to top

1. Create an Engine
   • Go to WooCommerce > Recommendations > Engines and click Create new.
   • Under Title, enter “Summer Essentials”.
   • Choose the Product Engine Type.
2. Add Filters
   • Locate the Filters section in the Engine Configuration panel.
   • Add a Category Filter.
   • Select in.
   • Add the Summer Accessories and Suncare categories in the last field.
   • Add a Relative Price Filter.
   • Select <= and enter a value. For example, to recommend products priced higher than the currently viewed product, enter 100%. In this example, we entered 50.
3. Add Amplifiers
   • Go to the Amplifiers section.
   • Add a Popularity Amplifier.
   • In the first dropdown, select high to low.
   • In the second one, choose a time interval, for example last 30 days, to favor top-selling products ordered in this period.
   • Add a Rating Amplifier.
   • Select high to low to favor products with higher ratings.
   • Add a Freshness Amplifier.
   • Select new to old to favor newer products.
   Use the +/- buttons to increase/decrease the relative weight of the Amplifiers you just added.
4. Save the Engine Click the Create button to save the Engine you just configured.

Deploy the “Summer Essentials” Engine

↑ Back to top

1. Deploy the EngineClick Deploy in the message that appears after saving the Engine. Alternatively:
   • Navigate to WooCommerce > Recommendations > Locations.
   • Search for and select the “Summer Essentials” Engine.
   • Click the Deploy button.
2. Configure Display Settings
   • In the Title field, enter “Summer Essentials”. This will be displayed above the recommended products.
   • Choose a number of Product columns and Product rows for the product recommendations.
3. Choose LocationSelect the Location where you’d like the recommendations to appear. To display the recommendations right after the add-to-cart button, choose Product > After Add-To-Cart Button.
4. Add Visibility ConditionsTo recommend “Summer Essentials” when viewing products from specific categories, add a Visibility Condition:
   • Go to the Visibility Conditions section.
   • Add a Product Category condition.
   • Select in.
   • Add one or more categories in the last field. In this case, we added the Swimwear category.

   

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 “Summer Essentials” Engine:

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

To edit the Display Settings, Location, or Visibility Conditions:

1. Navigate to WooCommerce > Recommendations > Locations.
2. Go to the Product section.
3. Click the After Add-To-Cart Button tab.
4. Expand the “Summer Essentials” 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 “Summer Essentials” Engine deployment by navigating to WooCommerce > Recommendations > Locations > Overview.

Tips

↑ Back to top

Placement

↑ Back to top

If the currently viewed product is out of stock, Engine deployments in the After Add-To-Cart Button Location will not be displayed.

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!