How To Hide Related Products In WooCommerce

Tired of product pages that look nothing but a mess? Your web users are equally overwhelmed by such pages, and they avoid interacting with such websites.

One of the factors that make your product pages look like a complete mess is the display of related products. While they are a source to upsell and cross-sell, they sometimes have adverse effects on your website. 

The display of related products may:

• Add to web users' discomfort
• Poor experiences
• Poor navigation
• Focus diversion from the primary products
• Website abandonments

These and many more issues demand hiding related products in WooCommerce. 

To help you understand things better, we will discuss why you need to hide related products and what the effective ways to do so are.

So, keep scrolling through this blog.

Why in WooCommerce Hide Related Products?

We know that displaying related products in WooCommerce comes with ample benefits and helps you cross-sell. While related products are a source to boost your sales— only if displayed the right way—they sometimes turn out to be overwhelming.  This is why hiding related products becomes mandatory. 

Here are some reasons why you should hide related products in WooCommerce:

Cut Down The Clutter

There are a few WooCommerce features that enhance user experiences, and there are certain practices as well. Having a clutter-free product page is one of the practices, and for that, you should remove related products. You must let the primary product be the focus instead of diverting the user's attention to a clutter of related products. 

Better User Experience

Clearing the clutter is always pleasant to the eyes of the web users, and they like to scroll through web pages that are clean and easy to navigate. To offer your web users the best experience without any distractions, hiding related products in WooCommerce works wonders. Removing automatic product suggestions helps you to declutter the product pages that the users crave. 

Improves The Loading Time

Hiding related products in WooCommerce means much more than cleaning the product pages. It helps you improve your website’s loading speed and time, which the users will find enjoyable when visiting your online store. There is no need to add related products if you want your website to have optimum speed. You can add a product enquiry button alternatively for products you want the user to catch up with later and find out more about the product.

4 Ways To Remove Related Products In WooCommerce

1. Removing Related Products Through A Code Snippet

This method of hiding related products in WooCommerce is a bit technical, and you might need a WooCommerce expert to do the job for you. There are situations where the WooCommerce themes do not allow you to remove or hide related products. That is where you choose to remove them through code. 

Here is how to do it:

• Initialize the theme file to which you want to add the code snippet
• Look for the styling inherited from the parent file. If it is inherited, then follow the next step
• Go to Appearance > Theme Editor from your WordPress dashboard
• Select the child theme file to which you want to make updates
• Here, you will find its function.php file
• Paste the code snippet in the php file

remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

Now press save

Note: It is better to add the code snippet to the child theme instead of the parent theme so that the theme updates are not affecting the website operations.

2. Removing Related Products Through Theme Customization

Theme customization can help you remove related products as they are displayed on individual product pages. It is also important to know that every theme you choose will vary so the change authorities. If the WooCommerce theme you have chosen allows you, then in that case only you can hide or display the related products by enabling or disabling them.

3. Removing Related Products Through A Plugin

WooCommerce plugins can get any job done effortlessly for you. With only a few clicks, your chosen product pages will no longer have related products displayed on them. All you have to do is choose the plugin you want to get the job done with and follow these steps:

• Go to WordPress Admin > Plugins > Add New plugin  
• In the search box, search for the plugin name
• Now select the plugin and install it
• Once the installation is successful, click on Activate

Now configure the settings and hide the related products

Note: Make sure to choose a plugin that not only serves the required functionality but also offers security without creating compatibility issues.

4. Removing Related Products Through CSS

The Cascading Style Sheet is another way to hide WooCommerce related products. It is just a line of code that you have to add to your CSS file.

This is how you can hide related products through the CSS file in WooCommerce:

• From your WordPress dashboard, navigate to Appearance > Customize 
• Now, at the bottom, you will find Additional CSS
• Add this line of code to the Additional CSS section: “ .related.products { display: none;} “

Now enter publish to save the updates

Note: Remember that this way of hiding related products will only hide the products from the view, not from your code or the data files.

Key Takeaway!

To yield your desired results, it is better to choose a reliable method to hide related products from your WooCommerce product page. Make sure the method you choose for the removal of WooCommerce related products is not affecting the website’s performance and its integrity. 

From our discussed methods, from theme customization to code snippet customization to CSS or a WooCommerce plugin, choose what you find useful. We recommend using WooCommerce plugins to get the job done, as they ensure not only efficiency but security as well. 

So, choose the WooCommerce plugin now!