Most Efficient Ways to Hide Related Products in WooCommerce

WooCommerce related products show up on product pages when there are other items in the same category. However, not everyone needs these related products to show and unfortunately there is no built-in option that would allow this to be quickly turned off.

Video Tutorial

5 Different Methods

Here are five straightforward ways that this can be achieved (no plugin required):

1. Edit your themes functions.php file

The most correct way to remove this area is through code and can be achieved by editing your themes functions.php file.

To edit this file from the WooCommerce back-end, head over to the administrative following page:

  • Appearance -> Theme Editor

Here, you will be given a warning that any changes may be reversed during a theme update. Click “I understand” and continue on. Now from the right hand menu title “Theme Files” select the “Theme Function (functions.php)” option.

Scroll down to the bottom and simply paste the following:

// remove related products
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

And hit the Update File button below. Here’s a summary screenshot for reference:

Screenshot showing how to remove related products through editing the functions.php file on the back-end

More advanced users, can edit this file directly via their favourite text editor.

2. Hide the the section with CSS

This approach doesn’t completely get rid of the related productions section, but instead simply hides it from view for visitors. Essentially, it relies on adding a bit of code that tells the browser to not show the related products section.

To add this code, head on over to the Theme Editor in the Appearance section as with the functions.php approach, but instead open the “Stylesheet (style.css)” option from the Theme Files menu.

Scroll down to the bottom of this file and paste the following code snippet on a new line:

/* Hide related products */
.related.products {
    display: none;
}

And hit the “Update file” button.

Screen of the steps required to take to hide the related products using CSS via the theme editor

The benefit of this method is that while the section is hidden from view for users, it is still show to search engines and other website crawlers (assisting them in build a more accurate map of your website and product relations).

Depending on your theme, you may need to adjust the snippet above, replacing the “.related.products” with the corresponding class that wraps this section in your theme (tutorial on how to find the wrapper class in most modern browsers).

3. Move products to individual categories/tags

This method is not recommended for most shops as it will result in far too many categories for users to navigate as the store inventory expands. However, if you have just a few items in your store and don’t want to mess with theme edits, this approach may be suitable.

The WooCommerce related products section uses product categories and tags to build the list of products to display. If the product being viewed doesn’t share any categories of tags with any of the others in the store, this section is automatically hidden.

Screenshot showing how to set unique categories and tags to hide the related products section

The default Uncategorized category is also used in this algorithm. If you are still seeing related products, make sure this isn’t the reason.

4. Check your theme customization options and documentation

If you are using a third party theme, you may already have a simple toggle available to you in the themes customization options. Search through your themes documentation to check if this approach applies to you and where the corresponding setting can be found.

5. Install a plugin to take care of this for you

Plugins are my least favourite approach to such simple adjustments. However, as this is the least technical approach, it may still be useful to some.

A great choice here, is the Booster for WooCommerce plugin, which adds a whole set of options that can be configured for the related products section.

This plugin can be found on the WordPress repository:

Booster for WooCommerce

And instructions for how to edit the related products section a briefly outline here: https://booster.io/features/woocommerce-related-products/


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *