Before and After Add to Cart Hooks

In this tutorial I will show you how to add text or any HTML before and after add to cart buttons.

Before we continue to the example, I want to remind you that we have “Add to Cart” buttons on single product pages and in catalog or product archive pages.

On Single Product Pages

For single product pages there are 4 action hooks available:

• woocommerce_before_add_to_cart_button
• woocommerce_after_add_to_cart_button
• woocommerce_after_add_to_cart_quantity
• woocommerce_before_add_to_cart_quantity
• woocommerce_before_add_to_cart_form
• woocommerce_after_add_to_cart_form

What is the difference between them? I think you can even guess what it is. So, the hook woocommerce_before_add_to_cart_form will be fired a little bit earlier that woocommerce_before_add_to_cart_button, before <form> tag. And the same for after add to cart hooks.

Maybe it is better to look how it works on the picture

Now let’s take a look at some actual examples.

Before Add to Cart Button

Can be done easily with woocommerce_before_add_to_cart_button hook, example:

add_action( 'woocommerce_before_add_to_cart_button', 'mish_before_add_to_cart_btn' );

function mish_before_add_to_cart_btn(){
	echo '<p>Some custom text before</p>';
}

If you are going to use some conditions there, you can obtain current product ID with get_the_ID() function.

After Add to Cart Button

If you are going to add some custom text after “Add to Cart” button, woocommerce_after_add_to_cart_button hook should help you. Example of usage this hook

add_action( 'woocommerce_after_add_to_cart_button', 'mish_after_add_to_cart_btn' );

function mish_after_add_to_cart_btn(){
	echo '<p>Some custom text after</p>';
}

Let’s take a look at the result.

On Shop / Product Category Pages

Do you think the above hooks will work out the same in case you want to add some text on product archive pages? Nope, it is completely different here. But also simple.

Either you would like to display the text before the Add to Cart button or after – in both cases woocommerce_loop_add_to_cart_link should be ok for you.

add_filter( 'woocommerce_loop_add_to_cart_link', 'mish_before_after_btn', 10, 3 );

function mish_before_after_btn( $add_to_cart_html, $product, $args ){

	$before = '<p>Some custom text before</p>'; // Some text or HTML here
	$after = '<p>Some custom text after</p>'; // Add some text or HTML here as well

	return $before . $add_to_cart_html . $after;
}

You may also ask – is it possible to do only for specific products? Easy-breezy! Have you noticed $product variable available in the hook? Yep, it is exactly what you think – a WC_Product object (to say exactly, it may be WC_Product_Simple, WC_Product_Variable or even WC_Product_Subscription depending on what kind of product it is).

Once we have a product object available for usage, our hands are untied now and we can perform any possible conditions. For example we can check product ID with $product->get_id() or check if it is currently on sale with $product->is_on_sale().

Enough talk, let’s do something!

add_filter( 'woocommerce_loop_add_to_cart_link', 'mish_before_after_btn', 10, 3 );

function mish_before_after_btn( $add_to_cart_html, $product, $args ){

	// do nothing if this product is currently on sale
	if( $product->is_on_sale() ) {
		return $add_to_cart_html;
	}
	
	...

Here we are.

# WooCommerce, Cart

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