Creating or customize products WooCommerce serves the specific goal of showcasing a broader range of products to visitors in your WooCommerce store. However, there are instances where these related products may not yield the expected results for business owners. Instead of enhancing the shopping experience, they might confuse customers and lead to no sales.

In the dynamic world of e-commerce, tailoring your online store to meet specific needs is crucial for a streamlined customer experience. For WooCommerce users, one aspect of customization involves the ability to hide and remove related products from product pages. This Woocommerce customization not only declutters the product page but also gives you control over the customer’s focus, enhancing their shopping experience. Understanding how to customize products WooCommerce, particularly in terms of related product displays, is an essential skill for any store owner or web developer.

WooCommerce, as a versatile platform, offers various methods to customize products and their display settings. Whether it’s through theme options, dashboard settings, or direct code edits, the ability to customize products WooCommerce is vast and adaptable to different needs. This guide focuses on how to hide and remove related products Woocommerce, a common request from store owners looking to simplify their product pages or direct customer attention elsewhere.

Customizing products WooCommerce to hide or remove related products can significantly impact how customers interact with your store. By removing potentially distracting items, you can guide customers to focus solely on the product at hand, potentially increasing conversion rates. Furthermore, learning to customize products WooCommerce gives you the flexibility to create a more personalized and brand-aligned shopping experience.

In light of this, this article aims to guide you on hide related products WooCommerce.

Let’s get started!

What are related products?

Related products, as the name implies, are items that share some connection with another product. In WooCommerce, these related products serve as suggestions linked to the product currently being viewed by a shopper, typically complementing the main item. Positioned at the bottom of your product pages, they play a crucial role in boosting sales and revenue for your business. For instance, if a shopper is viewing a phone, related products could include headphones, phone cases, camera accessories, and more.

Why remove related products WooCommerce?

While related products are effective in enhancing sales, there are scenarios in which you might consider hide related products WooCommerce. For instance, if you have a limited inventory of unrelated products, displaying related items may not be suitable. Additionally, if your theme is incompatible with the related products section, removing it becomes necessary for a seamless store appearance.

Furthermore, conflicts arising from CSS code in certain themes or plugins can disrupt your website’s functionality. If such conflicts affect the related products section, it becomes advisable to remove related products WooCommerce from it.

Moreover, in cases where your product page appears cluttered or overwhelmed with numerous related products, you may opt to either reduce the number of displayed items or eliminate the section altogether.

Before delving into the removal process of remove related products WooCommerce, let’s first explore how to edit related products in WooCommerce.

How to edit related products in WooCommerce

Setting up related products in WooCommerce is a straightforward process. Navigate to your WordPress dashboard, access the “Products” section, and open any product. Within the WooCommerce product editor, go to the “Product data” section and select the “Linked Products” tab. Here, you’ll find options to configure Upsells and Cross-sells.

While upsells and cross-sells are default types of related products provided by custom Woocommerce development, their customization options are somewhat limited. To showcase related products with more flexibility, you can utilize dedicated plugins. In this demonstration, we’ll use a free tool called “Custom Related Products for WooCommerce.” Once installed and activated, an additional option will appear in the linked products section.

You can then search for the products you wish to display as related items. For example, let’s list four products. 

After updating the settings, checking the product page from the frontend will reveal the selected related products.

Alternatively, you have the option to remove specific related products woocommerce and display a reduced number of items. For instance, if you want to showcase only three items instead of four, simply remove the product you wish to hide, update the page, and check the frontend.

This customization provides a significant enhancement to your store. Instead of displaying randomly selected related products, you can precisely choose the items you want to associate with each product. We recommend conducting tests and monitoring conversion rates to identify the most effective combinations.

Note: Certain templates may include a Related Products section that automatically pulls products sharing the same tags or categories. Although you can’t specify these items individually, you can use consistent tags or categories for products you want to display together.

Ways to hide/ disable/ remove related products in WooCommerce?

Hide Related products WooCommerce serve as recommendations associated with the product the customer is currently viewing, with the aim of complementing the main item. Typically positioned at the bottom of product pages, they play a pivotal role in boosting sales and increasing profits for your company. However, there are instances where hiding, disabling, or removing related products becomes necessary:

• If you offer a few unrelated products, you may not want to display them.
• If your theme doesn’t go well with the related products section, you may consider removing it from your store.
• CSS code from some themes or plugins might occasionally break your website or parts of it. You might want to delete the related products section if there is a conflict.
• Related products may overload and frustrate buyers, resulting in no purchases.

How to Hide Related Products WooCommerce?

Method 1. Using custom CSS

Step 1: Go to Appearance and Customize.

Access your WordPress dashboard and go to Appearance > Customize.

Step 2: Go to the Additional CSS Section.

Within the customize products Woocommerce options, open the Additional CSS section.

Step 3: Add the CSS Code

Insert the following CSS code:

.related.products {

    display: none;

}

After adding the code, click the “Publish” button. The WordPress customizer offers a live preview, allowing you to see updates in real-time.

