How to Remove WooCommerce Related Products: A Complete Guide
Introduction:
WooCommerce is a powerful e-commerce platform, and its related products feature is designed to boost sales by showcasing other items your customers might be interested in. However, sometimes these related products can be distracting, irrelevant, or even cannibalize sales of your primary product. Maybe you want to curate a more focused shopping experience, or perhaps you have specific upselling and cross-selling strategies you’d prefer to implement. Whatever the reason, removing related products from your WooCommerce store is a straightforward process. This article will walk you through several methods to effectively remove WooCommerce related products, giving you complete control over your product page layout. We’ll cover code snippets, plugin options, and even delve into the potential downsides of removing them altogether.
Removing WooCommerce Related Products: Multiple Methods
There are several ways to remove related products in WooCommerce, each with its own advantages and drawbacks. Choose the method that best suits your comfort level and technical expertise.
1. Using Code (functions.php or a Code Snippets Plugin)
This is a popular and efficient method, especially if you’re comfortable working with code. Directly modifying the theme’s `functions.php` file or using a code snippets plugin allows you to customize WooCommerce’s functionality without directly altering core files.
How it works: You’ll add a PHP code snippet that unhooks the action responsible for displaying related products.
Steps:
1. Backup your website: Before making any code changes, *always* back up your website. This will allow you to revert if something goes wrong.
2. Access your `functions.php` file: You can access this file either through your WordPress dashboard (Appearance > Theme File Editor) or via FTP. *Be extremely careful editing this file directly.*
3. Add the following code snippet: Paste this code at the end of your `functions.php` file *before the closing `?>` tag if it exists.* If you’re using a code snippets plugin, just add the code to a new snippet and activate it.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
4. Save the file or activate the snippet.
5. Test your changes: Visit a product page to confirm that the related products are no longer displayed.
Important Considerations:
- Child Theme: If you’re modifying `functions.php`, it’s highly recommended to use a child theme. Changes to your theme’s core files can be overwritten during theme updates. A child theme isolates your customizations.
- Code Snippets Plugin: Using a code snippets plugin is generally safer and more manageable than directly editing `functions.php`. Plugins like “Code Snippets” allow you to easily add and manage code snippets without touching your theme files.
- YITH WooCommerce Related Products: This plugin offers more control over related products, allowing you to customize their display, algorithm, and even replace them with custom-selected products. While it focuses *on* related products, it typically allows you to disable them as well.
- WooCommerce Product Add-Ons: While primarily for add-ons, some plugins offer features to hide or modify related products as a side benefit.
- User-Friendly: Plugins offer a visual interface, making it easier to manage without code.
- Additional Features: Many plugins provide extra customization options beyond just removing related products.
2. Using a Plugin
Several plugins can help you manage your WooCommerce store, including controlling the display of related products. These plugins often offer a user-friendly interface, making the process easier for those who are less comfortable with code.
Examples of Plugins:
How it works: Install and activate the plugin, then navigate to its settings to find the option to disable or modify related products. The exact steps vary depending on the plugin.
Steps:
1. Install and Activate: Explore this article on How To Change Drop Down Menu Color In Woocommerce Install and activate your chosen plugin from the WordPress plugin repository.
2. Navigate to Plugin Settings: Locate the plugin’s settings page in your WordPress dashboard. This is often found under the “WooCommerce” menu or a dedicated plugin Explore this article on How To Change Store Notice Color Woocommerce menu item.
3. Disable Related Products: Look for an option to disable or hide related products. The wording might vary, but it should be relatively straightforward.
4. Save Settings: Save your changes.
5. Test: Visit a product page to verify the related products are gone.
Advantages:
3. Editing the Theme (Potentially Risky)
While less recommended, you can technically edit your theme’s templates to remove the related products section. This is a more advanced approach and carries a higher risk of breaking your site. Only proceed if you have a solid understanding of WordPress theme structure and PHP.
How it works: Locate the template file responsible for displaying product pages (usually `single-product.php` or a related include file) and remove the code that renders the related products section.
Steps:
1. Backup your website: This is *crucial* before making any template changes.
2. Identify the Template File: Use your browser’s developer tools (right-click, “Inspect”) to try and identify which template file is being used to render the product page. Look for clues in the HTML structure. Common files include `single-product.php` and files within the `/woocommerce/templates/single-product/` directory of your theme.
3. Access the Template File: Access the file through your WordPress dashboard (Appearance > Theme File Editor) or via FTP. *Be extremely cautious editing these files directly.*
4. Locate and Remove the Related Products Code: Look for code that resembles this:
or any code that calls the `woocommerce_output_related_products` function. Remove this block of code.
5. Save the file.
6. Test your changes: Visit a product page to confirm the related products are gone.
Risks:
- Overwriting on Theme Update: Changes to core theme files will be overwritten during theme updates. Use a child theme to avoid this.
- Broken Site: Incorrect modifications to theme files can easily break your website.
- Code Complexity: Understanding the theme’s code structure can be challenging.
4. Using CSS (Least Recommended, Not a True Removal)
While technically possible, Check out this post: Woocommerce How To Add 0.50 Per Extra Product For Shipping using CSS to simply *hide* the related products section is generally not recommended. It doesn’t truly remove the related products; it just makes them invisible. The code is still being processed, which can impact performance.
How it works: Add CSS to your theme to hide the related products container.
Steps:
1. Identify the CSS Class or ID: Use your browser’s developer tools (right-click, “Inspect”) to find the Read more about How To Change Woocommerce Placeholder Image CSS class or ID of the container that holds the related products. Common examples include `.related.products` or `#related`.
2. Add the CSS: Add the following CSS to your theme’s customizer (Appearance > Customize > Additional CSS) or your theme’s stylesheet.
.related.products {
display: none !important;
}
/* OR */
#related {
display: none !important;
}
Adjust the selector based on the class or ID you identified.
3. Save your changes.
4. Test: Visit a product page to confirm the related products are hidden.
Disadvantages:
- Performance Impact: The related products code is still being processed, even though it’s hidden, which can slightly impact page load times.
- Not a Clean Solution: It’s more of a workaround than a proper removal.
Considerations Before Removing Related Products: Potential Cons
While removing related products can be beneficial in some cases, consider the potential downsides:
- Missed Sales Opportunities: Related products are designed to increase sales by showcasing other items customers might be interested in. Removing them could lead to missed opportunities to cross-sell or upsell.
- Reduced Engagement: Related products can keep customers engaged on your site for longer, exploring other items.
- Lower Average Order Value: By removing related products, you might reduce the average amount customers spend per order.
- Potential SEO Implications: Internal linking is good for SEO, and related products provide internal links to other products. Removing them might have a minor negative impact.
Alternatives to Complete Removal:
Instead of completely removing related products, consider these alternatives:
- Customize Related Products: Use a plugin or code to customize the algorithm that determines which products are displayed as related. Ensure only relevant items are shown.
- Reduce the Number of Related Products: Limit the number of related products displayed to avoid overwhelming customers.
- Replace Related Products with Upsells/Cross-sells: Instead of related products, display specific upsells or cross-sells that are strategically chosen to complement the current product. Many plugins offer features to manage upsells and cross-sells more effectively.
- Move the Related Products Section: Move the related products section further down the page to reduce its prominence.
Conclusion: Choosing the Right Method
Removing WooCommerce related products is a relatively simple task, but it’s crucial to choose the method that best aligns with your technical skills and desired level of control. Using a code snippet or plugin is generally the safest and most efficient approach. However, carefully consider the potential downsides before removing them altogether, and explore alternatives like customization or replacement with strategic upsells and cross-sells. Remember to always back up your website before making any changes! By carefully evaluating your needs and options, you can create a product page layout that maximizes conversions and provides a seamless shopping experience for your customers.
