Quick Guide to Set Up WooCommerce related products

February 25, 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 product plugin is the perfect way to achieve this.

The WooCommerce related products plugin feature 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 store.

By displaying a related product section, you can also improve the customer experience by providing them with more options to choose from and making it easier for them to find variable products that match their interests and needs.

Setting up WooCommerce related product plugins in your store is easy, and can be done in just a few steps. In this step-by-step tutorial, we will guide you through the process of enabling and configuring related products in your WooCommerce store, as well as provide some best practices for using this feature effectively.

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 product plugin. 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).

In the world of e-commerce, customer experience is everything. If you're looking to improve your customer experience, offering personalized new product recommendations can go a long way in making your customers feel valued and engaged in your brand.

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 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

Apart from these, WooCommerce will also show a small related type of 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 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 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 settings:

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 a real pro about this then go ahead and use both plugins together. When they're installed, you have not only nice WooCommerce recommended products 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 functionality of the built-in related product 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 WooCommerce 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 the cart).

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

How do I change the number of related products in WooCommerce?

To change the number of related products displayed on a WooCommerce suggested products page, you can follow these steps:

  1. Log in to your WooCommerce dashboard and navigate to WooCommerce→Settings.
  2. Click on the Product tab and then click on the Display sub-tab.
  3. Under the heading "Related Products", you will see a field labeled "Related Products Limit." This is the field where you can change the number of related products that will be displayed on your product pages.
  4. Enter the desired number of related products in the field and click the Save changes button at the button of the page.

After completing these steps, the number of WooCommerce related products displayed on your WooCommerce suggested products pages should be updated according to the number you entered in the "Related Products Limit" field.

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 WooCommerce related products and grouped 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 WooCommerce 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 WooCommerce 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 don'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 the 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 WooCommerce related products in a way that's good-looking and likely to convert well. Congrats!

"Featured Products" is a built-in feature in WooCommerce that allows you to highlight specific products in your store. These products can be displayed prominently on your homepage, category pages, or any other page of your choice.

To set up featured products in your store, follow these steps:

  1. Login to your WordPress website admin panel and go to the Products section.
  2. Select the product that you want to feature and click on the "Edit" button.
  3. In the "Product data section," scroll down to the "Product short description" area and check the "Featured" box.
  4. Save the changes to the product.

To display the featured products on your website, you will need to use widgets or shortcode. The easiest way to do this is to use the built-in "WooCommerce Featured Products" widget.

  1. Go to Appearance > Widgets in your WordPress site dashboard.
  2. Find the "WooCommerce Featured Products" widget and drag it to the desired widget area.
  3. Configure the widget settings to your liking, including the number of products to display, the order in which they appear, and any other options available.
  4. Save the changes to the widget.

If you prefer to use a shortcode, you can use the following code:

[featured_products per_page="4" columns="4"]

This shortcode will display 4 featured products in 4 columns. You can adjust the shortcode parameters to fit your needs.

By featuring specific products in your store, you can draw attention to them and potentially increase sales. Make sure to choose products that are popular, on sale, or otherwise noteworthy.

Further reading: The complete guide to adding and displaying featured products in WooCommerce.Β 

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.

After all, you - the store owner - have the best knowledge of 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 WooCommerce related products can still be pretty hidden among all the other elements that are usually on the product pages and in the cart add-ons. 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 works or how to craft your strategy with related products for WooCommerce, let us know in the comments section below.

Please share your thoughts...

Your email address will not be published.