This article explains the complete setup of the Related Products for WooCommerce plugin that displays custom-related products based on category, tags, or products for your store.
Overview
Related products for the WooCommerce plugin allow you to display custom-related products on the basis of category/tags/products. Using the plugin, you can do the following.
- Link related products of your choice by category, tags, and other products
- Slider for related products
- Use shortcode [wt-related-products product_id=”xx”]to display related products anywhere on your site
- Inbuilt ability to resolve theme conflict.
- Sort the related products by Product title, Date, Slug name, last modified or random.
- Show the same set of related products for their translated versions as well when using WPML.
- Provision to exclude out-of-stock products from related products.
- Ability to exclude products from specific categories from appearing in related products.
- Provision to import related products using code snippets, for guidance, refer to the article Import related products.
Installation
You can install the plugin from the WordPress plugin directory. You can learn more about the installation procedure by reading the article How to install a free plugin from WordPress.
Check out our plugin setup video to get started.
[eh_optimize_youtube_embed video=”https://youtube.com/embed/KOMx3g-ZMQs” banner=”https://www.webtoffee.com/wp-content/uploads/2022/03/Related-products-for-WooCommerce-Thumbnail.png”]
Getting Started
From the WordPress dashboard, navigate to WooCommerce > Related products.
Custom Related Products Settings
Following is the settings window of the plugin.
- Choose working mode
- Custom related products: Displays related products as per the settings done in this plugin. You will get full customization options. (Recommended).
- Default related products: Works on WooCommerce’s default related products settings with limited customizations.
- Remove related products: Removes the related products section from your site entirely
- Enable related products in cart page – Enable to display the related products on the cart page.
- Show heading as – Insert a text that will appear as a heading for the related products.
- Globally relate products by – Choose to display related products for all products based on category, tag, or both.
You can choose to relate products either by category or tag, or even both. On relating products globally, it will appear on the product page as shown below:
However, you can override this global functionality and assign related products for each product.
Relate products by sub-category
Insert the below-given code snippet into the functions.php of the active theme file to relate products by sub-category.
- Hide related products for categories – The related products recommendation will be hidden for the selected category of products.
- Hide related products for products – The related products recommendation will be hidden for the selected products.
- Order by: Sorts the related products based on selected title, name, date, random order, or on the last modified item.
- Order: Arrange the ‘Order by’ selection in ascending or descending order.
- Use slider – Enable to display related products in a slider. The user can use the arrows within the slider to view the products.
- Number of products to display on slider per page – Use this section to select how many products should be displayed in the slider view of desktop, tablet and mobile view.
- Number of products to display – Enter the maximum number of products to display as related products. Defaulted to 3 which means only 3 products will be displayed as ‘Related Products’ for a particular product. Increase the count to display more related products.
- Slider width – You can adjust or alter the width of the slider by choosing the appropriate value. 100 pixels is the default value.
- Exclude out of stock products – Enable to exclude out-of-stock products from displaying on the related products section.
- WPML: Use original product ID – Enable to display of related products for translated products based on the original product ID. Note: Ensure that each product has a corresponding translated product on your site.
- Override theme’s template – Enable to override the theme’s existing template for related products. If disabled, the above settings may not be reflected in the front end.
Finally, save the settings.
Setup related products individually for each product
Link related products for each product
Follow the steps to link related products for a particular product of your store.
Step 1: Choose a product
- Go to the Product page, choose a particular product and click on Edit. In the example below, choose the product ‘Sticky Notes’ and edit it to add related products.
Step 2: Open the Linked Products tab from product data section.
Here, you get options to link related products on the basis of:
- Category
- Tags
- Products
Link related products by ‘category’
- From Products > Linked Products tab, go to Related categories. Select appropriate categories that will appear as ‘Related Products’ for the chosen product.
- For the product ‘Sticky Notes‘, let’s choose the category ‘Accessories‘.
- Update the product. This will display all products under the category ‘Accessories’ as related products for sticky notes.
Link related products by ‘tags’
- From Products > Linked Products tab, go to Related tags. Select appropriate tags that will appear as ‘Related Products’ for the chosen product.
- For the product ‘Sticky Notes‘, let’s choose the tag ‘stationery‘.
- Update the product. Following is a screenshot of related products by tags.
Link related products by ‘products’
- From Products > Linked Products tab, go to Related products. Select appropriate products that will appear as ‘Related Products’ for the chosen product.
- For the product ‘Sticky Notes‘, let’s choose multiple products.
- Update the product. Following is a screenshot of related products by products.
Exclude categories
- From Products > Linked Products tab, go to Exclude categories. Choose appropriate categories to exclude them from appearing as related products for a product.
- Update the product. The products under the excluded categories will not appear as related products.
How to resolve theme conflict?
- From the plugin settings window, scroll down to the option ‘Override theme’s template‘. Enable the option to override the theme’s template.
- The plugin will display related products based on the plugin settings. Therefore, it resolves all the issues caused by the theme.
Display related products using shortcode
- You can display related products in posts/pages of your choice by using a shortcode
[wt-related-products product_id="xx"] - You can insert the product ID of a product to display it along with related products.
- For example, adding the related product shortcode in a blog will appear as shown below:
Comments (86)
Benjamin
March 15, 2024
Hello, this works great but I ran the latest plugin update and now it is applying the tag to the related products but not the category and we would like it to apply both at the same time. I have checked the options and both category and tag are ticked.
Arjun
April 1, 2024
Hi Benjamin,
Thank you for reaching out. We weren’t able to replicate this issue. Kindly reach out to our support team for further assistance.
Christos
January 30, 2024
Thank you for your great plugin.
Can it show first the same tag products and if the tag products are less of empty, then show the same category products?
Arjun
February 7, 2024
Hi Christos,
Currently, the plugin doesn’t have the feature you mentioned. However, it can display products from both the same tag and the same category by enabling category and tag in the Globally relate products by option. . If there are no products with the same tag, it will showcase products from the same category.
dave
January 29, 2024
hi, is it possible to remove the price from the related products shown ?
Arjun
January 30, 2024
Hi Dave,
Thank you for reaching out. Yes, you can hide the price from related products section by simply adding the below-mentioned code snippet to your themes functions.php file.
https://gist.github.com/webtoffee-git/0aa2a74de3a407c33e44f87ad8170a33
María
November 9, 2023
Hello, I’ve encountered an issue where the slider is only visible on the cart page and not on the product page. I’ve already enabled the override the theme and attempted to use the short code, but the slider is still not appearing on the product page. Your assistance would be greatly appreciated.
Arjun
November 15, 2023
Hi Maria,
Thank you for reaching out. It appears that the issue is related to a theme conflict. Please contact our support team for further assistance.
erdm
September 18, 2023
Hi,
How can i force related products images to show only 1? Please check below as it shows 2 pictures at least which is not good for UI.
https://www.ediantik.com/antika/efemera/kartpostallar/5-adet-postadan-gecmis-yabanci-kartpostallar-siyah-beyaz-1908-tarihli-kartpostal/
Arjun
September 19, 2023
Hi Erdm,
Thank you for reaching out to us. The plugin only displays one image under related products section. It appears that this issue may be due to a conflict with a third-party plugin. To check this out, kindly deactivate all plugins except our plugin and WooCommerce, Also switching the site theme to any of the WordPress default themes (eg: storefront) is recommended. After doing so, please check if the issue persists. If the problem persists, reach out to our support team for additional assistance.
Erdm
September 19, 2023
problem not solved. Opened a ticket, thanks.
David Willis
August 10, 2023
I have just downloaded Related Products for WooCommerce Version 1.4.9
but can only see the slider on the cart page and not on the product page
can you help me with what I am doing wrong many thanks
Arjun
August 14, 2023
Hi David,
Thank you for getting in touch with us. It appears that your themes template is overriding the related products’ recommendation menu. Please try enabling Override theme’s template option inside the plugin settings.
Peter
July 13, 2023
Hello! Is there a way to make the whole image linked with the product url? Not just the title? https://foodmediapro.com/product/seafood-platter-04-s2/ Thanks!
Arjun
July 19, 2023
Hi Peter,
Thank you for getting in touch with us. By default, our plugin enables the entire image as a URL. However, the issue you’ve encountered appears to be related to a conflict with your theme. Please reach out to your theme support to find out the cause of the problem.
Chris
May 22, 2023
Is it possible to link related products through a WebToffee/WooCommerce API, versus having to edit products through the WooCommerce web UI?
Arjun
May 26, 2023
Hi Chris,
Thank you for getting in touch with us. We understand your requirement. But currently, our plugin does not support linking related products through API integration.
Maurizio
April 19, 2023
HI,
congratulations for your plugin which is really very well done.
Lately we are having these 2 problems:
1) does not display the related products of the primary category
2) does not exclude “out of stock” products
we can’t use the override theme template setting because it creates graphical issues and displays only 2 related products
our website is http://www.dacarelli.it if
Arjun
April 24, 2023
Hi Maurizio,
Thank you for getting in touch with us. Based on our understanding, the related products section currently visible on your site is part of your theme and not generated by our plugin. This is why the ‘display related products by primary category’ and ‘exclude out of stock’ functionalities are not available. To override your theme’s related products section, you will need to use the “Override theme’s template” feature. We realize that this may not match your current theme, but it is currently the only solution available to hide your theme’s related products section. We appreciate your cooperation and understanding.
Steve
December 13, 2022
Hi.
I would like to display alternate products only if the given product is out of stock.
[The alternatives are lower margin but any sale is better than no sale 🙂 ]
I’m happy with php snippets but can’t work out how to do this?
Any ideas?
Thanks.
Mike
January 3, 2023
Hi Steve,
We understand your requirement. However, the plugin currently doesn’t offer any such options to achieve that requirement. Thanks for understanding.
Anas
December 8, 2022
Hi, Thanks for the plugin!
I would like to exclude category/tag from showing in related products sitewide not per single product. How do I achieve that? Is there a function snippet I can use for this?
Mike
January 11, 2023
Hello Anas,
We understand your requirement. For that, you will need to remove the category/tag from the Globally relate products by section in the plugin settings page and then have to set custom-related product settings for each product via the product edit page > Linked products section.
Melanie
November 29, 2022
Hello!
I’ve set the plugin to only show products from the same category and used youe code snippet to show only products from the same sub-category, but it keeps showing also products with the same tag, which is not what I want.
Also, the custom heading is not working, it keeps saying ‘related products’.
I’ve set the plugin to override the theme settings. My theme is Betheme.
Thank you!
Mike
January 27, 2023
Hi Melanie,
Thanks for reaching out. We couldn’t replicate the mentioned issue with the code snippet. Can you please raise a support ticket via this link by sharing the screenshots of the plugin settings page and the category hierarchy on your site to have a better understanding?
Michel
October 23, 2022
Hi
I am trying to display related products on every product page in the same order as they were entered in the product settings (which is a very specific order for each product). I have tried every sorting options available in the plug-in settings, but to no avail.
I am using Version 1.4.6
Thank you in advance.
Mike
January 27, 2023
Hi Michel,
Thanks for reaching out. We understand your requirement. However presently the plugin doesn’t offer such kind of sorting in the related products section.
saqib khan
October 11, 2022
Hi, can you please help me with the related product slider layout is not working fine for me on my product pages as a slider. it didn’t come in full width with specified products to show. like I define 3 products on desktop and 1 on mobile in the viewport. but it didn’t come that way. here is a link you can check: https://www.nintods.com/product/high-contrast-crochet-rattle-set/ . Please tell me any solution for it.
Mike
October 12, 2022
Hello there,
Since it is more related to the theme that you are using. Kindly share your active theme file as a zip that would be really helpful to debug the issue. You can zip the theme directory(Child theme too if any) and share via this link.
ecstoreweb
September 6, 2022
Thanks for your great plugin.
I’m using swiper slider setting, is it possible to have slider in autoplay mode?
thanks
Mark
September 22, 2022
Hi,
Sorry to let you down, but currently we do not have that option in the plugin.
Denis
August 5, 2022
Hi If I want the related products shown before the product description, how can I do that?
Mike
August 15, 2022
Hi Denis,
Here is the support thread that you can refer to place the related products right after the product.
Blaise
August 1, 2022
Hi,
Is it possible to have 2 Related Products fields on the same page, one filtered by tags and the other one filtered by categories?
Mike
August 17, 2022
Hi Blaise,
We understand your requirement. However, presently or plugin doesn’t offer any such options to display multiple related product sections. Thanks for understanding.
Krishan
July 28, 2022
I have disabled slider,
I want to show products in 2 column in mobile view.
Currently it is showing 1 column only.
Mike
August 25, 2022
Hi Krishan,
Thanks for reaching out. You can use the “Number of products to display on slider per page” option located on the related products settings page to alter the number of products to be displayed based on the device. Hope this setting will help to achieve your requirement.
saqib khan
June 25, 2022
Hey, Thanks for the great plugin of yours, plugin perfectly works on my product page as a slider on desktop. But on mobile devices, it shows the same no. of products in per view. i want to show 1 product slide in mobile. In plugin js, it is defined as breakpoint to show 1 slide in mobile but it is not working can you help, please.
Here is a link to our product page:
http://test.nintods.com/product/clacking-roller/Mike
July 21, 2022
Hi Saqib,
Thanks for reaching out. We have introduced the feature in the latest version (v1.4.4) of our plugin. Kindly update the plugin to the latest version and check. You can enter the number of products to be shown in the slider per view in the plugin settings page according to your need.
Tasos
June 7, 2022
Hello,
I whould like to exclude specific categories from be related others without edit product one by one.
Is this possible?
Shesna
June 8, 2022
Hi Tasos,
We understand the requirement, but our plugin currently does not support this feature. We have added it to the development backlogs.
Lina
May 11, 2022
Hi,
I have installed your Custom Related Products plugin and instead of 4 products, there is only one product displayed on my website. The image is huge and stretched to fit the page.
Thank you.
Shesna
May 12, 2022
Hi Lina,
We understand your query. As it is a site-specific issue, we request you to contact our technical support team for direct assistance.
Katja
April 3, 2022
Hi,
thank you very much for this excellent plugin. It works perfectly on single product pages and displays related products by the product tag. However, I need the same option on all my posts and pages – to display all related products by the product tag. I know I can do with this shortcode:
[wt-related-products product_id=”xx”]
But I would like to display simply ALL products related by the tag automatically. I’ve tried with this
[wt-related-products] simply vomiting the ID, or with this [wt-related-products product_id=””], but it was not such a good idea.
Could you please help me?
Is there any code /short code to display all products related by tag on posts and pages?
Mike
April 19, 2022
Hi,
We understand the requirement, but our plugin currently does not support this feature. We have added it to the development backlogs.
rifa
March 29, 2022
Excuse me, I want to reduce the size of related products in woocommerce, how do I do that?
Alan
April 8, 2022
We have included an option to alter the related product section width in our next release. Please update the plugin upon release to get this option. Thank you for your patience.
Felix Guevarra
March 20, 2022
Hello,
Is there any chance we can customize the whole HTML returned by the shortcode?
[wt-related-products product_id=”xx”]
I want to recreate the repeated HTML, customize the HTML tags on it (based on the static markup that we have)
Thank you for your help! 🙂
Mike
March 24, 2022
Hi Felix,
We understand your requirement. However, presently our plugin doesn’t offer such options to achieve your requirement. Thanks for understanding.
ruby
March 14, 2022
can we change the width of the slider of related products?
Mark
March 18, 2022
Hi Ruby,
You may please modify and use the below style as per your requirement. Copy the code to your active theme’s CSS(Appearance > Customizer > Additional CSS.
.bx-wrapper{max-width: 300px !important;
}
.bx-viewport{
height: 466.562px !important;
}
.crp-slider li{
width: 295px !important;
}
Roelf Woldring
March 8, 2022
Hi
Using the Related Products plug in with Divi Theme
Trying to take control of which related products show up since they are all books or e-learning courses and I want to ensure that only the ‘right’ related products show up
Got the plug in because I don’t want to turn off related products just control it
However, I can’t seem to get it to work
Read though the comments – and there was a similar post
Your folks asked to upload the theme file
Now sure how to do that if you need me to send it to you
Thanks
Roelf
Mike
March 23, 2022
Hi Roelf,
Thanks for reaching out to us. Kindly share the relevant information via this link so that we can look into it.
Iman
March 8, 2022
hi
When I use code snippet. my site accidentally gives an error
pleas help me
this error :
Fatal error: Uncaught Error: syntax error, unexpected ‘<', expecting end of file
in /home/digimedm/domains/digimedmarket.com/public_html/wp-content/themes/child-theme/functions.php on line 45
Call stack:
require_once()
wp-config.php:181
require_once()
wp-load.php:50
require_once()
wp-blog-header.php:13
require()
index.php:18
Mike
March 23, 2022
Hi Iman,
Thanks for reaching out to us. Kindly copy the code file alone
add_filter('wt_crp_subcategory_only', '__return_true');in your active theme’s functions.php file and check.Jantine
February 18, 2022
We use Related Products for WooCommerce with “Custom related products” and enable the slider. But on the frontt of the product page the plugin shows this code:
jQuery(document).ready(function($) { $(‘.bxslider’).bxSlider({ slideWidth: ‘300’, minSlides: ‘3’, maxSlides: ‘3’, moveSlides:1, slideMargin: 10, startSlide: 0, touchEnabled: ‘1’, auto: ”, }); }); ul.products li.product.first { clear: none !important; } .bx-loading { display: none; } .wt-related-products .crp-slider { display: block !important; }
Also de slider does not work.
See this link https://geurenkleurzeist.nl/product/breipakket-shouderdoek-lang-yarns-linello/ as an example.
How do we fix it?
Mark
March 23, 2022
Hi Jantine,
Sorry that we missed the query. Please submit a ticket via support if you are still having any issues.
lee
February 17, 2022
Thanks for great plugin, was looking for some time to find a wat to sort by date as i imported product data from old to new . I sorted the products, using custome > woocomerce > categories new to old, but the related products where showing old to new.
This plugin fixed that, thanks very much 🙂
Chethan hn
January 19, 2022
add_filter(‘wt_crp_subcategory_only’, ‘__return_true’);
this code not working in subcategory
amir
December 13, 2021
Hi,
i want to have related products in 6 columns, not 4. how can i fix this problem?
Mike
January 7, 2022
Hi Amir,
Kindly use this code snippet to achieve your requirement. Also, we can modify the code snippet according to your need.
amir
January 7, 2022
thank you, but how use this code? where should i past that? my theme is woodmart
Mike
January 7, 2022
Hi Amir,
Thanks for getting back to us and we are sorry for the confusion. Kindly copy that code snippet to your active theme’s functions.php (Appearance>Theme Editor>Functions.php) to achieve your requirement.
amir
January 7, 2022
this code doesn’t worked in my website.
my thme is woodmart and my website address is:
datishome.net
John
October 21, 2021
Hi there, Is it possible to centre the heading?
It would be great if we could also sort by price, most sold or review stars 🙂
Mike
October 31, 2021
Hi John,
Thanks for reaching out. Presently our plugin doesn’t offer such options. However, we will keep your suggestion in our development pipeline and consider it in our future updates. Thanks for understanding.
Thorsten
October 19, 2021
Hello,
can you please add the feature to edit the h2 tags for “product name” and the “related headline”
I dont want to have so many h2 tags on my site, the headline should be a div. Would be nice if you can add this feature. Thanks!
Mike
October 31, 2021
Hi Thorsten,
Kindly use this code snippet to your active theme’s functions.php to change the h2 tag on the related product’s heading to div tag.
Regarding the h2 tag in the product name, unfortunately, we have no control over it and is completely loading from the Woocommerce. However, you can go through this thread and alter the code according to your need to achieve it.
Abdul Rahman Mohammed
October 16, 2021
[wt-related-products product_id=”19″]
i want to share the tag instead of product_id=’xx’, kindly help what quote i can use to replacate the bottom
Mike
October 18, 2021
Hi Abdul,
Sorry to let you down, that option is currently unavailable in the plugin. The shortcode only supports ‘product_id’ attribute. But if you have chosen related tags in the product edit page of the product id mentioned on the shortcode, then it will display the related products based on the tag. Thanks for understanding.
Fahim Ahmed
September 13, 2021
Hi,
This plugin is not working for me, after doing all plugin settings as mentioned in Custom Related Products Settings in this article, the default related products are showing on product pages, nothing is changed,
I am using rehub theme and also using a child theme, please suggest how to fix this.
Thanks.
Mike
September 28, 2021
Hi Fahim,
Thanks for reaching out. Kindly share the theme file (including the child theme) via this link to check the issue.
Ashley
August 23, 2021
Hello!
I am so excited that you have added the Order By feature. When I order by date it seems to be ordering from oldest to newest. Is it possible to order from newest to oldest?
Mark
August 27, 2021
Hi Ashley,
We currently do not have the option to alter it. We will add it to backlogs and consider during further development.
maxi
August 20, 2021
having to edit each product is non-sense. Not usefull for me
Mark
August 24, 2021
Hi Maxi,
From version 1.3.7 onwards, you can set related products by category or tags for products globally from the plugin settings itself. This won’t require you to set up the products individualy.
Eli
August 26, 2021
Hi Mark,
I installed the plugin and want it to show related products by category. For some reason the related products are not showing on any product page. Can you please help?
That’s the setting I saved:
https://ibb.co/TBt2KF0Mark
August 27, 2021
Hi Eli,
Please submit a ticket here with the site URL and share the theme zip file as well.
Fahim Ahmed
September 13, 2021
Hi,
Related products plugin is missing in the “Select Plugin” list.
Mark
September 19, 2021
Hi Fahim,
It is the premium version plugin support forum and hence, the Related Products for Woocomerce plugin won’t be in the list. Feel free to revert in comments if you have any doubts regarding the article.
André
August 13, 2021
Hi there,
I use WP-All-Import to specify all my products. Which fields do I use to import related products? Perhaps it is possible to link “custom related products” tot the related products in WooCommerce. Can you help me with this?
Mark
August 15, 2021
Hi Andre,
Please refer the article here for instructions.
Patricia
August 10, 2021
Hello!
Suddenly products are displayed vertically, not horizontally. How can I do?
If you say “install the previous version”, how can I do it? I have the last one.
Thank you for your help!
Best regards!
Mark
August 12, 2021
Hi Patricia,
We can help with the issue. This is likely a theme-related conflict. Please submit a support ticket here including your theme zip file and site URL.
Rosa Lavieri
July 16, 2021
Hi Haritha, I expected that relating by tag, the plugin takes automatically the product tag and relate the product with the same tags.
ok, it is not automatic, so I try to export a product with related tags with your import/export plugin but it not export the meta key generated by Related Products for WooCommerce Plugin. have you a solution to import tags for the plugin? or automate the relation?
thank you
Mark
July 29, 2021
Hi Rosa,
We have added the option to set related products by tag/category globally in the site in the last update. Please install the latest version and check.