Docs

[Stieben]

Hello,

I’m using Woocommerce for my shop and I would like to change the color of the ‘add to shopping cart’ button when hovering over it. Also I would like to change the color of the price text. Right now it is red, but it should be an other color!

Thank you!

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

button.single_add_to_cart_button.button.alt {
    color: #ddd;
    background-color: #efefef;
    border-color: #5b5b5b;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0,0,0,0.75);
}

.woocommerce .price > ins > .amount {
    color: #ddd;
}

Please change color code as per your requirement.

Thanks.

[Stieben]

Thank you for your reply! However I’m not getting the codes to work o.O
I changed the color codes to the ones that I wanted, but everything stays red :O

[Paul R]

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Stieben]

This reply has been marked as private.

[Joao]

Hi There,

In order that you can help, please make sure you have items added to your shop and provide us the wp admin credentials so we can take a closer look.

Thanks

[Stieben]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.woocommerce .price > ins > .amount {
  color : green;
}

button.single_add_to_cart_button.button.alt {
    color: #fff;
    background-color: #7AAA00;
    border-color: #7AAA00;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #7AAA00, 0 4px 9px rgba(0,0,0,0.75);
}
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: inset 0 3px 0 0 green;
}

The code does work, if you cant see the changes, please clean your browser cache and test it again.

Thanks

[Stieben]

Thank you! The price code works for me now, but the button code still keeps it red.. Even after I cleared my cache and restarted my computer. It still won’t work 🙁

[Stieben]

Oops, ignore that last message. Everything works great now! 🙂

Thank you so much!

[Rue Nel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts