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.
Recommending “Summer Essentials”.

Plugins/Extensions Used ↑ Back to top

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 Price Amplifier.
    • Select low to high to favor products with a lower price.
    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.

The "Summer Essentials" Engine
The “Summer Essentials” Engine.

Deploy the “Summer Essentials” Engine

  1. Deploy the Engine

    Click Deploy now in the message that appears after saving the Engine. Altenatively:

    • 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 Location

    Select 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 Conditions

    To 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.

    Deploying the "Summer Essentials" Engine
    Deploying the “Summer Essentials” Engine.
  5. Finalize the Deployment

    Click Deploy to deploy this Engine to the specified Location.

Rule-based recommendation engines like “Summer Essentials” are very helpful for implementing tailored merchandizing strategies, as they give you complete control over the products that will be displayed to your customers. A smarter, set-and-forget cross-selling technique is to use a Bought Together amplifier in combination with a Relative Price filter.

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.
Once you have saved an Engine, it is no longer possible to change its Engine Type.

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.

Editing “Summer Essentials” Engine.
Editing “Summer Essentials” Engine Deployment.

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!

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top