Return to previous page

Color 'add to cart' button - by Ton

This topic has 8 replies, 3 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler

Ton

Participant

September 19, 2017 at 19:59

Hi,

The color of the ‘add to cart’ button is now black. How can I change it so it is the same as the ‘main color’?

Thanks, Ton.

#172915 Copied Theme version: 4.5 WooCommerce version: 4.8.1

7 Answers

Amzy Leel

Participant

September 20, 2017 at 05:43

Hi,

add this css code in 8theme options > styling > custom css > global custom css

.cart-bag, .cart-bag:before { border: 1px solid #fff; }

change the color code to your ‘main color’ code

Regards,

#172925 Copied

Ton

Participant

September 20, 2017 at 07:48

Hi Amzy,

Sorry if I was not clear enough.
I meant these buttons: https://prnt.sc/gncjbz
Is that possible?
Would it not be nicer if they have the same color as a ‘main color’?

Thanks again, Ton

#172940 Copied
Rose Tyler

Support staff

September 20, 2017 at 08:15
Hello,

Please try to change previous code to:
```
button.add_to_cart_button.ajax_add_to_cart.single_add_to_cart_button.button.alt {
    background-color: #ae9a64;
    border-color: #ae9a64;
}
.single_add_to_cart_button:hover {
    background-color: rgb(187, 173, 136) !important;
    border-color: rgb(187, 173, 136) !important;
}
.view-color-dark .button, .view-color-dark .show-quickly, .view-color-dark .yith-wcwl-add-button a.add_to_wishlist {
    background-color: #ae9a64;
}
.view-color-dark .yith-wcwl-add-button a.add_to_wishlist, .view-color-dark .show-quickly  {
    border-color: #a79155;
}
.view-color-dark .button:hover, .view-color-dark .show-quickly:hover, .view-color-dark .yith-wcwl-add-button a.add_to_wishlist:hover {background-color: rgb(187, 173, 136) !important;}
```
Regards
#172943 Copied
Ton

Participant

September 20, 2017 at 08:44

Hi Rose,

Almost there 🙂
On the single productpage the ‘add to cart’ remains black.
Only when you hover you see the desired color.

By the way: you even looked up the right color code! Very much appreciated.

Thanks, Ton.

#172949 Copied

Rose Tyler

Support staff

September 20, 2017 at 09:02

Please, clear cache and check http://prntscr.com/gndbg8.

Regards

#172954 Copied

Ton

Participant

September 20, 2017 at 09:18

Fabulous Rose,

You make me happy. Again.

Cheers, Ton

#172959 Copied

Rose Tyler

Support staff

September 20, 2017 at 09:22

You’re welcome!

Regards

#172960 Copied
Tagged: add to cart, color, templates, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)