Home > Docs > WooCommerce Product Recommendations > Customize the Recommendation Section in WooCommerce

Customize the Recommendation Section in WooCommerce

Last updated on June 1, 2023

In the ever-evolving landscape of e-commerce, the recommendation section plays a crucial role in driving customer engagement and increasing sales. This article dives into the realm of customization options available for the recommendation section provided by WebToffee’s WooCommerce Product Recommendations plugin. The plugin allows the following:

  • Customizing the recommendation display layouts.
  • Customizing recommendation section title.
  • Selecting the desired number of products to be showcased in the recommendation section.
  • Hidings the out-of-stock products from the recommendation section.

To get started, from the WordPress dashboard navigate to WooCommerce > Product Recommendations > General settings

WooCommerce product recommendations - Menu position
WooCommerce product recommendations – Menu position

Selecting a Display layout

The initial step in customizing the product recommendation section is selecting a display layout. Choosing the layout is prioritized because the other customization options vary depending on the chosen layout. The Plugin has two inbuilt layouts and they are:

  • Slider
  • Grid

Grid layout

Grid layout provides a structured and organized display, allowing users to view multiple products at once. Once Grid is selected, The configuration options available are:

WooCommerce product recommendations - General settings - Grid selected
WooCommerce product recommendations – General settings – Grid selected

The following page showcases a product recommendation grid layout featuring 8 products. The title is aligned to the left and displayed in red color, while the out-of-stock products are hidden.

WooCommerce product recommendations - Display layout as grid
WooCommerce product recommendations – Display layout as grid

Slider layout

The slider layout offers a dynamic and visually appealing way to showcase products, with a scrolling effect that can draw attention and highlight key items. Once the Slider is selected, The configuration options available are:

WooCommerce product recommendations - General settings - Slider selected
WooCommerce product recommendations – General settings – Slider selected

Enable Loop Slider

  • The visibility of the Enable Loop Slider option is contingent upon the selection of the slider option.
  • Enabling the loop slider feature ensures a seamless browsing experience for customers. With loop sliders, users can continuously scroll through the products without reaching an endpoint. This feature eliminates any interruptions or dead ends, keeping customers engaged and encouraging further exploration.
WooCommerce product recommendations - Display layout as a loop slider
WooCommerce product recommendations – Display layout as a loop slider

The Below displayed image shows a product page with a product recommendation slider with 8 products, where the slider is set to loop continuously. The title of the section is aligned to the left and shown in red color. Also, any out-of-stock products are hidden from view.

WooCommerce product recommendations – Display layout as a slider

Number of products to display

Customizing the number of products shown in the slider allows one to strike the right balance between providing sufficient options and avoid overwhelming customers. This can be achieved by configuring the following features:

Number of products to show per page in slider

  • The visibility of the Number of products to show per page is contingent upon the selection of the slider option within the Display Layout section. This feature is available only when the slider layout is selected.
WooCommerce product recommendations - General settings
WooCommerce product recommendations – General settings
  • The number of products to display can be configured and adjusted for different devices such as desktops, tablets, and mobile devices differently.

Total number of products to show

  • When customizing the product display layout, one crucial aspect to consider is the total number of products to display inside the recommendation section. The plugin allows controlling the number of products displayed to the customers at any given time with the help of Total number of products to show section.
  • For example, by setting a specific number, such as 10, it can create a focused product listing that showcases the most relevant and attractive items.

Title settings

When customizing the product recommendation display layout, the plugin allows adjustment of the title alignment and color. This creates a visually appealing and cohesive design. This can be achieved by configuring the following features:

Title alignment

  • Customizing the title alignment enables to position product titles within the display layout according to the design preferences.
  • Left alignment provides a classic and clean look, while right alignment can create a sense of visual interest. Center alignment, on the other hand, offers a balanced and symmetrical presentation.

Title color

  • Customizing the title color presents an opportunity to enhance brand consistency and improve the readability of product titles.
  • Choosing a contrasting color for the titles can make them stand out against the background, improving visibility and drawing attention.

Hide out-of-stock products

Enabling the Hide Out of Stock Products feature ensures that all out-of-stock products are automatically hidden from the recommendation section. This will help to improve the user experience by displaying only available items for purchase. It avoids frustrating users with false expectations and saves their time by eliminating irrelevant options.