Return to previous page

How to change "add to cart" background color in single products page and related

This topic has 9 replies, 2 voices, and was last updated 7 years, 8 months ago ago by Andrew Mitchell

audi008

Participant

August 9, 2016 at 03:07

Hello,

I am trying to change background color for “add to cart” button on single product page, plus related products button.

I already added some codes, but did not see any change,
I have already changed background color of button on shop page, but not sure why colors do not change on single product page?

can u plz let me know where to insert the proper codes?

thanks

Steven

#136044 Copied

8 Answers

audi008

Participant

August 9, 2016 at 07:31

Hi again,

I solved the some color change problems on related products and featured and latest products, however, I could not change the color for that big add to cart button on single product page, no matter what i tried.

Just wondering if u know the proper codes for this button color change? and hover color..
plus those small button, like review submit button, newsletter subscribe button… I dont know how to change these buttons color either.

Hope to have ur reply soon

thanks a lot

Steven

#136053 Copied
Andrew Mitchell

Support staff

August 9, 2016 at 07:37
Hello, we glad the you using your theme.

To change background color for “add to cart” button on single product page you should add code like this in to your custom css.
```
.single-product .cart .button{
	background-color: #f10;
}
```
To change background color for related products button on single product page you should add code like this in to your custom css.
```
.single-product .product-slider .slider .button {
    background-color: #b10db1;
}
```
Regards,
Andrew Mitchell
#136056 Copied
Andrew Mitchell

Support staff

August 9, 2016 at 07:58
To change hover background color for “add to cart” button on single product page use this code.
```
.single-product .cart .button:hover{
	background-color: #f10;
}
```
#136061 Copied
Andrew Mitchell

Support staff

August 9, 2016 at 08:36
Use this code to change reviews and submit button
```
.single-product .reviews_tab .submit,
.single-product .mc4wp-form-fields input[type="submit"]{
	background-color: #000;
}
```
```
.single-product .reviews_tab .submit:hover,
.single-product .mc4wp-form-fields input[type="submit"]:hover{
	background-color: #f15;
}
```
#136067 Copied
audi008

Participant

August 9, 2016 at 09:03

HI Thanks for quickly update

All ur codes works, but only hover color of single product add to cart big button does not change.

For another, submit button of newsletter form on home page does not change color either,
no problem on single product page..

Hope to see ur reply soon

cheers

Steven

#136073 Copied
Andrew Mitchell

Support staff

August 9, 2016 at 09:40
Change code for single product add to cart big button on this code
```
button.button.big.active:hover {
    background-color: red!important;
}
```
And change previous code for reviews and submit button on this code
```
.reviews_tab .submit, .mc4wp-form-fields input[type="submit"]{
	background-color: #000;
}
.reviews_tab .submit:hover, .mc4wp-form-fields input[type="submit"]:hover{
	background-color: #f15;
}
```
Regards,
Andrew Mitchell
#136079 Copied
audi008

Participant

August 9, 2016 at 11:33

Thanks a lot for help

Now all works

thanks

Steven

#136108 Copied

Andrew Mitchell

Support staff

August 9, 2016 at 12:14

You are welcome.

Regards,
Andrew Mitchell

#136114 Copied
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘How to change "add to cart" background color in single products page and related’' has been successfully resolved, and the topic is now closed for further responses

How to change "add to cart" background color in single products page and related

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection