Return to previous page

Buy Button Change Colour - by belusad - on WordPress WooCommerce support

This topic has 9 replies, 3 voices, and was last updated 8 years, 4 months ago ago by Stan Russell

belusad

Participant

December 22, 2015 at 09:30

How can I change the color of the Buy button (it is black by default and changes to the main colour on hover)?

Please, contact administrator
for this information.

#105393 Copied

8 Answers

Robert Hall

Support staff

December 22, 2015 at 09:47

Hello,

Could you please clarify with more details what exactly button you want to change and show us screenshots? Do you mean ‘add to cart’?

Also please provide us with link to the page.

Regards,
Robert Hall.

#105396 Copied

belusad

Participant

December 22, 2015 at 10:32

#105407 Copied Theme version: latest WooCommerce version: latest
Robert Hall

Support staff

December 22, 2015 at 10:47
Please use the following code in Theme Options->Custom CSS->Global Custom CSS.
```
.slide-item .progress-button {
    background: #000;
    color: #fff;
}
.slide-item .progress-button:hover{
    background: #fff;
    color: #000;
}
```
Regards,
Robert Hall.
#105412 Copied
Stan Russell

Participant

December 22, 2015 at 10:52
Hello belusad,

for single product page ‘add to cart’ button
please add following css code to your custom.css file:
```
.single_add_to_cart_button:hover{
background-color:#252525
}
```
Regards,
Stan Russell.
#105413 Copied
belusad

Participant

December 22, 2015 at 12:18

For the single product page, do you mean the style.css file or the default.custom.css file?

Also, how do I change the button on the main shop/categories page. Theme Options->Custom CSS->Global Custom CSS only changed it on the index page.

Thanks a lot!

#105429 Copied
Stan Russell

Participant

December 22, 2015 at 13:34
Hello,

you are right. You may add css code to Theme Options->Custom CSS->Global Custom CSS too

Please try following code:
```
.products-grid .etheme_add_to_cart_button:hover {
  color:red;
  background-color:green;
}
```
You may use any color name you want in this code.

Regards,
Stan Russell.
#105444 Copied
belusad

Participant

December 23, 2015 at 12:35

Thanks a lot! Can you help me with these buttons, too? I couldn’t really detect them correctly in the code, sorry.

#105580 Copied
Stan Russell

Participant

December 23, 2015 at 13:27
Hello,

try this code:
```
#order_review .place-order .button{
 color:red;
 background-color:red
}
#order_review .place-order .button:hover{
 color:red;
 background-color:green
}
```
```
.widget_shopping_cart_content .btn.filled{
 color:red;
}
.widget_shopping_cart_content .btn.filled:hover{
 color:green
}
```
```
.checkout_coupon .btn.big{
  color:red
  }
.checkout_coupon .btn.big:hover{
  color:green
}
```
Regards,
Stan Russell.
#105585 Copied
Viewing 9 results - 1 through 9 (of 9 total)