While this method is user-friendly for non-tech individuals to hide related products woocommerce, it’s not the preferred technique. The CSS snippet only hides related products from website users, while the underlying PHP code continues to run in the background, loading all recommended product data.

Method 2. Using a plugin

You have the option to conceal related products using various plugins. In this guide, we’ll specifically utilise NS Remove Related Products woocommerce.

Please note that the free version solely permits the hiding of related WooCommerce products. To unlock additional features, subscription to the Pro version is required.

Method 3. Using a page builder

Utilizing a dedicated page builder plugin presents an effective solution for concealing related products on individual WooCommerce product pages. In this guide, we’ll employ the Divi page builder, known for its prominence and user-friendly features.

Step 1: Download, Install, and Activate the Plugin

Begin by downloading the Divi page builder plugin from the Elegant Themes website. After purchasing it, install and activate the plugin on your site.

Install and activate the plugin after downloading it from your Elegant Themes account.

Step 2: Enable Visual Builder

The Divi builder offers a visual editing experience, enabling you to make changes directly from the front end. Open any product page and click on the “Enable Visual Builder” option in the top bar.

Step 3: Remove the Related Products Section

Upon activating the Visual Builder, WordPress will launch the builder interface, allowing you to edit page templates. Click on the Related Products element, and a set of options will appear. Simply click the delete button to remove this section.

Remove Related Products section, and it will immediately disappear from the page.

You have the flexibility to modify other parts of your product page as well, but for now, let’s focus on the Related Products section.

Step 4: Click Save

To preserve the changes you’ve made, click “Save.”

Click Save to save all the modifications.

How to Disable Related Products WooCommerce?

This section outlines the process of disable related products WooCommerce by utilizing a plugin to add code to the main functions.php file. This method not only addresses the concern of theme updates potentially overriding the code but also eliminates the need to implement a Child Theme if one is not already in use. To disable related products WooCommerce, you can follow these steps:

Step 1: Install a Code Snippets Plugin

Choose from various free and robust code snippets plugins available in the WordPress repository. Recommended options include “My Custom Functions” by Space X-Chimp and “Code Snippets” by Code Snippets Pro. Install the preferred code snippets plugin to proceed.

Step 2: Insert the Code

After installing the plugin, copy and paste the following code into the main functions.php file:

Follow the plugin developer’s guidelines (typically involving pasting the code into a designated box), and you can efficiently and effectively disable WooCommerce Related Products from the Product Page.

How to Remove Related Products WooCommerce?

To remove related products WooCommerce, you can follow these steps:

Step 1: WordPress Dashboard Settings

The determination of related products in WooCommerce is automated and based on various factors, as outlined in the WooCommerce documentation. This involves categorizing similar items within the same category or using identical tags. Although there is no direct method to control the list of related products for a specific item, you can utilize the cross-selling option in WooCommerce to achieve this. Navigate to Appearance > Customize > Product Page in the WordPress dashboard settings and set up Cross-Selling products. With cross-selling, you manually link products, giving you complete control over what users see under related items.

Step 2: From Theme Options

This method, dependent on the WordPress theme in use, offers a straightforward approach to removing related products. If you’re using a dedicated WooCommerce theme, it’s likely that the theme developers have included an option to enable/ disable related products WooCommerce  on single product pages. Locate this option on the single product page, in the theme settings panel, or in the WordPress theme customizer panel, depending on your theme. If accessible in your theme options, simply disable it from your theme’s settings. It’s recommended to check your theme or contact their support staff for guidance.

Step 3: Editing the Theme’s functions.php File via a Child Theme

Modifying parent theme files risks losing changes during theme updates. To avoid this, use a child theme when adding custom code to your theme. Creating a child theme is a straightforward process, and for this tutorial, we’ll use a plugin called Child Themify.

Customize products Woocommerce with Cyblance

When it comes to enhancing your WooCommerce product pages, Cyblance offers a tailored and strategic approach to meet your specific business needs. Leveraging Cyblance’s expertise in WooCommerce customization opens up a world of possibilities to optimize the functionality and aesthetics of your online store.

Whether you have a limited selection of unrelated products or your theme is not perfectly aligned with the related products section, Cyblance can tailor solutions to address these concerns. It’s essential to navigate potential pitfalls, including the risk of overwhelming buyers with an excess of related products, leading to a lack of purchases.

Cyblance’s services extend beyond mere WooCommerce customization; they represent an investment in the longevity and effectiveness of your e-commerce venture. If your goal is to hide related products in WooCommerce or remove them entirely, Cyblance provides solutions tailored to your unique business requirements.

In addition to WooCommerce customization, Cyblance can strategically implement features like hide related products WooCommerce and remove related products WooCommerce to optimize the user experience. This includes fine-tuning product layouts, optimizing the checkout process, and integrating additional features seamlessly. If you find conflicts arising from CSS code or theme updates affecting your related products section, Cyblance ensures a smooth resolution.

In conclusion, WooCommerce customization products with Cyblance are more than a service; it’s a partnership aimed at realizing the full potential of your online store. Whether you aim to enhance design elements, add specific features, or optimize performance, Cyblance’s comprehensive solutions contribute to a successful and tailored WooCommerce store.