How to Customize WooCommerce Related Products

Customizing your website for better conversion rates is crucial for your online store’s success and adding upsells and cross-sells to your products can help you achieve that. In this guide, we’ll show you how to customize WooCommerce related products.

Before we look at the different options for doing that, let’s better understand why you should consider adding and editing your related products.

Why Customize Related Products in WooCommerce?

Adding and customizing the WooCommerce products section can be a great way to boost your conversion rates and sales. You can show customers other items they may be interested in, increasing your chances of selling more products.

Apart from increasing revenue, related products also keep your shoppers more engaged with your products and help them find what they are looking for.

This improves their shopping experience, which makes them more likely to buy from you in the future. Additionally, by using cross-sells and upsells smartly, you can create cost-effective deals that benefit both your customers and you.

By default, if you have a related products section enabled, WooCommerce will randomly recommend items based on their tags and categories. This means that if a customer is viewing a product, other items with the same taxonomies will be randomly recommended in the related products section.

To make the most of that section, you should customize the WooCommerce-related products and offer a more tailored experience. In this guide, we’ll show you different ways to edit your related products.

How to Customize the WooCommerce Related Products

There are different ways to edit the related products section:

1. From the WooCommerce dashboard
2. With plugins
3. Programmatically

Let’s have a closer look at each method.

1) Add and Customize Related Products from the WooCommerce Dashboard

WooCommerce lets you add and customize the related products section from the dashboard. You can link products to each other and choose different options for upsells and cross-sells.

1.1) Upsells and Cross-sells

By default, products with the same tags and categories will be displayed as related products. However, you can change this and display specific products using the Linked Products option.

This option lets you customize WooCommerce products for each item individually. Go to Products and press Edit under the product you want to customize the related products.

Then, scroll down to the Product Data section and click on the Linked Products tab. Here, you can type in what products you want to cross-sell or up-sell.

Type in the product name in any of these fields, and they will show up in your related products section. Remember that you can add multiple products to each of these fields.

2) Customize Related Products Using Plugins

While setting up related products using WooCommerce options works well for small stores, it’s not ideal for larger stores.

If you sell many products, managing many tags and categories, and individually adding related products for each item can be time-consuming and ineffective. That is why we highly recommend using a plugin instead.

Using a dedicated tool, you can easily set up your related products section. Additionally, you can add related items to different parts of your website and use shortcodes to make the process straightforward.

Let’s check out some of the most popular plugins you can use to add and customize related products in WooCommerce.

2.1) Related Products for WooCommerce by WebToffee

Related Products by WebToffee is the perfect plugin for easily customizing WooCommerce related products. Not only can you disable the default related products section, but you can also define what products to recommend instead.

On top of that, you can choose what products you want to display as related products using specific tags and categories.

You can also add individual products to your related products section or even exclude them. Additionally, you can exclude entire tags and categories. All in all, Related Products by WebToffee provides an easy way for any WooCommerce user to configure their related products section quickly and with no difficulties.

Key Features

• Provides the option to disable the default WooCommerce-related products.
• Includes the option to add specific products to related products individually, remove out-of-stock products, and display related products by tags/categories.
• Dedicated Related Products slider and the option to exclude taxonomies from the related products section.

Pros

• Let’s you disable the default WooCommerce related products and replace them with fully custom selections by category, tag, attribute, or individual product.
• Exclude specific categories or out-of-stock items from appearing, helping keep recommendations relevant and stocked.
• Built-in slider display, shortcode support, and compatibility with block themes make it flexible for various layouts.
• Multilingual support (for example, with WPML) and import/export compatibility mean it scales for global stores.

Cons

• Some advanced features (such as full recommendation templates and rules) are locked behind the premium version.
• For stores with extensive catalogs or complex dynamic rules, the free version may lack the depth of automation and analytics needed.

2.2) Related Products for WooCommerce

With Related Products for WooCommerce, you can add a customized related products widget to any part of your website. Use a dedicated shortcode to include related products based on the currently viewed or specific products.

This way, you can advertise specific products on different parts of your store to boost your sales.

