Change “Add-to-Cart” text completely to “Add-to-Bag” HOW?

Hi there,

Glad you reached out, happy to help.

You can use this code snippet to replace the “Add to Cart” text with “Add to Bag” on the single product pages:

function custom_single_product_add_to_cart_text() {
return __( 'Add to Bag', 'woocommerce' );
}
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_single_product_add_to_cart_text' );

You can use this code snippet to replace the “Add to Cart” text with “Add to Bag” on the whole site:

function custom_add_to_cart_text() {
return __( 'Add to Bag', 'woocommerce' );
}
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' ); // For shop page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' ); // For single product page

Here is how to add the code snippet to your website using the Code Snippets plugin:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

Watch this demo screencast of what happens when the custom filter code is added to your website:
https://share.zight.com/JruEdbz7

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

Hi, thank you so much for your reply, Additionally, 1.) I only want my “add-to-bag” button text colour to be changed, I know it can be done by changing the global pallette colour but but I want to change it for only single product pages, for example it’s red and I want it to be black along with a small bag/cart icon.

2.) additionally, when we usually click on a product, it says “in-stock” and “out-of-stock” , These both text are red in colour because my global pallette is. So here what I want to do is to make the “in-stock” text darkgreen in colour and “out-of stock” dark red in colour, but only for single product pages.

thanks

Hi @someone3210,

You can use this custom CSS to change the Add to Cart background color, in-stock and out-of-stock font colors on the single product pages:

body.single-product.woocommerce button.button.alt {
 background:red;
}
body.single-product.woocommerce div.product .stock {
    color:red;
}

body.single-product.woocommerce div.product .out-of-stock {
	color:blue;
}

Here is how to add the custom CSS to your website:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-do-i-add-custom-css/

You can further adjust the colors to your preference:

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

Hi there,

We just want to follow-up if you managed to resolve this already.

This topic has been inactive for a month.

If you have further questions or need additional assistance, feel free to start a new topic or refer to our Kadence Help Center here: https://www.kadencewp.com/help-center

Please note that you can also submit a support ticket via these channels.

• FREE Users: https://www.kadencewp.com/free-support-tickets/
• Premium Users: https://www.kadencewp.com/premium-support-tickets/

Thank you for your understanding!
 
Kind Regards,
Michael Taro