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

float:left
CSS styles.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.


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
Great help although took me a couple of minutes to spot the missing
;
on the$after
variable in themisha_before_after_btn()
function :)Great work
Thank you, fixed! :)
Hi Misha, can you please advice hook for Basket page? thanks!
Hey Alex,
There are a lot of hooks in the Basket page, could you please provide me more details?
Is there a way to target a specific product page using the products ID?
Yes, you can use
is_single()
WordPress conditional tag. For exampleThanks to Solve my problem you are gem
Thank You Sir. This helped me a lot
Hi Misha,
Is it possible to add
echo wc_get_stock_html( $product );
after the woocommerce_loop_add_to_cart_link?I’m hoping to be able to to display the product stock status under / after the add to cart button in the shop loop.
I’ve tried a few different ways but it either doesn’t do anyhting, or displays it as text rather than showing the stock status.
Thanks for your help!
Kind regards,
JP