Additionally, you can customize what products are recommended on the plugin’s widgets. Set everything from the number of related products to the items to display using a flex slider. You can also set a tag or category to be displayed under the related products’ shortcode.

Key Features

• Dedicated shortcode to add customized related products to pages/posts/widget areas.
• Option to display related products using a flex slider.
• Customize various options such as the number of products shown, translate related product text, and more.

Pros

• Let’s refresh the related products section on every page load based on category, tag, or attribute, keeping recommendations dynamic and more engaging.
• Supports display via shortcode, making it easy to insert into posts, pages, or widget areas without coding.
• Allows exclusion of specific taxonomies and supports slider layouts for flexible presentation.
• Easy setup and compatibility with most WooCommerce themes and layouts.

Cons

• The free version has relatively basic features; some advanced display or filter options may require a paid upgrade or custom code.
• In extensive product catalogs, frequent refreshes of related products may impact performance or require caching configuration.

2.3) WPB Related Products Slider for WooCommerce

WPB Related Products Slider is a dedicated plugin that turns your related products section into attractive product sliders. Use an optimized product slider to boost related product sales on any device, whether smartphones, tablets, or desktops.

Choose between two unique themes and customize the plugin’s flat design however you want.

The slider is optimized, and its dynamic design makes it effective when selling related products. Your customers can view and add the products to the cart directly from the slider, too. Additionally, the pro version of the plugin offers more options, including selecting product-specific related products, additional styling options, relative product ordering, and more.

Key features

• Easy to use and set up.
• Dynamic, flat-designed related products slider.
• Flat design product slider with two unique themes to choose from, each customizable.

Pros

• Displays related products in a responsive and customizable slider layout.
• Offers multiple carousel settings, including autoplay, speed, and the number of visible products.
• Compatible with most WooCommerce themes and supports shortcodes for flexible placement.
• Lightweight design that doesn’t slow page load times.

Cons

• Limited design customization options in the free version.
• May require manual styling adjustments for some themes to fit seamlessly.

While all of these plugins work very well, in the following section, we’ll show you how to customize the related products using WebToffee’s Related Products for WooCommerce.

Installing and Setting up Related Products for WooCommerce

Let’s start by installing the plugin on your website. In your dashboard, go to Plugins > Add New and use the search bar on the top right to search for Related Products for WooCommerce by WebToffee. Click Install on the plugin’s tab and then activate it.

Next, open the plugin’s interface by going to WooCommerce > Related Products.

From here, you can disable the WooCommerce default-related products section and customize the plugin’s own related products instead. We will use a custom one which gives us an option to use the plugin to display the related products.

As you can see in the screenshot, you can display related products on the cart page (which helps drive more revenue), make it a slidable widget, choose the number of products to display, and so on.

Go ahead and add a custom heading for your related products in the Heading field, then set the Related By field so your products are displayed using either tags or categories. You can also hide related products for categories and individual products.

You can also choose how your related fields are ordered/sorted using the Order by option. After that, choose whether to hide out-of-stock and backorder products from being displayed as related products.

Once you’re done, click Save Changes, and now your WooCommerce Related Products should be customized and ready to go.

Add Custom Related Products

You can also add custom items to your related products individually. From the Products section, open any of your products and open the Linked Products tab under Product Data.

The plugin adds extra options, such as letting you add products by category and tag, and even excluding specific categories. Use these options to customize your related products section and optimize your upsells and cross-sells.

Adding WooCommerce Related Products using Shortcodes

Additionally, the plugin provides a custom shortcode you can add to your posts/pages to display your custom-related products.

To use this shortcode, open any of your pages/posts and add a Shortcode block to your Editor using the Add Shortcode option.

Then, add this shortcode to the block :

[wt-related-products product_id="xx"]

Make sure you replace XX in the shortcode with the product ID you will use for Related Products. You can find the Product ID under the Product list.

For example, if your product ID is 147, your shortcode will be:

[wt-related-products product_id="147"]

Then save your post and preview it to check if it works correctly.

3) Customize Related Products Programmatically

If you’d rather not use a plugin and have some programming skills, you can customize the related products with a bit of code.

It’s worth noting that this is a more advanced method, so we would recommend using one of the other methods if you’re a beginner user and aren’t comfortable editing WordPress files.

