Return to previous page

Single Products Page Button - by rkunderground

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

rkunderground

Participant

February 11, 2017 at 02:58

How do I change the add to cart button? I want to change the color.

#154518 Copied

9 Answers
Olga Barlow

Support staff

February 11, 2017 at 12:52
Hello,

I have added the following code in child theme style.css
```
.product-content .single_add_to_cart_button{
    background-color: #ca3110;
    border-color: #ca3110;
}
.product-content .single_add_to_cart_button:hover{
    background-color: #9e2c13 !important;
    border-color: #9e2c13 !important;
}
```
You can change the color if you want another.

Regards
#154548 Copied
rkunderground

Participant

February 11, 2017 at 17:12

wow, thanks Olga. you people are so nice over there

#154555 Copied

Olga Barlow

Support staff

February 13, 2017 at 09:15

Hello,

You are welcome! Feel free to ask if you need any help.

Regards

#154617 Copied

rkunderground

Participant

February 15, 2017 at 05:35

Hi. I’m trying to copy your code to change the “checkout”, “update cart” and “proceed to checkout” button, but I’m messing it up. Help please.

Please, contact administrator
for this information.

#154827 Copied
Rose Tyler

Support staff

February 15, 2017 at 08:14
Hello,

Please, use this code:
```
.widget_shopping_cart_content .btn-checkout.wc-forward {
    background-color: #ca3110;
    border-color: #ca3110;
}
.widget_shopping_cart_content .btn-checkout.wc-forward a:hover {
    background-color: #9e2c13 !important;
    border-color: #9e2c13 !important;
}
.woocommerce-cart .actions .btn.gray{
   background-color: #ca3110;
   border-color: #ca3110;
}
a.checkout-button.button.alt.wc-forward {
    background-color: #ca3110;
    border-color: #ca3110;
    color:white;
}
a.checkout-button.button.alt.wc-forward:hover{
    background-color: #9e2c13;
    border-color: #9e2c13;
    color:white;
}
```
Regards
#154833 Copied
rkunderground

Participant

February 15, 2017 at 15:23

Thank you for the codes. I feel bad for asking for these codes because I want to learn the css. However, I am having difficulty finding the proper names to use in the css code.

Now I would like to change the “proceed to PayPal” button at checkout because it’s all white and invisible.

Also, in the orders section, the “go shop” is barely visble in gray, and white in hover.

Can you print screen the element area where you get the names from? I want to learn how you compose the css code.

Thanks

Please, contact administrator
for this information.

#154881 Copied
Rose Tyler

Support staff

February 15, 2017 at 15:40
Hello,

You can use developer tools to inspect elements, for example https://developer.chrome.com/devtools http://prntscr.com/e92n1r https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/
```
.woocommerce-checkout-review-order #place_order {
    background-color: black;
    border-color: black;
}
.woocommerce-message .button {
    background-color: black;
}
.woocommerce-message .button:hover {
    background-color: black;
}
```
Regards
#154886 Copied
rkunderground

Participant

February 15, 2017 at 15:49

Thank you Rose. I’m going to reverse engineer what you just did.

I’m still having trouble changing the color of the “go shop” button in the orders section of my account.

#154888 Copied
Rose Tyler

Support staff

February 15, 2017 at 16:03
Hello,

Oh I see, please, use this code:
```
.woocommerce-MyAccount-content .woocommerce-Button {
    background-color: black;
    border-color: black;
}
.woocommerce-MyAccount-content .woocommerce-Button:hover {
    background-color:  black;
    border-color: black;
}
```
Regards
#154892 Copied
Viewing 10 results - 1 through 10 (of 10 total)