Change after Add To Cart button text size

Have you tried adding CSS to your style.css file?

.second_content {
    //your css here
    font-size: 10px;
    margin-top: 10px;
    color: #2c2c2c;
}

• This reply was modified 4 years, 1 month ago by Dekadinious. Reason: typo

Hi there,

> It works well, but what do I need to add in order for changing the text size top margin and color?

Could send us the URL or a screenshot that shows the changes you need? In general some quick custom CSS should do.

Kind regards,

What URL do you need?

This is an example for product page

https://www.barillio-barware.com/product/silver-bartender-kit/

I want the text to have a bit of margin from the button itself and also reduce the font size a bit and make it bold.

The piece from before I’ve added to functions.php

• This reply was modified 4 years, 1 month ago by yarintosh.

If you don’t want to do it in the style.css you can do it inside the HTML-tag itself.

<div class="second_content" style="font-size: 14px; line-height: 1.2; font-weight: 600; margin: 1rem 0;">

Where should I add it exactly?

add_action( ‘woocommerce_after_add_to_cart_button’, ‘add_content_after_addtocart_button_func’ );

function add_content_after_addtocart_button_func() {

// Echo content.

echo ‘<div class="second_content" style="font-size: 14px; line-height: 1.2; font-weight: 600; margin: 1rem 0;"> <--- HERE :)Free and fast shipping, 24 hour customer service, Lifetime warranty and easy returns</div>’;

}

I’ve noted the place in your code above ??

Thanks!

Tried to add it but it messed up the whole page and made the text also disappear, added exactly where you said, any idea why?

Screenshot:
https://pasteboard.co/JwwHFCe.png

?

Can you please paste your code again? Please use the “CODE”-tags in the editor.

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );

function add_content_after_addtocart_button_func() {

// Echo content.

echo '<div class="second_content" style="font-size: 14px; line-height: 1.2; font-weight: 600; margin: 1rem 0;>Free and fast shipping, 24 hour customer service, Lifetime warranty and easy returns</div>';

}
add_action( 'woocommerce_after_add_to_cart_button', 'show_content_after_add_to_cart' );
function show_content_after_add_to_cart() {
     echo "<img src='https://www.barillio-barware.com/wp-content/uploads/2020/10/11597194742ijzqyqdtyc-removebg-preview-6.png' >";
}

• This reply was modified 4 years, 1 month ago by yarintosh.

You just omitted the last " by accident after margin: 1rem 0; ??

I should be margin: 1rem 0;"

You are absolutely right!
Thank you so much it’s working now.

Can you help me with one more question?
I’ve added a trust seal badge image under the add to cart using this code

add_action( 'woocommerce_after_add_to_cart_button', 'show_content_after_add_to_cart' );
function show_content_after_add_to_cart() {
     echo "<img src='https://www.barillio-barware.com/wp-content/uploads/2020/10/11597194742ijzqyqdtyc-removebg-preview-6.png' >";
}

How can I do the same for the checkout page?

Yes, you can use one of these hooks to add the same action:

https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

You don’t need to create the function again, just add a new line with:

add_action('YOUR_CHOSEN_HOOK', 'show_content_after_add_to_cart');

It’s been a while since we heard from you, so I’m marking this thread resolved. Hopefully, you’ve been able to resolve this, but if you haven’t, please open up a new topic and we’ll be happy to help out.