Quick Guide to Set Up WooCommerce related products

January 28, 2023

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 using WooCommerce related products is the perfect way to achieve this.

The idea itself is simple, really. WooCommerce related products let you suggest new products to the buyer based on the products that they're looking at right now (or have looked at recently) - or the products that they have in the cart.

In this post, we're going to explain why you should display related products to your customers, and how to set up WooCommerce related products.

We'll also explain why the default way in which WooCommerce handles related products isn't the most effective and how you can grow your conversions by using a couple of extra tools that put a spotlight on your WooCommerce product recommendations - plus make interacting with the checkout easier to do for the average customer.

Increase your conversions and average order value with a beautiful popup cart and checkout.

A couple of paragraphs above, I said that there's hardly any better way to increase your average order value than by using WooCommerce related products. I really meant that!

Customizing your checkout process and cart structure can have a significant impact on your conversions. Data shows that improving your overall checkout design can result in a 35.26% increase in conversion rate. Moreover, it just so happens that related product listings are among the most effective assets you can use when customizing your checkout. Customers who click on related products have a 5.5x higher conversion rate than those who do not (data says).

The conclusion is simple - people love recommendations, and especially if those related products are personalized and relate to the customer's previously viewed items.

Most importantly, customizing your checkout or cart is a relatively low investment compared to the returns it can give you.

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 is where you can show them all that.
  • Use custom related 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 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 upsells right on the product page and cross-sells 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

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 site. The way upsells, cross-sells, or related products are displayed all depends on the theme (or child theme) your store uses. Some themes ignore related products completely.

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 if you have long product descriptions. As a result, those related products are easy to miss.

Overall, 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.
  • It's easy for customers to miss your related products.
  • Related products cannot be added to 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 plugins will allow you to handle related products in a much better way.

I have 3 specific recommendations on how you can improve WooCommerce related products:

WooCommerce Fast Cart

WooCommerce Fast Cart - 2 layout options: Choose from a side cart of central popup
A fast cart popup containing related products

This WooCommerce cart plugin does a couple of cool things for you. First, it gives you a good-looking popup cart. In short, a popup cart is a simple popup that appears as soon as your customer adds a product to the cart.

Second, you can use WooCommerce Fast Cart to display specific products straight in the popup cart. What's better about this way of handling related products is that the popup cart is much less cluttered than the standard cart page.

WooCommerce Quick View Pro

This plugin lets you display your related products inside a quick view lightbox. This quick-view box gives your customers a much faster way to see a related product since they don't have to visit the product's dedicated page - they get all the details they need in the quick-view lightbox.

💪 If you want to be real pro about this then go ahead and use both plugins together. When they're installed, you have not only nice product recommendations in the cart, but also quick-view links for related products on the product page itself. That way, customers can learn about related products without having to leave the current product page. This is a less distracting approach overall and can result in better conversion and fewer abandoned carts.

woocommerce fast cart quick view pro integration

In this section of our guide, we will show you:

  • How to use the built-in related products functionality in WooCommerce,
  • How to use Fast Cart and Quick View Pro to display them more prominently.

Let's kick things off with WooCommerce:

How to add related products to an existing product in WooCommerce

By default, you can assign related products to any product in your online store catalog.

To start, go to your WordPress dashboard, into WooCommerce → Products and click on a product that you want to set related products for.

Scroll down to the Product Data panel and switch to the Linked Products tab.

linked products in WooCommerce

Here, among the other product attributes, you can set two main types of related products:

  • Upsells: These are products that you'd prefer people buy over the product they're currently viewing - usually, similar products that are more profitable for your bottom line.
  • Cross-sells: These are products that are closely related to the current product and would go nicely together.

To add a related product to any of these sections, just start typing the product's name, or product id, and WooCommerce will quickly show you matching products from the catalog.

Pick related products the correct way

Now, please don't take this lightly. You shouldn't pick related products at random. Think carefully about which products really are a fit with the current one and which ones have the highest likelihood of being purchased.

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. Assign these products as upsells.
  • Think of all the products that will improve the customer's experience with the current product (make it easier or more enjoyable to use). Assign these as cross-sells.
  • List all the products that were commonly bought together with the current product by your past customers. Assign these as cross-sells.
  • List all the products that would make a nice set or bundle with the current one for whatever reason. Assign these as cross-sells.

With that done, simply click on the main Update button to save your changes.

