How to Remove Add to Cart Button

Before answering this question, let’s answer another question “why should we remove add to cart or read more buttons anyway?”

There are could be different situations:

• Maybe it is just a part of an idea of your website design – so you would like to hide add to cart buttons only on shop page.
• Maybe you would like to disable add to cart buttons everywhere – both in archive and single product pages, in that case you’re turning your shop into a catalog.
• Or probably you may want to remove add to cart button for specific products only.

In this tutorial we only hide buttons, so products will remain available for purchase. If you want to make products completely non-purchasable, this tutorial is for you.

You can also do both. Because non-purchasable products still have “Read more” buttons instead of “Add to cart”. And here we are going to remove “Read more” button as well.

Remove Add to Cart Buttons on Shop page

If you are going to use this piece of code, the following will be affected:

• Shop page,
• Archive pages (product categories, product tags, search results etc),
• Upsells, cross-sells and related products sections.

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

You can add this code to your current theme functions.php file and here is the result.

You can also read my articles on how to remove product prices or the Sale! badge.

Specific Categories or Tags Only

But what if you do not need to remove the add to cart button from all the archive pages? Let’s say you need to remove it from certain categories or from related products section.

Conditional tags is the answer.

/*
 * Remove "Add to Cart" button from the product category "Uncategorized"
 *
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/remove-add-to-cart-button.html#specific-categories
 */
add_action( 'wp', 'rudr_remove_add_to_cart_product_categories' );

function rudr_remove_add_to_cart_product_categories(){
	if( is_product_category( 'uncategorized' ) ) {
		remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' );
	}
}

• is_product_category() – remove “Add to cart” from specific product category pages
• is_product_tag() – specific product tag pages,
• is_search() – the search results page only,
• is_shop() – from the WooCommerce shop page,
• You can use is_product() to remove “Add to cart” from related products / cross-sells section on single product pages or is_cart() to remove the button from Upsells,
• Oh, and yes, we can also use current_user_can() function if we are going to do it for specific user roles.

Specific Products Only

In the WooCommerce product loop it is also possible to use filter hook woocommerce_loop_add_to_cart_link to remove “Add to cart” from products with certain IDs or even for certain product types.

/**
 * Remove add to cart button for the product with ID = 10 AND for variable products
 *
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/remove-add-to-cart-button.html#specific-products
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'remove_add_to_cart_specific_products', 25, 2 );
			  
function remove_add_to_cart_specific_products( $add_to_cart_html, $product ) {
	
	if( 10 === $product->get_id() || $product->is_type( 'variable' ) ) {
		return '';
	}
	return $add_to_cart_html;
	
}

Remove Add to Cart Button on Single Product Page

Here we have just another WooCommerce action hook that we are going to remove.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

And it is also possible to do for specific products.

/**
 * Hide add to cart button for the product with ID = 10 on single product pages
 *
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/remove-add-to-cart-button.html#single_products
 */
add_action( 'wp', 'rudr_remove_add_to_cart_single_product' );

function rudr_remove_add_to_cart_single_product(){
	if( is_single( 10 ) ) { // "10" is a product ID as you remember
		remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
	}
}

WC_Product object can be used as well. The code below seems kind of complex but maybe it can give you some ideas or inspiration.

/**
 * Hide add to cart button for the product with ID = 10 and variable products on single product pages
 *
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/remove-add-to-cart-button.html#single_products
 */
add_action( 'wp', 'rudr_remove_add_to_cart_single_product' );

function rudr_remove_add_to_cart_single_product(){

	if( ! is_product() ) {
		return;
	}

	$product = wc_get_product( get_queried_object_id() );

	if( 10 === $product->get_id() || $product->is_type( 'variable' ) ) {
		remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
	}
}

Using CSS

And the last question – should I do it with CSS? I don’t think so. But if you disagree with me, you can use .add_to_cart_button and form.cart selectors and display:none property.

li.product .add_to_cart_button, .single-product form.cart{
	display:none;
}

# WooCommerce

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter