How to create custom related products in WooCommerce?

What are related products in WooCommerce?

Related products are those recommended along with the item a customer is currently viewing. These items may belong to the same category as the original product or are meant to be an accessory to the main product. Related products give options to customers. They can choose the products from different suggestions and can add or replace them with the main product.

Here’s an example of related products in an e-commerce store.

Benefits of related products

• Upselling and cross-selling of products
• Keep your visitors engaged in your store for more time.
• Giving suggestions to customers will increase the user experience.
• Leaves a positive impact on the customers.
• Can be used to prompt customers to add more to the cart.
• Can increase exposure to other products

Adding custom related products in WooCommerce

WooCommerce by default shows related products in a store. But you do not have much control over them. If you need more control over what products you want to display and how you want to display them, you will need a plugin. 

In this article, we will use the free plugin Related Products for WooCommerce. Below are the major features that can help you in adding custom related products to your WooCommerce store:

• Show related products as a slider
• Set up related products for individual products
• Disable the default WooCommerce related products entirely
• Exclude out of stock products
• Add related products based on categories and tags and exclude products from showing the related products based on category

This step-by-step guide will help you add custom related products to your WooCommerce store.

Step 1: Install Related Products for WooCommerce

• Login to your WordPress dashboard.
• Go to Plugins > Add new.

• Search for ‘Related Products for WooCommerce’ in the plugin directory. You will get the following plugin in the search results.

• Install and Activate the plugin.

Step 2: Configuring Settings

Go to WooCommerce > Related Products.

Here you can configure the related products in your WooCommerce store.

Let’s take a look at the plugin’s settings first.

Choose working mode

There are three options here. Select how you want to set the working mode of the plugin.

1. Custom related products: This is the recommended setting. If you want full customization enable this option.
2. Default related products: Selecting this will enable the default WooCommerce related product settings.
3. Remove related products: If you want to remove the related products section from your site, then enable this option.

Show heading as: You can set the text to display for the related products.

Globally relate products by: You can set the relation criteria here. This means you can set how you want to relate different products. You can select tags or categories or both. Selecting categories will display all products of a particular category as related products. Similarly, selecting tags will display all products on a particular tag. By selecting both all the products belonging to the category and tags of the main product will be displayed.

Order by & Order: You can set the sort order of related products here. You can also set how you want to sort the order by ascending or descending alphabetically.

Number of products to display: This lets you set the number of products to display.

Exclude out of stock products: Enable this option if you want to exclude out-of-stock products.

Slider: You can enable a slider for related products, so there will be a swipe function to view more related products. There are options to set the width of the slider, and the number of products to display in the slider.

WPML: Use original product ID: If you are using translated products in your WooCommerce store then enable this option. Else leave it unchecked.

Override theme’s template: Enable this option to override the theme’s existing template for related products.

Click on Save changes.

Step 3: Adding related products

Now let’s see an example of adding related products in a WooCommerce store.

Navigate to the Plugin Settings.

Let’s choose Custom related products as the working mode.

I’ll keep the title as ‘Related products.’

Let’s add both Category and Tag in the Globally relate products by option.

Let’s keep the sort order by Product title in ascending alphabetical order and the number of products to products to display as 5.

I’ll enable the Slider and Override theme’s template checkbox. Let’s keep the rest as default.

Save the changes.

Go to Products > All Products.

Click View on any product.

Scroll down to the bottom and you will see related products.

Step 4: Setting related products for an individual product

For this demo, let’s add related products for Yardley soap in our store.

Go to Products > All Products.

Let’s select ‘Yardley London English Lavender Luxury Soap’ from the list. 

Click Edit.

Scroll down to Product data meta box.

Select Linked Products tab.

Here you can see Custom related product settings options.

You can set related products based on categories, tags, attributes, and products.

Let’s add some related products.

You can also set categories to exclude in showing related products.

Click on Update.

Click on View Product.

You will be able to see the related products we added. 

Here’s an example that shows the difference between global related products and custom related products

Image 1 shows custom related products and Image 2 shows globally related products.

To sum up:

Adding related products to your product page is an excellent way to increase sales in your store. Using the related products option you can upsell and cross-sell products in your WooCommerce store. You can also show best sellers in WooCommerce to help your customers find out top-selling products in your store. Check out this blog to learn how to show WooCommerce best sellers.

Are you still having doubts about related products? Share your queries below.