How to Hide and Remove Related Products in WooCommerce
Are you looking for a simple way to hide related products in your store? We’ve got something for you. In this article, we will show you different ways to remove related products in WooCommerce.
What Are Related Products?
As their name suggests, related products are products that are somehow linked to another item. In WooCommerce, related products are recommendations that are related to the product the shopper is viewing and tend to complement the main item. They usually appear at the bottom of your product pages and they help your business increase sales and revenue. For example, products related to a phone might be headphones, phone cases, camera accessories, and so on.
Why Remove Related Products in WooCommerce?
If related products help us boost our sales, why would we want to remove them? There are several situations in which you might want to hide the related products in WooCommerce. For example, if you only sell a few products that aren’t related, you may not want to display them. Additionally, if your theme doesn’t perform well with the related products section, you may need to remove it from your store.
On top of that, sometimes the CSS code from some themes or plugins can break your website or parts of it. If there’s a conflict with the related products section, you can remove it.
Additionally, if your product page is cluttered or has too many related products, you can either display fewer items or remove the section altogether.
Before showing you how to remove them, let’s see how to set up related products in WooCommerce.
How to Set up Related Products in WooCommerce
Setting up related products in WooCommerce is pretty straightforward. In your WordPress dashboard, go to Products and open any product. In the WooCommerce products editor, go to the Product data section, select the Linked Products tab, and you will see an option to configure Upsells and Cross-sells.
Even though upsells and cross-sells are a kind of related product that WooCommerce offers by default, the customization options are quite limited. If you want to display related products, you can use a dedicated plugin.
For this demo, we are going to use a free tool called Custom Related Products for WooCommerce. After installing and activating the plugin, you will see one more option in the linked products section.
You can search for products you want to display as related products. For example, we are going to list four products.
Then update the settings and if you check the product page from the frontend, you will see the selected related products.
Alternatively, you can remove some related products and display fewer items. For example, let’s say that instead of 4 items, you want to display three. Remove the product you want to hide, update the page and check the frontend.
This is one of the best customizations you can apply to your store. Instead of displaying random related products, you can select the items you want to associate with each product. We recommend you run a few tests and check the conversion rates to find the best combinations.
NOTE: It’s worth noting that some templates include a Related Products section that takes products that share the same tags or categories. Even though you can’t specify these items, you can use the same tags or categories for the products you want to display together.
Let’s have a look at different methods to hide related products.
How to Hide and Remove Related Products in WooCommerce
There are several methods to remove WooCommerce related products:
- With plugins
- Programmatically (coding)
- Using a page builder
- With CSS
- From the theme options
Let’s have a closer look at each method.
1) Hide related products with plugins
There are several plugins you can use to hide related products. For this tutorial, we will use NS Remove Related Products. First, you need to install and activate the plugin. Go to Plugins > Add new, look for the tool, and install it on your site.
After activating the plugin, you will see that you have successfully removed all the related products from your single product pages. This is a plug-and-play plugin and doesn’t need any additional configurations.
If you check any of your single product pages, you won’t see any related products.
If you want to display the related products again, deactivate the plugin. As NS Remove Related Products is a lightweight tool, keeping it installed won’t affect your website’s speed and performance.
2) Remove related products programmatically
If you have coding skills and are comfortable editing code and modifying your files, this is a very interesting method for you. In this section, we will teach you how to tweak your theme’s functions.php file and remove the WooCommerce related products from your online store.
NOTE: This method involves editing some of your theme’s files, so before moving forward, make sure that you have a complete backup of your WordPress/WooCommerce website. That way, you can restore your site in case something goes wrong.
To remove related products, we’ll edit the functions.php theme. To do that, there are two different methods:
- Via a child theme
- Via a site-specific plugin
We have created a step-by-step guide to teach you how to create child themes. Once you have generated a child theme for your site, you can add the custom code snippet to the child theme’s functions.php file. On the other hand, if you rely on a dedicated plugin, you will add your custom code directly to it.
Let’s have a quick look at both options.
2.1) Child Theme
If you’ve been following our blog, you probably know that we don’t recommend editing the parent theme files because when the theme gets an update, all your modifications will be lost. In other words, your customized files will be replaced with the new files from the new version.
That’s why we recommend using a child theme if you need to add custom code to your theme. Creating a child theme is pretty simple. For this demo, we’ll use a plugin called Child Themify.
First, install and activate Child Themify on your store.
Under the Appearance section, you will see a new option called Create Child Theme.
From there, you can generate a child theme for your parent theme.
After creating a child theme, activate it, and go to the theme editor.
Here, we’ll add a bit of code to the theme’s functions.php file. By default, WordPress displays the style.css file in the editor, but you can select the functions.php file from the right column.
After selecting the file, copy the code from below.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
Then paste it into the editor and update the file.
That’s it! Now check your product page from the front end and you will see that the related products section isn’t visible anymore.
2.2) Code Snippets
Another alternative is to add a custom code snippet using a plugin. For this tutorial, we’ll use Code Snippets, one of the free site-specific plugins available in the market.
First, install and activate the plugin on your site.
Then, you will see new settings on the left-hand side.
By default, the plugin will display some custom code snippets, but they aren’t active so they don’t affect your website.
To remove related products in WooCommerce, we will add a new snippet to the site.
Give a name to the snippet and then copy this code.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
Paste it in the Code section, select the Run snippet everywhere option, and activate it.
Once your snippet is active, check your single product pages and you will see that the related products aren’t there.
This is how you can remove or hide WooCommerce related products with a bit of coding. Now let’s see how to do it using a page builder.
3) Hide related products using a page builder
Another interesting option to hide the related products from individual WooCommerce product pages is to use a dedicated page builder plugin.
For this tutorial, we will use the Divi builder, one of the most popular and easy-to-use page builders out there. First, you need to install and activate the plugin on your site. Since it is a premium product, you will have to purchase it from the Elegant Themes site.
After downloading the plugin from your Elegant Themes account, install it and activate it.
The Divi builder comes with a visual editing experience that will help you edit your pages directly from the front end.
Now let’s see how to use it to remove the WooCommerce related products. Open any product page and then click the Enable Visual Builder button in the top bar.
WordPress will load the Divi builder and you will be able to edit the page templates from there.
Now click on the Related Products element and you will see several options. To remove this section, simply select the delete button.
You will instantly see that that section disappears from the page.
On top of that, you can edit other elements of your product page but for now, let’s leave everything as it is and save the changes.
One of the great advantages of the Divi builder is that you can see the changes in real-time. To make sure that everything looks good, you can check the product page from the front end and see the results.
It’s worth noting that the Divi builder works with most themes, not just Divi or Extra by Elegant Themes.
For more guides on how to customize your site using Divi, have a look at the following guides:
- How to Customize the WooCommerce Product Page with Divi
- Add the Add to Cart button in Divi Shop Pages
- Divi Contact Form not working? How to Fix it
4) Remove related products with CSS
If you don’t want to edit your theme files or use any plugins, there’s a simple CSS snippet that will help you hide the related products from your single product pages.
First, in your WordPress dashboard, go to Appearance > Customize.
Open the Additional CSS section.
And add the following CSS code:
.related.products {
display: none;
}
The WordPress customizer comes with a live-preview wizard that allows you to see all the updates in real-time as shown below.
As you can see, it’s very simple to use CSS to hide the related products. Simply update the configuration after pasting the code and you are good to go.
5) Remove products from the theme options
Some premium themes come with a dedicated theme panel that includes some options to customize your WooCommerce store. In most cases, the options to remove related products are under the single product page options.
On top of that, some WordPress themes come with dedicated templates that include a related products section that you can enable/disable. We recommend you have a look at your theme or contact their support team to find out.
Bonus: How to turn off related products individually
This is an advanced method for removing WooCommerce related products from your product pages. We will add a code snippet to add a checkbox in your WooCommerce dashboard that you can tick to enable/disable related products on each product.
You need to add the following code in the functions.php file of your child theme or using a site-specific plugin. For this demo, we will use the Code Snippets plugin, so we simply go to the plugins’ settings and create a new snippet.
We give it a name and paste the below.
Explanation of the code
This piece of code will add a checkbox to the product page that you can tick to remove the related products section. We’ve called the checkbox “Remove related products” but you can customize it by changing the label line.
// 1. Add a checkbox to the product page to remove related products add_action( 'woocommerce_product_options_general_product_data', 'quadlayers_add_related_products_checkbox' ); function quadlayers_add_related_products_checkbox()
{woocommerce_wp_checkbox( array(
'id' => 'hide_related',
'class' => '',
'label' => 'Remove related products'
)
);
}
The following part of the code will save the checkbox into a custom field.
// 2. Save checkbox field
add_action( 'save_post_product', 'quadlayers_save_related_products_checkbox' );
function quadlayers_save_related_products_checkbox( $product_id ) {
global $pagenow, $typenow;
if ( 'post.php' !== $pagenow || 'product' !== $typenow ) return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( isset( $_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} else delete_post_meta( $product_id, 'hide_related' );
}
Finally, this part of the code checks if the checkbox we’ve just created is ticked and if it is, removes the related products section.
// 3. Hide related products in single product page
add_action( 'woocommerce_after_single_product_summary', 'quadlayers_hide_related_products_checkbox', 1 );
function quadlayers_hide_related_products_checkbox() {
global $product;
if ( ! empty ( get_post_meta( $product->get_id(), 'hide_related', true ) ) ) {
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
}
Paste all the code together and save the changes. Now it’s time to see if it worked, so go to your Products page and choose any of the published products.
Inside the editor, you will see a new option called Hide Related Products.
When you enable this checkbox, the related products section won’t be displayed on that product page. So now if you check the front end, you will see something like this.
This is a great option to have the flexibility to only show the related products section on certain product pages. For more information about this, you can have a look at this.
Changing the number of related products you can display on a page
This is another interesting option to change the number of related products you display per page. This can be useful to have a cleaner Related Products section or when you want to display only a few related items.
To do this, you can either add the following code to the child theme’s functions.php or use the Code Snippets plugin.
/**
* Change the number of related products
*/
function woo_related_products_limit() {
global $product;
$args['posts_per_page'] = 6;
return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'quadlayers_related_products_args', 20 );
function quadlayers_related_products_args( $args ) {
$args['posts_per_page'] = 3; // 3 related products
$args['columns'] = 1; // arranged in 1 columns
return $args;
}
If you take a closer look at the code, you will see that we will display 3 related products in 1 column. Simply adjust the code according to your requirements and save the changes. You will see all the changes reflected on the front end.
How to use related products to increase conversion rates
One of the main benefits of related products is to help you increase conversion rates. The idea is to display products that are related to the item the shopper is viewing, so they buy more products. These related products usually complement or enhance the main item’s performance. For example, if you’re viewing a laptop, related products can be a laptop case, an external hard drive, HDMI cable, and so on.
This is a popular strategy in eCommerce. For example, popular online stores such as Amazon or Flipkart display several related products according to the user’s past orders, search history, brands, and so on.
Conclusion
All in all, related products can help you boost your sales. However, there are some situations where you may need to hide them.
In this guide, we’ve seen different methods to remove related products in WooCommerce:
- Using plugins
- Programmatically (coding)
- Using a dedicated page builder
- With CSS snippets
- From the theme options
The simplest way to hide the related products section is to use a plugin. You simply have to activate the plugin and it will automatically hide the related products. On the other hand, if you are comfortable with coding, you can edit the functions.php file or add a small CSS script.
Alternatively, if you want to remove related products from individual pages, you can do so with a page builder. Finally, if you have a premium theme, check if it gives you the option to hide the related products from the theme panel. When you have a page builder installed, you can use it to hide the related products in the store.
For more tips to make the most of your store, have a look at the following guides:
- How to add WooCommerce products
- Customize the WooCommerce product page
- How to edit the WooCommerce shop page
Have you removed WooCommerce related products from your store? Which method did you use? Let us know in the comments section below!