WooCommerce: How to Remove Related Products from the Cart Page (And Why You Might Want To)
Introduction:
WooCommerce, the leading e-commerce platform for WordPress, is renowned for its flexibility and customizability. One common feature that store owners often want to tweak is the Check out this post: How To Display The Shop Page With Woocommerce “Related Products” section. While generally designed to boost sales by suggesting complementary items, sometimes displaying related products on the cart page can be counterproductive. This article will explore how to remove related products from the WooCommerce cart, outlining the reasons for doing so and providing clear, step-by-step instructions. By removing related products, you can streamline the customer’s checkout experience and potentially improve your conversion rates.
Main Part: Removing Related Products from the WooCommerce Cart
The related products section is typically displayed on single product pages, but rarely are they intended for the cart. We will focus on hiding/removing them from the cart page when they are inadvertently displayed there. There are several ways to remove these related products, ranging from simple CSS solutions to more robust code snippets.
Why Remove Related Products from the Cart Page?
Before diving into the how-to, let’s understand why you might want to remove related products from your cart page:
- Reduced Cart Abandonment: Distracting customers with additional choices on the cart page can lead to indecision and potentially abandoned carts. The goal is to Explore this article on How To Install Woocommerce Pages encourage checkout, not further browsing.
- Streamlined User Experience: A clean and focused cart page allows customers to easily review their order and proceed to checkout without unnecessary distractions. A smooth checkout process encourages completion.
- Eliminate Confusion: Displaying related products in the cart might confuse customers, especially if they perceive them as already included in their order.
- Mobile Optimization: On smaller screens, related products can take up valuable screen real estate, pushing essential cart information further down the page.
Methods for Removing Related Products
Here are a few methods you can use to remove related products from your WooCommerce cart:
#### 1. Using CSS (Quick and Dirty):
This is the simplest method, but it simply hides the related products section using CSS. It doesn’t actually remove the code, but it makes them invisible.
1. Inspect the Cart Page: Open your WooCommerce cart page in your browser. Right-click on the related products section and select “Inspect” (or similar, depending on your browser).
2. Identify the CSS Class/ID: Look for the CSS class or ID that targets the related products section. It might be something like `.related`, `.related-products`, or `#related-products-section`.
3. Add Custom CSS: Go to your WordPress dashboard and navigate to Appearance -> Customize -> Additional CSS.
4. Add the CSS Code: Add the following CSS code, replacing `YOUR_CSS_SELECTOR` with the actual selector you found:
.woocommerce-cart .related {
display: none !important;
}
/* OR */
#related-products-section {
display: none !important;
}
Important: The `!important` declaration ensures that your CSS rule overrides any conflicting styles.
#### 2. Using a Code Snippet (Recommended):
This method is more robust and completely removes the related products functionality from the cart page. This is the recommended approach as it avoids unnecessary code execution.
1. Access your `functions.php` file: This method involves adding code to your theme’s `functions.php` file. Important: It’s highly recommended to use a child theme to avoid losing your changes when your parent theme is updated. Alternatively, you can use a code snippets plugin like “Code Snippets” (available in the WordPress plugin directory).
2. Add the Code Snippet: Add the following code snippet to your `functions.php` file (or code snippets plugin):
/**
function custom_remove_related_products_from_cart() {
remove_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cross_sell_display’ );
}
add_action( ‘woocommerce_cart_collaterals’, ‘custom_remove_related_products_from_cart’, 1 );
Explanation:
- The `remove_related_products_cart` function uses the `gettext` filter to effectively hide the “Related products” heading. It checks if it’s the cart page and if the text being translated is “Related products” in the WooCommerce domain. If both conditions are met, it replaces the heading with an empty string.
- The `custom_remove_related_products_from_cart` function removes the `woocommerce_cross_sell_display` function call from the `woocommerce_cart_collaterals` action, which is what normally displays cross-sells (often used as related products) on the cart page.
#### 3. Using a Plugin:
While code snippets are generally preferred for performance, some users may prefer using a plugin. There are several plugins available that allow you to customize your WooCommerce cart page, including removing related Explore this article on How To Speed Up Woocommerce Store products. Search the WordPress plugin directory for keywords like “WooCommerce cart customization” or “remove related products.” Remember to choose a well-rated and actively maintained plugin.
Conclusion:
Removing related products from the WooCommerce cart page can significantly improve the user experience and potentially increase conversion rates. Whether you choose the quick CSS method, the robust code snippet solution, or a dedicated plugin, the key is to test the results and ensure that the changes positively impact your store’s performance. By focusing on a streamlined and distraction-free checkout process, you can encourage customers to complete their purchases and foster a more positive shopping experience. Prioritize a clean and focused checkout to maximize sales.
