How to set up WooCommerce related products: 3 easy methods

The Complete Guide to setting up related products in WooCommerce for effective upselling

If you want to increase the average order value in your e-commerce store, then a WooCommerce related product plugin is the perfect way to achieve this.

WooCommerce related products is a simple but effective way to recommend products to your customers. It works by suggesting additional products that are related to the ones the customer is currently viewing, has recently viewed, or added to their cart. This can help increase your sales by encouraging customers to purchase more products from your online store.

In this tutorial, I will tell you:

  • How to set up the basic related products feature which comes with WooCommerce itself, and why there are better ways to do it.
  • How you can sell more by using the bestWooCommerce related product plugins. I'll share two plugins with you: one to display related items above the add to cart button on your product pages; and one to display them in a popup cart. 
  • And finally, I will provide step-by-step instructions on how to add related products using these two WooCommerce plugins.

In the world of e-commerce, customer experience is everything. Offering personalized WooCommerce product recommendations can go a long way in making customers feel valued and engaged with your brand.

There are few better ways to increase your average order value than by using a WooCommerce related product plugin.

Research shows that customers who click on related products have a 5.5x higher conversion rate than those who do not. Isn't that amazing! And to add to that, if customers click on related products then they are more likely to purchase multiple items, also increasing your average order value.

What you can achieve with related products in WooCommerce

In practical terms, you can use the idea of related products to do a couple of things:

  • Make it easier for customers to find additional products that are relevant. A good recommendation is one that's related to what the customer is thinking of buying already and increases the overall value that the customer gets from the whole purchase. For example, whoever's looking at guitar strings will most likely also be interested in guitar picks and maybe also capos, slides, straps, and other accessories. WooCommerce related products are where you can show them all that.
  • Use WooCommerce recommended products to upsell product variations or customizations. This is in the realm of "things that not all customers think of out the gate". For example, for a business that sells hand-made jewelry, offering a custom engraving service/upsell can be a great way to increase the average order value.
  • Encourage customers to buy more expensive products or special versions of the current product. This type of related product is more about showing people some options that they might not have considered on their own.

Honestly, this is just the tip of the iceberg. There are no limits when it comes to how you can use WooCommerce related products plugin in your store or the kinds of products you can showcase. Speaking of showcasing related products.......

How related products are shown by default

WooCommerce has some basic functionality for related products built in from the get-go. However, that functionality is a little limited in how it's presented and how it works overall.

First things first, WooCommerce lets you assign two main types of related products: upsells (products related to the current one but more expensive or with higher margins) and cross-sells (products that "are frequently bought together").

WooCommerce displays upsell products right on the front-end product page and cross-sell products in the shopping cart (similarly to how Amazon does this).

Here's what upsells look like in default WooCommerce:

WooCommerce related products: upsells on a page

And here's what cross-sells look like by default in the shopping cart:

WooCommerce related products: cross-sells in cart

You can enable both of these on the 'Edit Product' screen. Just go to the 'Product Data' part of the page and open the 'Cross-Sells' tab.

Apart from these, WooCommerce will also show a small related products section automatically on each product page. Those are lined up based on the product category or product tags they share with the currently viewed item. You'll usually find those listings at the very bottom of the product page or you can add them via shortcode.

The downside of how WooCommerce displays related products

Now, even though I'm showing you examples here, this doesn't mean that it's all going to work the same on your WordPress website. The way upsells, cross-sells, or related products are displayed all depends on the theme (or child theme) your WooCommerce store uses. Some templates ignore related products completely and don't display them.

However, even for themes that do display them, they typically appear quite low down on the single product page or in the cart. This can be problematic for store owners with long product descriptions. As a result, those related products are easy to miss.

The most common issues with the default way of displaying related products in WooCommerce are:

  • Related products are buried on the product pages or in the shopping cart.
  • Not all themes support the native way of handling WooCommerce related products settings.
  • It's easy for customers to miss your related products.
  • Related products cannot be added to the cart quickly.
  • There's no way to customize the presentation of your related product listings.

How to solve all this? You've guessed it; plugins! The right lineup of WooCommerce extensions will allow you to handle related products in a much better way.

Next, I will share two recommendations on the best WooCommerce related products plugins which are much more effective than the built-in upsells and cross-sells.

WooCommerce related products add-ons

Look at the smartphone product in the screenshot above. Can you see how incredibly prominent the related products are?

That's right - instead of displaying WooCommerce related products at the bottom of the page, they've given pride of place above the add to cart button. The customer is taken on a carefully planned journey which prompts them to make a series of decisions on related products to buy alongside their smartphone. First, they are asked to select a case. Next, they are asked to add accessories. After making their selections, they click a single 'Add to cart' button to add the smartphone and the related products together.

As you can see, presenting related products in this way is significantly more likely to generate sales then hiding them at the end of the page. And you can do it with the WooCommerce Product Options plugin.

This handy plugin lets you add a range of extra add-on options to your products. One of these is the ability to display products from other parts of your store as options. I'll show you how to do that now.

How to display related products above the add to cart button

  1. Install the WooCommerce Product Options plugin on your WordPress site.
  2. Go to Products → Options.
  3. Click 'Add new' to create a new options group for the product that you wish to display related products on.
  4. Select the product. Either select just one product, or if you want to show the same related products on all products in a category, then select the entire category instead.
  5. Click 'Add Option' and choose the 'Products' option type.
  6. Configure and select each specific product that you wish to display, or let the plugin select related products dynamically from a certain category.
WooCommerce select other products as options

