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 have a look at the different options to do 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 related products section can be a great way of boosting your conversion rates and boosting your sales. You can show customers other items that they may be interested in and increase 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 recommended to them randomly on 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 select what kind of products are linked with each other and select different options for upsells and cross-sells.

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 allows you to customize WooCommerce related products for each item individually. Simply 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. Simply type in the product name on any of these fields and they will show up on your related products section. Remember that you can add multiple products to each of these fields.

2) Customize related products using plugins

While the process of setting up related products using the WooCommerce options works well for small stores, it’s not ideal for bigger 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.

1) Related Products for WooCommerce by WebToffee

Related Products by WebToffee is the perfect plugin to easily customize WooCommerce related products. Not only can you disable the default related products section but 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 quickly configure their related products section with no difficulties.

Key features

• Provides the option to disable the default WooCommerce related products
• Includes the option to individually add certain products to related products, 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

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 that lets you include related products based on currently viewing 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

3) WPB Related Products Slider for WooCommerce

WPB Related Products Slider is a dedicated plugin designed to turn your related products section into attractive product sliders. Use an optimized product slider that will help you boost related product sales on any device, whether it be smartphones, tablets, or desktops. Choose between two different unique themes and customize the plugin’s flat design as much as 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 comes with more options such as selecting product-specific related products, more styling options, relative products order, and much more.

Key features

• Easy to use and set up
• Dynamic, flat-designed related products slider
• Flat design products slider with 2 unique themes to choose from that you can customize

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.

You can also enable additional options such as hiding out of stock products in the Related Products section as well as enabling the related products slider.

Go ahead and add a custom heading for your related products on the Heading field and then set the Related By field so that your products will be displayed using either tags or categories.

You can also choose how your related fields are ordered/sorted using the Order by option. Similarly, the number of products to display lets you choose how many items you want customers to see in the Related Products section.

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 individually add custom items to your related products. 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 based on categories and tags 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 also provides you with a custom shortcode that 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 the XX in the shortcode with the product ID that you will use for the Related Products. You can find the Products ID under the Product’s 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.

Before you start, make sure you create a child theme and make a full backup of your site to make sure you can recover your site in case 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 on 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 3 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;
}

Remember to replace the “XX” with your respective product ID.

Tips to increase conversion using your WooCommerce Related Products

Once you have your related products section fully set up, you can take full advantage of it to maximize your conversion rates. With a good related 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 specifically advertise 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 on specific items can also be a great way to increase your revenue
• Consider adding discounted products for your upsells. With up-sells, your related products will be displayed on 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 advantages with 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 the related products programmatically but if you want more options, check out our guide on how to hide/remove related products in WooCommerce.

To programmatically hide your Related Products, we recommend you start by creating a child theme if you haven’t done so already. This makes sure that 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, simply 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 instead of removing your related products programmatically, you’d rather use a plugin or another method, we highly recommend you go through our guide on how to hide WooCommerce related products.

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. Simply choose the one that’s most appropriate according to 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