How to Remove Related Products WooCommerce Storefront Theme

WooCommerce Storefront Remove Related Products

If you want to make additional revenue in your WooCommerce store, you encourage you to engage customers to add extra items to the shopping cart.

By default, WooCommerce allows you to show related products on the product detail page.

This helps you to up-sell and cross-sell the purchasers. It will increase the order size because customers can view other products.

WooCommerce Storefront Remove Related Products

An up-sell occurs when a customer buys a more expensive version of the product they originally wanted to purchase.up-sell

However, a cross-sell is when you encourage a customer to buy related products in addition to the one they originally wanted.Cross-sell

However, these related products do not function as effectively as what the store owner projected. Related products may confuse visitors, which can lead to no sales at all.

A perfect example is when the buyer has put a shirt in his cart, and then he is recommended some other classy shirts.

This pushes your customer to do some research about the new ones before making a choice. The customer might get distracted and leave without buying anything. This means that you will lose a sale.

This brief tutorial will share two ways to remove related products in a single WooCommerce product page manually.

Steps to Remove Related Products Using PHP in the Storefront Theme

Here are the simple steps that you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to remove related products.
  3. Add the following code to the PHP file:
/**

 * Remove related products output

 */

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
  1. This will be the outcome:Remove related Products

Steps to Remove Related Products Using CSS in the Storefront Theme

You can also use CSS to remove related products. The CSS code should be added in the Additional CSS section of the customizer. Here are the simple steps that you need to follow:

  1. Identify the Element

Right-click on any area site in a browser like Chrome or Firefox and click “Inspect Element” like this:Inspect element

Please ensure that you open the product page with the related products.

After clicking on that, this will bring up the console containing various elements of the page on the top and settings for the elements at the bottom.

Now you need to find the element responsible for the entire footer.Inspecting the element

  1. Creating the CSS Rule

Now that we have identified the element, .related.products, let us add a rule to hide this section.

.related.products {

display: none;

}
  1. Adding the Rule

The remaining part is to copy/paste into the “Additional CSS” section of your Storefront theme customization interface. To do this:

  • Log into your WordPress site and access the Dashboard as the admin user.
  • From the Dashboard menu, click on Appearance Menu > Customize.
  • Navigate down to Additional CSS in the left sidebar that appears.Additional CSS Section
  • Add the CSS rule, as shown below:The outcome
  • Click on publish to save the changes.

Conclusion

In this brief tutorial, I have highlighted that adding related products might distract customers.

This is because related products push the customer to start researching new ones before deciding which one to purchase.

They might not buy anything in the end, and you lose that sale.

However, I have shown you how to disable the related product section using PHP and CSS. This is a manual solution.

If you are not familiar with coding, you can use the NS Remove Related Products for the WooCommerce plugin.

This plugin offers a complete solution to shield the related products from your shop page. All you need to do is install and activate it.

Similar Articles