How to Hide WooCommerce 'Add to Cart' While Keeping Inventory & Quantity

Streamlining Your E-commerce Flow: Hiding the 'Add to Cart' Button Effectively

Many e-commerce store owners leverage WooCommerce to create highly customized purchasing experiences. One common customization, particularly for businesses operating on a quote-based model or those with unique sales processes, is the need to hide the standard 'Add to Cart' button. This allows for alternative calls to action, such as 'Request a Quote' or 'Inquire Now,' while still utilizing WooCommerce's robust backend for product management and inventory tracking. However, maintaining this setup, especially after theme or plugin updates, can sometimes present a challenge, leading to the 'Add to Cart' button unexpectedly reappearing.

The good news is that you can effectively remove or hide the 'Add to Cart' button while fully preserving WooCommerce's critical inventory tracking capabilities and allowing customers to select quantities for their custom requests. This article will explore the most reliable methods to achieve this, offering both quick CSS solutions and more robust PHP-based approaches.

Understanding Inventory Tracking in WooCommerce

Before diving into technical solutions, it's crucial to understand how WooCommerce manages inventory. Inventory tracking is fundamentally tied to the products themselves and the order fulfillment process, not directly to the 'Add to Cart' button's visibility. When an order is placed (whether through a direct purchase or converted from a quote), WooCommerce adjusts stock levels accordingly. Therefore, hiding or removing the 'Add to Cart' button will not interfere with your ability to track product inventory, as long as a mechanism exists to eventually create an order that depletes stock.

Method 1: The Quick & Easy CSS Approach (Visual Hiding)

The simplest way to hide the 'Add to Cart' button is by using custom CSS. This method visually conceals the button from your customers without altering the underlying WooCommerce functionality. It's a fast solution, ideal for immediate fixes or when you prefer not to delve into code files.

How to Implement CSS:

  1. From your WordPress dashboard, navigate to Appearance > Customize.
  2. Click on Additional CSS.
  3. Paste the relevant CSS snippet into the text area.
  4. Click Publish to save your changes.

CSS Snippets:

To hide the 'Add to Cart' button specifically on single product pages:

/* Hide WooCommerce add to cart button on single product pages */
.single-product .single_add_to_cart_button {
    display: none !important;
}

If you need to hide the 'Add to Cart' button everywhere it appears, including on shop archives, category pages, and single product pages:

/* Hide WooCommerce add to cart button everywhere */
.add_to_cart_button, .single_add_to_cart_button {
    display: none !important;
}

Considerations for CSS:

  • Fragility: While easy, CSS-based hiding can sometimes be overridden by theme updates or conflicting plugin styles. The !important declaration helps, but isn't foolproof.
  • Visual Only: The button is still present in the page's HTML, just not visible. This isn't usually an issue but is worth noting for advanced customization.
  • Quantity Field: These CSS snippets generally hide only the button itself, preserving the quantity selector if it's a separate element. If the quantity field disappears, a more targeted solution might be needed.

Method 2: The Robust PHP Approach (Action Removal)

For a more permanent and robust solution, especially if you want to completely remove the 'Add to Cart' functionality from the server-side, using PHP hooks is the preferred method. This approach removes the button from the page's HTML entirely, making it less susceptible to theme or plugin conflicts.

How to Implement PHP:

PHP code should always be added to your theme's functions.php file. For safety and maintainability, it is highly recommended to use a child theme. This prevents your customizations from being overwritten when your main theme updates.

  1. Access your website's files via FTP or your hosting provider's file manager.
  2. Navigate to wp-content/themes/your-child-theme/.
  3. Open the functions.php file for editing.
  4. Paste the PHP snippet (excluding the opening tag if it's already present) at the end of the file.
  5. Save the file.

PHP Snippet for Complete Removal (Including Quantity Field):

This snippet removes the 'Add to Cart' button and its associated quantity field from both single product pages and shop loop/archive pages. If you need to retain the quantity selection, this method might be too aggressive.

// In functions.php or a custom plugin
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

Method 3: Hybrid Approach – PHP-Injected CSS for Quantity Retention

Often, the goal is to hide the 'Add to Cart' button but keep the quantity selector visible, especially for quote systems. While the direct PHP remove_action method might remove the quantity field (as it's often part of the same template), a hybrid approach using PHP to inject targeted CSS offers a robust solution that preserves quantity while hiding only the button.

PHP Snippet for Hiding Button While Retaining Quantity:

This snippet hooks into a WooCommerce action to add a CSS style block directly into the page, specifically targeting and hiding only the 'Add to Cart' button while leaving the quantity input intact.

// In functions.php or a custom plugin
add_action('woocommerce_after_add_to_cart_button', function() {
    echo '';
});

This method offers a good balance between robustness (as it's handled by PHP) and flexibility (as it only targets the button via CSS).

Best Practices for Customizations

  • Always Use a Child Theme: As mentioned, any PHP modifications should be done within a child theme to prevent updates from overwriting your work.
  • Backup Your Site: Before making any code changes, always create a full backup of your website.
  • Test Thoroughly: After implementing any code, clear your cache and test your product pages rigorously to ensure everything functions as expected. Check different product types (simple, variable, grouped) if applicable.
  • Review Plugin Settings: If you're using a 'Quote to Cart' or similar plugin, always re-check its settings after any major updates. Sometimes, options might reset or new ones become available that can manage the 'Add to Cart' button's visibility without custom code.

By carefully implementing these solutions, you can regain control over your WooCommerce product display, ensuring your custom sales processes function smoothly while maintaining essential backend operations like inventory management. Whether you opt for a simple CSS hide or a more integrated PHP approach, WooCommerce provides the flexibility to tailor your store to your exact business needs.

View original discussion
Share: