Blog / WooCommerce/ How to Hide Product Price, Quantity, and Add to Cart Button in WooCommerce for B2B Sites

How to Hide Product Price, Quantity, and Add to Cart Button in WooCommerce for B2B Sites

WooCommerce 外贸网站:如何隐藏商品价格、数量及购买按钮

Why Hide Prices and Purchase Functions on International Trade Websites?

Many B2B independent websites for international trade do not sell directly online. Their primary goal is to generate leads and inquiries. In such cases, displaying product prices, stock quantities, and 'Add to Cart' buttons can distract customers from the inquiry process. Public pricing may also affect subsequent negotiation. Therefore, hiding these sales elements and focusing the page on 'Request a Quote' or 'Contact Us' buttons better aligns with business needs.

Method 1: Hide Price and Add to Cart Button via Code (Recommended)

Add the following code to the end of your current WordPress theme's functions.php file. This is the most flexible and update-safe method.

// Hide WooCommerce product price
add_filter( 'woocommerce_get_price_html', 'custom_hide_price' );
function custom_hide_price( $price ) {
    return ''; // Return empty string to hide price
}

// Hide WooCommerce Add to Cart button
add_action( 'init', 'custom_hide_add_to_cart_button' );
function custom_hide_add_to_cart_button() {
    // Remove button from shop/archive pages
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    // Remove button from single product pages
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}

Code Explanation:

  • woocommerce_get_price_html filter: Modifies price HTML; returning an empty string hides it.
  • init action hook: Safely removes the actions that render the 'Add to Cart' button during WordPress initialization.
  • Using custom function names (e.g., custom_hide_price) helps prevent conflicts with future plugin updates.

Important Notes

  • Always create a child theme or backup your theme files before making changes.
  • After the code takes effect, prices and buttons will disappear from the front end (including shop and product pages), but the admin interface remains unaffected.

Method 2: Hide the Quantity Input Field

The quantity input field typically appears on the single product page. The recommended approach is to use CSS, avoiding direct modification of core template files.

Hide via CSS

Add the following code in your WordPress dashboard under Appearance → Customize → Additional CSS:

/* Hide quantity input on product pages */
.quantity, .qty {
    display: none !important;
}
/* Optionally hide its label */
label[for="quantity"] {
    display: none !important;
}

This method is simple, quick, and won't break with WooCommerce updates.

Not Recommended: Modify Template Files (Legacy Method)

Older tutorials might suggest editing the quantity-input.php template file. This is strongly discouraged because:

  1. Direct plugin file edits are overwritten on updates.
  2. Template file paths and structures can change.
  3. Using CSS or action hooks is more professional and maintainable.

Complete Solution & Best Practices

For a typical international trade lead-generation site, follow these steps:

  1. Use Code (Method 1): Hide all prices and the 'Add to Cart' button.
  2. Use CSS (Method 2): Hide the quantity input field.
  3. Enhance Lead Capture: Use a WooCommerce hook or page builder to add a prominent 'Request Quote' or 'Contact Us' button (linking to a form) where the cart button was.
  4. Test Thoroughly: Clear your site cache and verify the elements are hidden on shop and product pages, ensuring other site functions work correctly.

This combined approach quickly transforms your WooCommerce store into a professional B2B product showcase and lead-generation platform, better serving international trade operations.

Post a Comment

Your email will not be published. Required fields are marked with *.