Disable & Remove Related Products in WooCommerce – 5 Ways To Hide Them Quickly

WooCommerce-related products are created with the clear goal of presenting your WooCommerce store visitors to a wider range of your products. WooCommerce displays similar products on your product pages for a reason. But if you don't want them to appear, how do you remove WooCommerce related products or disable them from appearing?

WooCommerce Core also consists of WooCommerce Cross Sell on the Cart Page and WooCommerce Upsells on the Product Page (includes all types of WooCommerce linked products).

In other words, you could be bombarding your loyal customers with other products before they even wanted to make their first purchase from your store at any given time.

You might be wondering how WooCommerce chooses which Related Products to display on the Product Page. WooCommerce Related Products, unlike WooCommerce Cross-Sells and WooCommerce Upsells, cannot be customized, but they can be influenced by grouping similar products together in the same Product Category or using the same Product Tags.

You might believe that your site only organizes WooCommerce-related products by category, but it also considers Product Tags.

It’s no surprise, then, that many merchants, store owners, eCommerce marketers, and WooCommerce developers disable WooCommerce Related Products on the Product Page.

So, here’s how it works…

 

 

When it comes to hiding WooCommerce Related Products, the possibilities are quite a few. Chose the one which is easiest for you to perform.

  1. You can add some code to the functions.php file of a child theme.
  2. Using a plugin, add some code to the main functions.php file so that theme updates don’t override changes.
  3. Use CSS to prevent related products from showing up on the product page.

The first solution requires that you have a Child Theme installed on your site. If you’ve done so before, this should be fairly simple (especially if you set it up). Don’t worry if you forgot to set up your Child Theme.

If you can access the Theme Editor through your WordPress dashboard (Appearance > Theme Editor).

Then find your functions.php file and paste the following code into it to permanently disable WooCommerce Related Products.

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

However, in some cases, you might be wondering, “Why isn’t the WordPress Theme Editor visible to me?” 

Here is the solution:

You can go ahead and make some changes to the wp-config.php file by finding the line (‘DISALLOW FILE EDIT’, true) and replacing the word ‘true’ with ‘false’, as shown below: 

(false, ‘DISALLOW FILE EDIT’)

You also don’t need to log into your server or cPanel to make changes to the wp-config.php file; instead, you can use the WP File Manager plugin.

This must fully restore the WordPress Theme Editor option, allowing you to proceed with inserting the code into the functions.php file of the Child Theme as planned. Check out these troubleshooting steps for more information on the aforementioned.

If you don’t already have a Child Theme set up and still want to use this method, you’ll need to do so first. Here’s how to create and install a Child Theme on your WordPress website, regardless of which theme you’ve installed.

From a technical perspective, I believe this option is a good solution.

You can avoid the issue of Theme updates overriding the code by using a plugin to insert code into the main Theme’s functions.php file, and you don’t need to use a Child Theme if you don’t already have one.

A code snippets plugin is required first. A few of these are completely free, strong, and supported plugins that can be found on the WordPress.org repository.

Some plugins that may be helpful are: My Custom Functions by Space X-Chimp and Code Snippets by Code Snippets Pro.

My Custom Functions

Once you’ve installed one of these plugins, you can go ahead and paste the code from the previous method. If you skipped it, here it is again:

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

Simply follow the instructions provided by the plugin developer (which are usually as simple as copy and pasting the code into a box) to quickly, effectively, and correctly hide WooCommerce Related Products from the Product Page.

This is a relatively simple fix. But it’s a “CSS fix” rather than a “code fix,” which means the function is still running in the background, but you’re telling it not to use a style.

This may not bother you in the least. In that case, you can easily disable related products on the WooCommerce Product page by pasting this CSS into your WooCommerce Theme Customiser’s “Custom CSS” section. Paste the following CSS into Appearance > Customise > Custom CSS:

.related.products {
display: none;
}

That’s it; WooCommerce Related Products has been removed from your website.

