Return to previous page

Add to cart button Styling using custum CSS

This topic has 5 replies, 3 voices, and was last updated 8 years, 9 months ago ago by Eva Kemp

Ali Akil

Participant

August 2, 2015 at 19:24

Hi, need to know the class of the add to cart button in home page, shop page and in single product page. I used the tool in chrome and it says .button. this class is for every button in the template. please hover and normal.

thanks.

#78145 Copied

4 Answers
Jack Richardson

Support staff

August 3, 2015 at 08:02
Hello,

If you want to change text color for “Add to Cart” button use this code:
```
a.button.etheme_add_to_cart_button.product_type_simple {
  color: red;
}
a.button.etheme_add_to_cart_button.product_type_simple:hover {
  color: grey;
}
```
This is for home page and shop page.

For single product page use this code:
```
.single-product-page .product-info .single_add_to_cart_button {
  color: #fff;
}
.single-product-page .product-info .single_add_to_cart_button:hover {
  color: #000;
}
```
Best regards,
Jack Richardson.
#78169 Copied
Ali Akil

Participant

August 3, 2015 at 15:33

What about the background color? thanks

#78281 Copied

Ali Akil

Participant

August 3, 2015 at 15:47

got it thanks 🙂

#78285 Copied

Eva Kemp

Support staff

August 3, 2015 at 19:31

Hello,

You’re welcome.

Regards,
Eva Kemp.

#78337 Copied
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Add to cart button Styling using custum CSS’' has been successfully resolved, and the topic is now closed for further responses

Add to cart button Styling using custum CSS

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection