Home > Docs > WooCommerce Product Recommendations > Generic Steps to Create a Custom Product Recommendation

Generic Steps to Create a Custom Product Recommendation

Last updated on August 22, 2024

In the fast-paced world of e-commerce, providing personalized product recommendations can significantly impact businesses by improving customer engagement and boosting conversions. This article will delve into the potential of generating customized recommendations using WooCommerce Product Recommendations  by WebToffee. This tool provides a wide range of product suggestions and allows for extensive customization.

Below is an example of a product recommendation displayed on a single product page. It includes related products from the same category and appears when the current product matches the related products. The recommendations are sorted based on popularity and are positioned above the product description on the single product page.

WooCommerce product recommendations - Front end
WooCommerce product recommendations – Front end

Step 1 – Select a page to display custom recommendation

To begin with, from the WordPress dashboard, navigate to WooCommerce > Product Recommendations.

  • Click on Create new recommendation.
WooCommerce product recommendations - Home page
WooCommerce product recommendations – Home page
  • Under Select a page, select a page where you would like to display the custom recommendation.
  • Now, Scroll down and click on Create your own product recommendation.
WooCommerce product recommendations - Home page
WooCommerce product recommendations – Home page
  • A new page will open with a wide variety of customization options, including the ability to create a custom recommendation.
WooCommerce product recommendations - Create new recommendation
WooCommerce product recommendations – Create a new recommendation

Step 2 – Set up a title

In the Section title section, enter the text to be presented as the product recommendation section title on the front end.

The title on the front end serves as a headline that captures users’ attention and provides context for the showcased content. Hence, make sure to choose a heading that properly aligns with the products displayed in the recommendation section.

  • For example, consider creating a recommendations section to display Related products, then the title can be given as:
WooCommerce product recommendations - Section Title
WooCommerce product recommendations – Section Title
  • Additionally, the [current_category_name] placeholder can be used to display the category name as a variable element.
  • For example, the title is set as Best Seller in [current_category_name] and the placeholder will vary based on which category page the user is currently on, like:
    • Best Seller in Fashion
    • Best Seller in Electronics
    • Best Seller in Shirts

Placeholders can only be used to represent the category names.

WooCommerce product recommendations - Section Title
WooCommerce product recommendations – Section Title
WooCommerce product recommendations - Section Title
WooCommerce product recommendations – Section Title

Step 3 – Choose What to Display

The next step involves selecting the products to be featured in the recommendation section. When deciding what to show in the product recommendation section, it’s important to find a good mix of relevance, variety, and user experience. Choose the right combination of products to display using the Products to be recommended filter. The available options are:

  • Category
  • Attribute
  • Tag
  • Created in
  • Featured
  • On sale
  • Relative price
  • Rating
  • Recently viewed
  • Current product’s attribute
  • Current product’s category
  • Current product’s tag
  • Recently viewed category
  • Cart product’s category
  • Cart product’s attribute
  • Cart product’s tag
  • Product price

The Products to be recommended section will display relevant options based on the page selected in the Display recommendations on section.

  • Multiple filters can be added to display various combinations of products, as shown below :
WooCommerce product recommendations - Product to be recommended
WooCommerce product recommendations – Product to be recommended
  • To create a recommendation with related products, set the Current product’s category to any. This selection will populate the recommendation section with products from the same category as the currently displayed product.
WooCommerce product recommendations - Product to be recommended
WooCommerce product recommendations – Product to be recommended

Step 4 – Choose when to display

The product recommendation section will become visible only when the configuration set on the Display criteria filter matches with the products(s) displayed on the front end.

The available options in the Display Criteria section will vary based on the selection made in the Display Recommendations section.

  • For the given configuration, the recommendation section will only be visible if the product on the single product page belongs to the Accessories category.
WooCommerce product recommendations - Display criteria
WooCommerce product recommendations – Display criteria

To know more about this feature, refer to the article.

Step 5 – Sort products

The next step is to sort the products displayed on the product recommendation with the help of Sort products by option. The products can be based on :

  • Popularity – (High to low / Low to high)
  • Rating – (High to low / Low to high)
  • Price – (High to low / Low to high)
  • Latest – (Last added product displayed first)
  • Or can be displayed in random

For example, to sort products based on popularity, set Popularity as High to low is chosen.

WooCommerce product recommendations - Sort products by section
WooCommerce product recommendations – Sort products by section

Click on Next to set up the visual preferences.

Step 6 – Setting up visual preference

The final step is to set up the visual preferences, click on the Next button at the bottom of Configure recommendation page to get to the final step.

Visual preferences
Visual preferences
  • From the Position of recommendation section, select an optimal position for the recommendation on the selected page.

Placeholders can only be used to represent the category names.

The available combinations to decide the page and position of the Product recommendation section are :

Page selectedRelevant position on the page
Single product page
  • Below add to cart button
  • Below product meta
  • Above product description
  • Below product description
  • Category page
  • Above products
  • Below products
  • Shop page
  • Above products
  • Below products
  • Cart page
  • Above cart table
  • Below cart table
  • Cart collaterals
  • Below cart totals
  • Below cart
  • Checkout page
  • Above checkout form
  • Below checkout form
  • Order received page
  • Above order details
  • Below order details
  • Checkout page
  • Above checkout form
  • Below checkout form
  • Order received page
  • Above order details
  • Below order details
  • No search result page
  • Below search result
    • Use the WooCommerce Visual Hook Guide given below to find the optimal position for the recommendation section:
    • In the case of showcasing the related products, the suitable position to display the recommendation on the Single product page is above the product description. To do that, select the Above product description in the Position of recommendation section.
    • From the Number of products to show per page section, select the number of products to display on the desktop, tablet, and mobile views. This data will override the configuration in General settings.
    • Select the total number of products to display in the recommendation section from the Total number of products to show section. This data will override the configuration in General settings.

    Finally, click on Create recommendation to create and activate the recommendation.