When you add the new option, there are lots of other options to customize it as you like. For example, you can choose from a wide range of styles for displaying the related products. These include checkboxes, radio buttons, clickable images, and so on. You can also set them as required fields, or set minimum and maximum quantities. There's even a conditional logic option so that you can show and hide different related products based on the customer's other selections.

Once you've saved your product options group, view the product page. You'll see the related products neatly displayed above the add to cart button. Perfect!

WooCommerce Fast Cart - Display related products in a popup cart

WooCommerce popup cart demo

So far, I've told you how to use the WooCommerce Product Options plugin to display related products above the add to cart button on product pages. That's step 1 of the journey to encouraging customers to buy more. But how can you convince the customers who didn't respond to step 1?

The solution is to display related products in the cart, too. This creates a drip-drip effect, as customers may respond to the second prompt rather than the first.

Now, as we saw earlier, WooCommerce itself does have an upsell feature which displays related products on the cart page. However that's no use because it displays them low down the page where they're easy to miss.

Instead, you can use the WooCommerce Fast Cart to display related products in a popup mini cart.

Why is a mini cart a better way to display related products?

The popup cart replaces the main cart page, which brings many benefits:

  • Prominently displays related productsThe popup cart includes related products in a "You may also like" section. This as appears as a "You may be interested in..." carousel. It's powered by the cross-sells feature which comes with WooCommerce itself, and simply displays the products in a better way that is more likely to convert.
    WooCommerce Fast Cart - 2 layout options: Choose from a side cart of central popup
    A fast cart popup containing related products
  • Easy to review cartYou can either launch the mini cart as soon as customers add items to their cart, or they can click a floating cart icon. Either way, the popup cart provides a quick and easy way for shoppers to review their order, make changes, add related products, and proceed to the checkout page.
  • Fast on-page checkoutWooCommerce Fast Cart doesn't just replace the cart page. It also comes with a fast on-page checkout so that customers can complete their order without ever leaving the current page. This makes a big difference to conversion rates by removing friction and enabling customers to submit their order as quickly as possible.
    WooCommerce one page checkout popup

Step 1. Add cross-sells to your products

As I mentioned above, the related products in WooCommerce Fast Cart use the cross-sell feature which is part of WooCommerce. This means that in order to display related items in the add to cart popup, you need to add some cross-sells.

I recommend doing this manually for each product so that you can choose the most relevant similar products for each one. For example, let's go back to our smartphone example from earlier, where customers were prompted to choose a case and accessories on the product page. In this case, I'd recommend adding the most popular case and accessories as cross-sells to display in the popup cart.

How to add product cross-sells to appear in the WooCommerce cart:
  1. Go to the 'Products' section of your WordPress dashboard, and click on a product that you want to add upsells to.
  2. Scroll down to the 'Product Data' panel and open the Linked Products tab.
  3. Start typing a product name or ID (not SKU) in the 'Cross-sells' field. WooCommerce will display some suggestions for you to click on.
  4. Add as many cross-sell products as you like, and then click Update.
linked products in WooCommerce

Step 2. Set up WooCommerce Fast Cart

Next, it's time to install the WooCommerce Fast Cart plugin and use it to display the cross-sells in a popup cart:

  1. Install WooCommerce Fast Cart and activate the plugin.
  2. In the setup wizard, choose the content that you want to appear in the fast cart. Make sure that you enable WooCommerce related products.
  3. Choose whether or not to enable the popup checkout, and other features like whether to open it automatically when customers add products to their cart.

Here are the elements that you can customize in the popup cart, and where they appear. As you can see, you can include a product image and choose what to include in the product data section:

WooCommerce Fast Cart Settings

What's great about all this is that WooCommerce Fast Cart adapts the appearance and layout of related products based on how many such products are available for the items already in the cart.

For example, here's a case where there are just two WooCommerce related products assigned to the main product in the cart:

WooCommerce related products: 2 related products in cart

As you can see, the plugin displays custom related products straight up under the main buy button. However, if there's a higher number of related products available, WooCommerce Fast Cart will add a slider/carousel feature to show them all:

4 related products in cart

Before we finish, I will give you some bonus tips to help you to choose the right related products for each item in your store. This is important because it makes a huge difference to whether customers buy the extra items. And when shopping online, I see a lot of eCommerce stores get this wrong!

You shouldn't pick related products at random. Think carefully about which products really are a fit with the current one. Also consider which customers are most likely to buy.

A good way to think about this is to consider a couple of types of related products:

  • First, gather the products that are a natural upgrade over the current one - maybe they're of better quality, come from a better-known manufacturer, or are simply more profitable for you.
  • Think of all the products that will improve the customer's experience with the current product (make it easier or more enjoyable to use).
  • List all the products that previously customers have commonly bought together with the current product.
  • List all the products that would make a nice set or bundle with the current one for whatever reason.

Use this to prioritize which related products to display on the product page. Once you've done that, display the top few in the popup cart to give them an extra boost.

Remember to check your related products regularly, as these may benefit from being tweaked over time. For example, if you have a new product then you can boost sales by displaying it for other products in your store.

WooCommerce related products can be a great way of increasing your store's revenue without any additional investments needed. This is a really cost-effective strategy and can be incredibly powerful.

For maximum results, use the following plugins together to make related products super-prominent in your store:

  • Use WooCommerce Product Options to force customers to make an active decision on which related products to buy. The related products appear above the add to cart button, making them impossible to miss rather than an afterthought.
  • Also use WooCommerce Fast Cart to display the most important related products in a popup cart window. This gives you a second change to convince customers to add them to their cart, maximizing your chances of conversion!

Questions about how to craft your strategy with related products for WooCommerce? Let us know in the comments below.

Please share your thoughts...

Your email address will not be published. Required fields are marked *