Your upsells and cross-sells should now be displayed on the main product page (upsells) and in the shopping cart (cross-sells; when the customer adds the main product to cart).

Scroll up to this section to see an example of what this usually looks like.

How to display related products in a customized side cart popup

⭐ We're going to use the WooCommerce Fast Cart plugin to achieve this.

Increase your conversions and average order value with a beautiful popup cart and checkout.

If you're not familiar with the plugin, WooCommerce Fast Cart is the easiest way to enable instant access to your store's cart and checkout from any page. It's done via a customizable popup cart. Like this one:

WooCommerce popup cart demo

You can also use WooCommerce Fast Cart to replace the native WooCommerce cart page, checkout page, or both. And - the main feature we're interested in here - you can use it to display related products inside the popup in an attractive way. This will likely increase your conversions and boost sales.

To set up WooCommerce Fast Cart, first go to the plugin's official page and purchase a license. Download the plugin package to your desktop.

Then, follow the standard procedure:

  1. Go to Plugins → Add New and click on Upload Plugin.
  2. Upload the plugin archive to the site.
  3. Click on Activate.
  4. Go to WooCommerce → Settings → Products → Fast Cart and enter your license key.
  5. Click on Save Changes.

Configure WooCommerce Fast Cart

The settings page at WooCommerce → Settings → Products → Fast Cart is where you can configure the plugin to match your needs.

Here are the elements that you can tweak about your popup cart:

WooCommerce Fast Cart Settings

As you can see, apart from other things, you can also pick how the plugin handles your related products.

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 related products assigned to the main product in the cart:

WooCommerce related products: 2 related products in cart

As you can see, they're shown 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

This is just the tip of the iceberg. WooCommerce Fast Cart lets you customize loads of things about the popup cart's appearance. This goes for the individual elements in the popup but also the overall design of the whole thing (via cart templates).

How to display related products in a quick-view lightbox

⭐ We're going to use the WooCommerce Quick View Pro plugin to get this functionality.

The quick and easy way to speed up shopping.

Before we start, let me just explain that WooCommerce Quick View Pro isn't only a solution to spice up your related products, but you can also use it for your store's main product listings. What it does is replace the individual product pages with quick-view lightbox windows.

In other words, with WooCommerce Quick View Pro installed, the customers doesn't have to leave the main listing to view the details of a product that interests them. This shortens their path from seeing a product to potentially adding it to cart.

Here's how the quick view works:

Quick View Pro demo

To set up WooCommerce Quick View Pro, first go to the plugin's official page and purchase a license. Download the plugin package to your desktop.

Then, follow the standard procedure:

  1. Go to Plugins → Add New and click on Upload Plugin.
  2. Upload the plugin archive to the site.
  3. Click on Activate.
  4. Go to WooCommerce → Settings → Products → Quick View and enter your license key.
  5. Click on Save Changes.

Configure WooCommerce Quick View Pro

Go back to WooCommerce → Settings → Products → Quick View.

After entering the license key, you'll see new settings appear on the settings page.

WooCommerce Quick View Pro plugin settings page

Here, you can configure the behavior of the quick-view lightbox plus where you want to have it displayed. You can also pick the elements (product details) that the customer will see.

Since we're configuring this from the perspective of related products, it's a good idea to pick only the elements that make the sale of a given related product more likely.

For example, a whole product gallery might not be necessary. Same for product meta information. But then again, it's best to test this out in practice to see what performs best in your store. WooCommerce Quick View Pro lets you do that easily.

At this stage, with these two plugins installed and configured, your WooCommerce store is fully equipped to serve people a thought through lineup of related products in a way that's good-looking and likely to convert well. Congrats!

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

After all, you - the store owner - have the best knowledge on how your products fit with each other so why not share that knowledge with your customers - through related products.

We're also quite lucky that WooCommerce lets us divide our related products into two groups: upsells and cross-sell products. This allows for more tailor-made recommendations based on the customer's stage along your checkout process.

However, the way WooCommerce handles those related products by default leaves a lot of room for improvement. With that default setup, your related products can still be pretty hidden among all the other elements that are usually on the product pages and in the cart. Using dedicated solutions like WooCommerce Fast Cart and Quick View Pro gives you more control and ensures that no related product goes unnoticed.

Increase your conversions and average order value with a beautiful popup cart and checkout.

If you have any questions about how either of the plugins work or how to craft your strategy with WooCommerce related products, let us know in the comments section below.

Please share your thoughts...

Your email address will not be published.