Return to previous page

WooCommerce product page: How to change the colour of Social Share Buttons and Add-to-Cart Button

This topic has 18 replies, 7 voices, and was last updated 8 years, 7 months ago ago by Jack Richardson

tosnu

Participant

August 17, 2015 at 19:29

Hi,

How do we change the colour of “ADD-to-Cart” Button and social share buttons on a product page.

Thanks!

#80505 Copied

17 Answers
Robert Hall

Support staff

August 17, 2015 at 19:44
Hello,

You can use the following code in Global Custom CSS (Theme Options->Custom CSS).
```
.product-information .cart button[type="submit"]{
    background-color: red;
}
.menu-social-icons i{
background-color: red;
}
```
Regards,
Robert Hall.
#80510 Copied
addingadds

Participant

August 23, 2015 at 10:19

And where do i change the textcolor on the “add to cart” button ?

#81781 Copied
Jack Richardson

Support staff

August 24, 2015 at 08:32
Hello,

Please use this css code:
```
.product-information .cart button[type="submit"]{
   color: red;
}
```
Best regards,
Jack Richardson.
#81826 Copied
addingadds

Participant

August 28, 2015 at 14:26

it does not seem to work ?

Its like it still is the same ?

It only works on “hover

Please, contact administrator
for this information.

#82984 Copied
Jack Richardson

Support staff

August 28, 2015 at 14:30
Hello,

Please try this code instead:
```
.product-information .cart button[type="submit"] {
      color: white !important;
}
```
Best regards,
Jack Richardson.
#82987 Copied
tasakaal

Participant

September 14, 2015 at 13:55

I change coupon and checkout buttons and add cart text colour with custom css code. Now I need to change add cart button hover and frame colour. But codes what I found from this topics they just dont works on my site.

#86652 Copied Theme version: woopress v 2.3 WooCommerce version: woocommrce v 4.3
Jack Richardson

Support staff

September 14, 2015 at 15:27
Hello @tasakaal,

Please use this css code:
```
a.btn.border-grey.product_type_simple:hover {
    color: white !important;
    background-color: black;
    border-color: blue;
}
```
Write your color values.

Best regards,
Jack Richardson.
#86679 Copied
tasakaal

Participant

September 14, 2015 at 18:57

HI

Thank You, what about the black hover? Can I change this also?

Regards,
P

#86773 Copied Theme version: woopress v 2.3 WooCommerce version: woocommrce v 4.3

tasakaal

Participant

September 14, 2015 at 19:16

Hi, I need to start with blue bold text and the blue border.

#86775 Copied Theme version: woopress v 2.3 WooCommerce version: woocommrce v 4.3

Eva Kemp

Support staff

September 14, 2015 at 19:45

Hello,

Please clarify what you mean with “black hover”.
Do you want to set blue bold text and the blue border when hovering “Add to Cart” button?

Regards,
Eva Kemp.

#86784 Copied

tasakaal

Participant

September 14, 2015 at 20:01

Hi, Black hover is not importat. We need button with white backround, blue text and blue border. when its active then backround should be blue and text white. Is it possible?

#86791 Copied Theme version: woopress v 2.3
Jack Richardson

Support staff

September 15, 2015 at 07:51
Hello @tasakaal,

Please use this css code:
```
a.btn.border-grey.product_type_simple {
    color: blue !important;
    background-color: white;
    border-color: blue;
}
```
Best regards,
Jack Richardson.
#86886 Copied
tasakaal

Participant

September 17, 2015 at 10:52

HI,

With add cart buttons now we ok. How we can change button product filtering swiching hidden sidebar.
Same story with button place order on checkout page and single product page add cart button.

Regards,
Peeter

#87470 Copied Theme version: woopress v 2.3 WooCommerce version: woocommrce v 4.3

tasakaal

Participant

September 17, 2015 at 10:56

HI,

One button more 🙂 Return to shop (when cart is empty).

Regards,
Peeter

#87472 Copied

Brian Johnson

Member

September 17, 2015 at 11:01

Hello

You may try this code:
.woocommerce-cart .empty-cart-block .btn {background:red!important;}

Regards
Brian Johnson

#87475 Copied

tasakaal

Participant

September 22, 2015 at 11:17

HI,

Can I change these buttons and how?

Regards,
Peeter

#88562 Copied
Jack Richardson

Support staff

September 22, 2015 at 11:48
Hello,

Please use this code:
```
.empty-cart-block .btn.filled.active {
  color: blue !important;
  background-color: white;
  border-color: blue;
}
```
Best regards,
Jack Richardson.
#88576 Copied
Tagged: add to cart button, colour change, customization, social share buttons, themes, woocommerce, wordpress
Viewing 18 results - 1 through 18 (of 18 total)