These three examples, however, are focused on preventing WooCommerce from displaying related products on product pages.

Using a Page Builder such as Divi or Elementor, you can delete the WooCommerce Related Products from a Product Page.

In fact, the appearance of the WooCommerce Product page can be completely customized.

However, you are not required to take any drastic measures!

You can build a new WooCommerce Product Page to look almost identical to the default Product Page template, but with a few key differences.

Want to turn off woocommerce’s related products? No problem; just leave them out of your new product page designs.

Want to change the text on WooCommerce product pages that refers to related products? No problem – just use a page builder like Divi to change the title to anything you want.

On mobile, do you want to show a single column of WooCommerce-related products? That’s not a problem; simply specify it in your page builder!

Do you want to change the image size of woocommerce related products? No problem – just use the page builder to adjust the image sizes to your liking.

Do you want to exclude WooCommerce-related products from a subcategory of your products? No problem; just leave the Related Products section blank in the WooCommerce Product Page Redesign for certain pages!

Do you want to create a list of woocommerce-related products? It’s not a problem; on the WooCommerce Product page, you can display related products exactly how and where you want.

Instead of displaying woocommerce-related products, why not display bestsellers? Use a page builder to design your WooCommerce product page without any code is a great idea – and it’s easy to do!

So, if you are curious to know how to control related products in WooCommerce, it’s possible that you need to approach the problem from a different perspective.

Yes, you can edit the related products section of the WooCommerce Product Page if that’s all you want to do. However, this will almost certainly necessitate the use of code.

Consider the possibilities.

You can control everything on the WooCommerce Product Page Design if you use a Page Builder to edit the WooCommerce Product Page.

That doesn’t mean you have to take any drastic measures!

You can simply copy the existing design and make minor changes to match Your requirements.

Check out the Divi Theme and Divi Builder, both of which are great, powerful, and cheap.

Yes, you can disable WooCommerce related products among all product pages, or you can turn off related products on specific products in WooCommerce. Some solutions require coding in the theme files, while others rely on CSS in the Custom CSS section of the theme customizer.

However, we believe that taking full control of your product page design and not relying on the Product Page template provided by your Theme to Work with WooCommerce is the better option.

On the WooCommerce Product page, you can start replacing WooCommerce Related Products with Best Sellers, Upsell Products, or Cross-Sell Products.

As we’ve seen with the Divi Theme and Divi Builder approach to replacing WooCommerce Related Products, it’s entirely possible to customize the WooCommerce Product page in relation to visual design without having to touch a piece of code.

Although WooCommerce Related Products cannot be detailed like WooCommerce Upsells and Cross-Sells, you can affect related products.

In the eyes of the WooCommerce database, categorizing products in the same Product Category or using the same Product Tags on your WooCommerce Products makes them “related.” You might think your site only organized WooCommerce-related products by product category, but WooCommerce also associates products with Product Tags.

If you’ve set up various product categories and product tags, like most WooCommerce business owners, you’re likely to see a large portion of your product catalog appear as “related products” on WooCommerce product pages.

1. Hide them with CSS  2. Using code snippets to modify PHP to disable related products 3. Rebuilding the WooCommerce Product Page using a page builder like Divi, except for the Related Products section from the design.

WooCommerce uses Product Categories and Product Tags to group products together. To change which products are related, you must first change the Product Categories and Tags.

Customizing the WooCommerce Product Page is a better way to manage the “related products” that appear on the WooCommerce Product page. You can choose to show user-specified “cross-sell” and “upsell” products rather than the WooCommerce-defined related products.

About the Author
Shahzad Saeed
Author: Shahzad SaeedWebsite: http://shahzadsaeed.com/
Shahzaad Saaed has been featured in a large number of authority websites, as a WordPress expert. He specializes in content marketing to help business grow their traffic.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.

Author(s) Featured On:  Inc Magazine Logo   Sitepoint logo   CSS Tricks logo    webdesignerdepot logo   WPMU DEV logo   and many more ...