Note: Before you start, create a child theme and make a complete backup of your site so you can recover it if something goes wrong during the process.

Once you’ve done that, open your theme files by going to Appearance > Theme Editor. Then, click on functions.php in the files sidebar on the right.

Here, you can add custom code snippets to this editor to customize your WooCommerce-related products. For the Related products section, you’ll use the ‘woocommerce_output_related_products_args‘ hook.

This hook comes with three parameters that you can use: $related_posts, $product_id and $args.

If you aren’t familiar with hooks and want to learn more about how to use them, have a look at our guide on WooCommerce hooks.

Using the ‘woocommerce_output_related_products_args‘ hook, you can create different functions that you can use. For example, you can use this code that will limit the number of related products to 4 per page, arranged in 2 columns.

/**
* Change the number of related products
*/
function woo_related_products_limit() {
global $product;

$args['posts_per_page'] = 6;
return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );
function jk_related_products_args( $args ) {
$args['posts_per_page'] = 4; // 4 related products
$args['columns'] = 2; // arranged in 2 columns
return $args;
}

Paste this script into your theme file editor and then click Update.

Additionally, you can use this other script to show only related products from a specific product ID:

add_filter('woocommerce_related_products', 'add_related_products');
function add_related_products($related_product_ids)
{
// WC source code stores IDs as string in this array, so I did that too
$related_product_ids[] = 'xx';
return $related_product_ids;
}

Please replace the “XX” with your specific product ID.

Tips to Increase Conversion Using Your WooCommerce Related Products

Once you have your related products section fully set up, you can leverage it to maximize your conversion rates. With a good associated products section, not only can you customize the product recommendations but also structure the content around it for even better results.

For example, you can:

• Create Related Products sections and sliders to promote your best sellers. Add featured products or items that you want your customers to purchase
• Create Posts and Pages to market your featured products: Add your related products to them as a great way to generate more leads
• Add product bundles or items usually bought together to your related products, and specific items can also be a great way to increase your revenue
• Consider adding discounted products to your upsell offers. With up-sells, your related products will be displayed in your cart, and you can customize it to show discounted products instead. This provides more incentive to purchase more items for your customers. For more information on how to customize your checkout, have a look at this guide

Bonus: How to Hide or Remove Related Products in WooCommerce

By now, you should know how to add and customize related products in WooCommerce. But what if you are looking for a quick way to hide your related products instead? We’ve got you covered.

While some businesses can take a lot of advantage of the Related Products section, some of you might not want to have one in your store.

The easiest way to do so is either by using a dedicated plugin or programmatically with a bit of code.

In this section, we’ll show you how to hide related products programmatically. If you want more options, check out our guide on hiding or removing related products in WooCommerce.

To programmatically hide your Related Products, we recommend starting by creating a child theme if you haven’t already. This ensures you’re not messing with your main theme files and that you can revert the changes whenever you want. Additionally, all your file changes won’t be overridden after you update your theme.

Once you have activated your child theme, go to Appearance > Theme Editor and select functions.php on the right Theme Files sidebar. Then press the Editor in the middle.

Next, add the following script to the editor and click Update File.

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Once again, if you’d rather not remove your related products programmatically, you can use a plugin or another method. We highly recommend that you review our guide on hiding WooCommerce-related products.

Frequently Asked Questions

Now, let’s look at some frequently asked questions about this topic.

Conclusion

In summary, editing the related products section can help you improve your customers’ experience and boost your sales.

In this guide, we’ve shown you different ways to customize the WooCommerce related products so you can make the most of them. Now you should be able to:

• Set up and add related products to cross-sell and upsell your shoppers using the default WooCommerce options
• Add and build a unique related products section using plugins
• Add related products to your posts/pages for creative content marketing
• Customize the related products using code

All these options have pros and cons, and there’s no better or worse option. Choose the one that best suits your skills and needs.

Finally, if you’re looking for more ways to improve your online store, you can check out these tutorials:

• How to Customize the Product Page in WooCommerce
• How to repeat orders in WooCommerce
• Edit the WooCommerce Shop Page