Displaying WooCommerce Related Products is a common practice by all online stores. It ensures a better user experience and increases the average order value. If the visitors see any recommendation while visiting a product it helps them to explore and compare it with the related products.
What are WooCommerce Related Products?
WooCommerce Related Products are the recommended products similar to a product a potential buyer is exploring. These goods are displayed to give the buyers some more options to explore and compare with the current products. For example, if you are viewing a corsair headphone on an online store you will see some recommendations of other headphones. So that, you can view other headphones and compare them with the current headphone you are exploring.
Whenever you go to a store to purchase any products you will experience a similar experience in which the salesman shows multiple options of your desired products. Most of the time they push you to see other options of the type of product you want to buy. And, if you like any product they will push you to buy some subcategorized products related to the product that you are purchasing. For example, if you are purchasing a Smartphone, the salesman will tell you to purchase a screen protector and back cover also.
Nowadays some mobile companies like Apple do not provide power adapters and headphones with the handset. So you also need to purchase them. Then you realized you have spent more money than you are desired to. Like the same way WooCommerce stores also showcase some related products to every Single Product Pages. So why not do the same to keep the buyers for a long time on your online store to increase the number of sales and order value.
What are the Types of WooCommerce Related Products
There are three types of WooCommerce Related Products displayed by the leading online stores.
1. WooCommerce Related Products by Categories and Tags
This is the most common way to display WooCommerce Related Products. If your WooCommerce store is having multiple products under the same categories and tags then these products will be displayed as the related products. All sites using WooCommerce can enjoy this feature by default to all Single Product Pages.
2. Upsell Products
Upsell product showcasing is another popular way to display WooCommerce related products. In this method, online stores usually try to encourage the buyers to buy a higher-end or expensive product. So that, when a potential buyer is viewing a specific product, the most expensive products of the same categories and tags are displayed as related products.
There is a high chance that the visitors click on the higher-end products and end up purchasing any of them instead of purchasing the cheaper option. However, less expensive or discounted products can also be displayed as upsell products. Because cheaper products can also provide higher profit margins. Product discounts are given often for the intention of clearance sale. So, selling them in bulk can also be beneficial by increasing the liquid cash.
3. Cross-Sell Products
Cross-sell is a more specific targeted type of WooCommerce Related Products. In which users will see supplementary items of the item they are considering buying. For example, if the visitor is viewing a Mobile Phone they will also see the Back Cover, Screen Protector for the specific Model of the Phone. So, they can add the required items while adding the mobile to the cart.
This type of Related products method is implemented by most of the popular and Idle eCommerce sites like Amazon. It is very effective to increase the average value of the order. The Cross-Sell Products will not be automatically added by WooCommerce. However, you can manually set it up by linking multiple products. Keep reading the blog post to learn the steps to add WooCommerce Related Products to Single Product Page.
Why Display WooCommerce Related Products in Online Stores?
Before going into the in-depth explanation about how to display WooCommerce Related Products we should know why we should display related products in our WooCommerce store.
As we know that, all high selling stores have experienced and skilled Salesman to keep the selling percentage higher. But for online stores, there are no salesmen or similar type responsible people. Yes, there are some people in the customer support section. But most of the site visitors will not contact the support team. Online shopping doesn’t work like that. The shoppers who like to shop online do not want to talk much.
That is why we need to make our WooCommerce site more organized and optimized. For that, WooCommerce Related Products play a vital role. Here are the main advantages of having Related Products on the WooCommerce site:
User Experience
All market leader Ecommerce companies Like Amazon and Alibaba invest huge amounts to develop a world-class site. Because it’s required to give a good user experience to the visitors to keep them on the site. Because as long as they stay on the site the order percentage keeps increasing. The three types of Related products give the visitors similar types of options they are looking to buy. That’s what the visitors also want to see. Because it is human nature that we like to compare available options before purchasing something.
Order Value
The main goal of any business is to increase revenue. It is also applicable for eCommerce businesses. To increase the revenue of an eCommerce site we need to increase the number of orders or the value of the order. Displaying WooCommerce Related Products is the most effective way to increase the order value.
For example, if someone is looking for a sneaker chances are high that he/she will also get a pair of socks. So, if we can showcase a few types of socks while purchasing the sneaker, most of the time the buyers will also purchase a pair of socks. It is very common human nature that if someone is getting a new sneaker then why not socks. I can not remember any situation when I have purchased new sneakers or shoes and did not get new socks. The salesman of a store also tells us whether we want to take socks or not while taking sneakers or shoes. It’s a kind of selling strategy of the salesman that is successful most of the time.
How to Display WooCommerce Related Products
As I have explained all three types of Related Products now it’s time to guide you to display all types of Related Products in WooCommerce.
1. WooCommerce Related Products by Categories and Tags
It is the basic type of Related Products. If your WooCommerce Products are set to categories and tags then these types of Related Products will be automatically added to single product pages. If not, you need to manually create the required categories and assign all the products to the respective categories.
2. Up-Sell the Products
WooCommerce does not display Upsell products by default. You need to set it up manually. For setting up Up Sell products you need to:
- Go to Product Edit Page
- Click on Linked Products
- Add Desired Products on Upsell tab
That’s all you need to do. The selected products will be displayed on a single product page.
3. Cross-Sell Products
Adding cross-sale products is similar to adding up sales. You just need to:
- Start Editing a product
- Click on Linked Products
- Add Supplementary Items on Cross Sale Tab
That’s all, the selected products will be added as cross-sell products. These products will be visible on the cart page.
How To Display WooCommerce Related Products on Custom Templates
As I have mentioned, you can display all types of WooCommerce Related Products with the free version of the WooCommerce plugin. But what if you want to change the default theme templates of the Single Product pages? It’s ok that you may not like the templates/designs of your WordPress theme. But it shouldn’t stop you from having all the required features of WooCommerce on Custom templates.
With the help of the pro version of the ProductX Gutenberg WooCommerce Blocks plugin, you can create fully customizable single product page templates and showcase all three types of WooCommerce Related Products.
Let’s see how you can do that:
Step-1. Install ProductX Pro
ProductX offers an Exclusive WooCommerce Builder add-on. By using this addon you can create custom templates for the Archive and Single Product Pages.
For using this Addon you need to get the pro version of ProductX. You can get this pro plugin from the WPXPO site. Purchase, Install, and activate the plugin. Don’t forget to install and activate the free version as well. Because the Pro and Free versions of ProductX work together.
Step-2. Turn On Builder Addon
After activating the Pro version of ProductX turn on the builder addon to start using it. Go to the All Builder section of ProductX. Turn on the Builder from the available Addons.
Step-3. Create New Single Product Page Template
After Turning it on, you will see a Builder section. From there click on “Add New Builder”. Give a name and select Builder type as Single Product. Then choose where you want to display the template. For instance, select a specific product for which you want to create a template. At last, Save and Start Editing the Template.
Step-4. Customize the Template
The single product page builder comes with 12 new Product blocks finely crafted for the product page. Create your desired template by using the available product blocks. You can also customize all of these blocks according to your needs.
Step-5. Add Related Product by Categories/Tags
Now comes the main part of this blog post which is adding related products. First of all, decide where you want to add the products. Then click on the plus icon and select any Gutenberg Product Blocks. For example, I am selecting Post Grid 1. Now change the grid name to “Related Products“, “Recommended for you” or anything you want.
After properly posting and editing the block you need to sort the product of the blocks. For that, you need to use the quick query feature of the Query Builder. Sort the products by Related products. There are multiple criteria available for Related query selection. You can choose the criteria of Categories, Tags, or both of the Categories and Tags. So, The Products having the save category and Tag value will be displayed as Related Products.
Step-6. Add Upsell Products
The process of adding products as upsell products is the same as I have discussed previously in this blog post. But in a custom template, you have to do another thing. Add any product blocks like Product Grid-1 to your desired position. Then you can sort the products as Upsell Products by using the quick query feature of the ProductX Query Builder.
So, the products you have added to the linked products section of the product editor will be dynamically added here.
Step-7. Add Cross-Sell Products
With the help of the exclusive builder addon of ProductX, you can also add Cross-Sell Products to a single product page along with the cart page. For that, you need to add a Product Grid block to the custom product page template. Then sort the products as Cross-Sell using the quick query feature of the Query Builder.
Now, let’s see the look of the Cross-Sell Products in the Single Product Page.
That’s all you need to do for displaying all types of WooCommerce Related Products to the Custom Product Page Template created by ProductX.
Benefits of Using ProductX as a companion of WooCommerce
ProductX Gutenberg WooCommerce Blocks is a WooCommerce and Gutenberg-based plugin that works as a companion of WooCommerce. It expands the features of the free version of the WooCommerce Plugin. But the question is why you should consider using this when you have many other options in the Plugin directory of WordPress?
The answer is simple: ProductX is an all-in-one solution for creating a fully customized WooCommerce site. All required features for any kind of WooCommerce store are covered by this plugin. If not, the feature is in Production and soon the missing feature will also be available.
Here are the main attractive features of the ProductX plugin:
Starter Packs: ProductX offers multiple types of Premademade templates for different types of WooCommerce stores. So, you can import this to create a custom home page if you’re online to get started. Later, you can customize each section of the starter packs according to your need.
Product Blocks: There are numerous Gutenberg Product Blocks available. You can create your home, archive, or product pages with the combination of these blocks. There are two types of layouts available of these blocks one is grid view and another one is a slide view. Not only that, but the blocks are also highly customizable and optimized for increasing conversion rates.
WooCommerce Builder: ProductX has newly introduced an Exclusive WooCommerce Builder addon. It allows creating custom templates for Archive, Shop, and Single Product Pages to replace the default template of the theme you are using.
Product Comparison: Product Comparison Addon is a must-have feature for all WooCommerce stores. It lets the user compare similar types of products to find out the best option. There are two types of comparison available one is redirecting to the compare page and another one is a pop-up comparison.
Product Wishlist: Product Wishlist is another interesting addon of ProductX. With that addon, you can let the visitors add their desired products to WishList before adding them to the cart. Later, they can add the products to the cart if they want to buy them.
Product Filter: ProductX comes with an Ajax-powered product filtering feature and it is available for all product blocks. You can let the user filter products by specific or multiple categories and tags without reloading the whole page.
Query Builder: The Query Builder of ProductX is used for product sorting with different queries. You can sort products of any blocks by category and tags. But the main attraction of the query builder is the quick query. With this feature, you can sort posts by Most Popular, Most Commented, Related, Upsells, and Cross-sell, etc.
Frequenty Asked Questions
How do I display related products in WooCommerce?
The WooCommerce Related Products by Category and Tags are automatically displayed. But you need to manually set up the Up-Sells and Cross-Sells Products. For that, click Linked Products and add desired products to the Up-Sells and Cross-Sells section while editing a Product Page in WooCommerce.
How do I turn off related products in WooCommerce?
If you are a developer you can easily remove the Related Products by adding the below codes to the functions.php file of your child theme.
/**
* Remove related products output
*/
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
You are a beginner? don’t worry, use the ProductX plugin to create a custom single product page template and don’t include the Related Products while creating it. That’s all.
How do I increase related products in WooCommerce?
You need to insert the below code the functions.php file of your child theme and the default post per page from 4 to 6 or anything else.
/**
* Change number of related products output
*/
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;
}
This method will not work for all themes because of the coding difference. For a complete solution, you can create a custom template using the Builder Addon of ProductX and add as many related products as you want.
What is a product recommendation?
Product recommendation is an effective strategy to showcase Upsell Products to the customer of an online store. It is a proven strategy to increase the order value. In WooCommerce there is an option to Linked products where you can link upsell products with a single product.
How do I add recommended products to WooCommerce?
According to WooCommerce, Recommended Products refers to Upsell Products. Go to the edit page of a single product and click on the Linked Product option. Add the desired products to the upsell section. That’s all, the selected products will be displayed as Recommended to the Single Product Page you are editing.
What is a WooCommerce grouped product?
Displaying multiple products on a single product page is known as a WooCommerce grouped product. The store owners often showcase supplementary products with the parent (main) product. So that, users can buy all the products as a whole or just buy one or two of the available items.
How do I change-related products text in WooCommerce?
To change the related products text in WooCommerce you need to add a few lines of codes to the functions.php file of your child theme. For example, I want to add change the text from “Related products to” “Similar Products” for that I need to add the below code.
// Change WooCommerce "Related products" text
add_filter('gettext', 'change_rp_text', 10, 3);
add_filter('ngettext', 'change_rp_text', 10, 3);
function change_rp_text($translated, $text, $domain)
{
if ($text === 'Related products' && $domain === 'woocommerce') {
$translated = esc_html__('Similar Products', $domain);
}
return $translated;
}
If you are not comfortable with coding create a custom single product page template using ProductX and give any name while adding Related Products.
What is upsell and cross-sell WooCommerce?
Upsell and Cross-Sell both are the types of WooCommerce Related Products. Upsell is the method of showcasing expensive products related to the product a customer is viewing. Cross-selling is the method of showcasing supplementary products on the cart page related to products a customer has added to the cart. The online store owners use these methods to increase the order value.
How do you sell additional products?
Following are the most effective strategies to sell additional products:-
- Cross-Selling: Display supplementary or required products to cart pages related to the product a customer has added to the cart.
- Groped Product: Showcase Parent (main) product along with supplementary products as a group on the single page.
- Force Selling: Force selling is the most aggressive strategy of selling additional products in which the store owners automatically include the additional product(s) to the cart.
Conclusion
That’s all about WooCommerce Related Products. Now start adding Upselling and Cross-selling products to the single product pages of your WooCommerce store. If you still want to know more about related products and want to give any suggestions or feedback feel free to comment below.
