# How to Hide Related Products in WooCommerce: A Beginner’s Guide
Want to declutter your WooCommerce product pages and improve the customer experience? Hiding related products can significantly impact your store’s design and user journey. This guide will show you how, even if you’re a complete coding newbie.
Why Hide Related Products?
Before diving into the “how,” let’s understand the “why.” Related products, while sometimes helpful, can sometimes be detrimental:
- Cluttered Pages: Too many related products make the page visually overwhelming, potentially distracting customers from your primary product. Imagine browsing for a specific type of running shoe; seeing dozens of unrelated athletic gear items makes it harder to find what you need.
- Irrelevant Suggestions: WooCommerce’s default related products algorithm isn’t always perfect. It might suggest products that aren’t truly related, confusing your customers. A customer buying a luxury watch might not be interested in a cheap wristband, even if both are categorized under “accessories”.
- Improved Conversion Rates: A cleaner, more focused product page can lead to better conversion rates. Less visual clutter equals a more streamlined purchasing process.
- Branding Consistency: Hiding related products allows you to maintain a consistent brand aesthetic. You have more control over what information is presented.
- Completely disable related products.
- Customize the number of related products displayed.
- Manually select which products are shown as related.
Methods to Hide Related Products in WooCommerce
There are several ways to achieve this, ranging from simple plugin usage to custom code. Let’s explore the most effective methods:
1. Using a Plugin (The Easiest Way)
The simplest approach involves using a WooCommerce plugin. Many plugins offer options to disable or customize related products. Search the WordPress plugin directory for “WooCommerce Related Products” and find one with good reviews. These plugins usually provide a simple interface, often allowing you to:
Advantages: Learn more about How To Show Woocommerce Stock Status Values Easy to implement, no coding required.
Disadvantages: Requires installing and configuring a plugin, potentially adding overhead.
2. Using a Child Theme and Custom Code (For Advanced Users)
This method involves using a child theme to add custom code, preventing your changes from being overwritten during updates. This is more technical but provides complete control.
Here’s how to remove related products using a child theme and a custom function:
First, create a child theme (if you don’t already have one). This is crucial for maintaining your customizations. Then, add the following code snippet to your child theme’s `functions.php` file:
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
This code snippet removes the `woocommerce_output_related_products` hook, effectively hiding the related products section.
Advantages: Provides maximum control and customization.
Disadvantages: Requires knowledge of child themes and PHP coding. Incorrect implementation can break your site.
3. Hiding Related Products with CSS (A Less Recommended Approach)
You can technically hide related products using CSS, but this is generally not recommended. While it might seem simple, it’s not a robust solution and can easily break with WooCommerce or theme updates.
This method involves inspecting your page’s source code to find the related products section’s CSS class or ID, and then adding a CSS rule to hide it. For example:
/* This is a hypothetical example. The actual class or ID will vary. */
.related-products {
display: none;
}
Advantages: Can be quick for temporary hiding.
Disadvantages: Not reliable, prone to breaking, and generally not a best practice.
Choosing the Right Method
The best method depends on your technical skills and comfort level:
- Beginners: Use a plugin. It’s the easiest and safest option.
- Intermediate/Advanced Users: A child theme and custom code offer complete control and stability.
- Avoid: Using CSS to hide related products, unless it’s a very temporary solution.
By implementing one of these methods, you can create a cleaner, more focused shopping experience for your customers, leading to a potentially improved conversion rate and a more professional online store. Remember to always back up your website before making any code changes!
