Change colour of Add to cart button

Hi, willmorcos

Regarding to change text, paste the below code in the Code Snippets plugin & just change the text “Book Now” to your own:

add_filter('woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text');
function woo_custom_cart_button_text() {
return __('Book Now', 'woocommerce');
}

Regarding change background color, paste the below custom CSS in the theme’s custom CSS box ( Go to wp-admin > Appearance > Customize > Header settings > Custom CSS )

.single-product .product .single_add_to_cart_button.button{
	background-color: #333333;
}
.woocommerce .product .add_to_cart_button.button{
	background-color: #333333;
}

Let me know did it work!

Thanks

Hello Imraj

Thank you for your help. I have used the second custom CSS you have provided and it has changed the colour. The one thing I noticed is that when I hover over the button it goes purple. How do I change it to go green? Same colour as the price advertised?

Thank you.

Hi, willmorcos

For the hover effect use the below custom CSS:

.woocommerce button.single_add_to_cart_button.button.alt:hover{
	background-color: #77a464;
}

Thanks

Thank you Imraj.

That’s perfect!

Will I have to repeat this process every time I add a new product to my website?

Thank you.

Glad to help you!

No, you don’t need to repeat the process again, this works for all new product pages.

Thank you

That’s great to know.

Thank you Imraj.