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

WooCommerce-related products are created with the clear goal of presenting store visitors to a wider range of products.

It's an effective way to increase average order value or product purchases and just about every store uses the concept.

But if you don't want them to appear, how do you remove WooCommerce related products or disable them from appearing?

You could be bombarding customers with other products before they even wanted to make their first purchase from your store at any given time and that's not great for conversion.

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.

It can be influenced by grouping similar products together in the same product category or using the same product tags though.

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 disable WooCommerce related products on the product page.

 

When it comes to hiding WooCommerce related products, you have several options.

Choose the one which is easiest for you to perform.

  1. You can add code to functions.php.
  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.

We recommend using a child theme so your changes aren't overwritten when the WordPress theme is updated.

If you don’t have a child theme set up and still want to use this method, you’ll need to create one.

Here’s how to create a child theme, regardless of which theme you’ve installed.

Access the theme editor through your WordPress dashboard (Appearance > Theme Editor). Then choose your child theme.

Find the 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?” 

If you don't have permission to change functions.php, here is the solution:

You can make a simple change to your 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’)

That is if you have permission to edit that file.

This will restore the WordPress Theme Editor option, allowing you to insert the code into the functions.php file of the child theme as planned.

From a technical perspective, I believe using a plugin is a good solution if you don't want to mess with code

You can avoid the issue of theme updates overriding the code by using a plugin to insert code into the 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.

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 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 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 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 either. 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?

No problem; just leave the related products section blank for certain pages!

Do you want to create a list of WooCommerce-related products?

On 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 product page 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 category, but WooCommerce also associates products with tags.

If you’ve set up various categories and 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
Shahzaad Saaed has been featured in a large number of authority websites including EasyDigitalDownloads, OptinMonster and WPBeginner where he is currently employed as a senior content writer. Shahzad is a WordPress expert, web designer and overall technology and design expert. He specializes in content marketing to help business grow their traffic through actionable and experience-backed articles, blogs and expert guides, all taken from his over 10 years of experience in the field.

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