Return to previous page

Change add to cart colorand remove hover

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

donsokoli

Participant

December 10, 2014 at 11:42

Hi guys,

I’ve been trying for a day to change the color on the add to cart button, i managed to change the font size but the color is not working in the custom css.

These are the buttons i want to change color on and remove hover function.

– Change color on “CHECKOUT” button on the cart page and the cart in the header.
– Change color on “add to cart” in the product page
– Change color on “Place order” on the checkout page.
– Change font size on “place order” and make the button width wider on the checkout page.

My hex value is: #00b200
Thanks i advance.

#28813 Copied

17 Answers

Eva Kemp

Support staff

December 10, 2014 at 14:04

Hello,

Do you want to change background color of the buttons or font color of the text in the buttons?
Please provide us a link to your site.

Thank you.
Regards,
Eva Kemp.

#28841 Copied

donsokoli

Participant

December 10, 2014 at 14:34

Hi,

Thanks for the quick answer.

I want to change the background color.

Also is there a way to quicky hide the produkt description on the product page were you can back and forth to the products?

Please, contact administrator
for this information.

#28846 Copied
Robert Hall

Support staff

December 10, 2014 at 15:19
Hello,

Please add following code into custom.css file.
```
.single_add_to_cart_button,
.btn.filled.active,
.btn.filled:hover,
.button.big{
background:#00b200;
}
.button.big{
padding: 0 50px !important;
font-size:16px;
}
```
Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#28851 Copied
donsokoli

Participant

December 10, 2014 at 17:54

Hi,

It works perfect, however, when you move the pointer on the buttom it still hovers to this golden color.

Also the Checkout button on the cart page & on the header hasn’t changed color, still black 🙂

#28895 Copied
Robert Hall

Support staff

December 10, 2014 at 18:40
Also add this code.
```
.shopping-container .btn.border-grey,
.shopping-container .btn.border-grey:hover,
.btn.filled,
.checkout-button{
background:#00b200;
}
```
Regards,
Robert Hall.
#28900 Copied
donsokoli

Participant

December 10, 2014 at 18:51

Thank you a lot.

The view cart button became green as well though, not my intention 🙂

#28904 Copied
Robert Hall

Support staff

December 10, 2014 at 19:04
You’re welcome! Please replace that code
```
.shopping-container .btn.border-grey,
.shopping-container .btn.border-grey:hover,
.btn.filled,
.checkout-button{
background:#00b200;
}
```
to
```
.btn.filled,
.checkout-button{
background:#00b200;
}
```
Regards,
Robert Hall.
#28908 Copied
donsokoli

Participant

December 10, 2014 at 19:25

Hi,

I just updated the code, please take a look at the shop (sent the url in private, still shows green on both if you add a product to the cart and move the pointer to the cart in the header)

Please, contact administrator
for this information.

#28910 Copied

Robert Hall

Support staff

December 10, 2014 at 19:49

Now green color has only one button. Look at screenshot: http://prntscr.com/5fc8f9
Do you want to remove green color from second button?

Regards,
Robert Hall.

#28914 Copied

donsokoli

Participant

December 10, 2014 at 22:48

Hi Robert,

No it’s perfect! Thank you so much, you saved me hours of work. I just forgot to clear my cache so everything looked green for some reason.

Last thing, please don’t hate me, how do i remove the black line in the green button? There is a black line around it 🙂

#28934 Copied
Robert Hall

Support staff

December 10, 2014 at 22:58
Try to add this code.
```
.btn.filled{
border-color: #00b200;
}
```
Regards,
Robert Hall.
#28936 Copied
donsokoli

Participant

December 11, 2014 at 10:49

Hi Robert,

Thanks for everything.
God bless.

#28988 Copied

Robert Hall

Support staff

December 11, 2014 at 11:06

Hello,

You’re welcome!
We will be very grateful if you could leave a rating for our theme and your review.
http://themeforest.net/item/royal-multipurpose-wordpress-theme/8611976

Regards,
Robert Hall.

#28991 Copied

donsokoli

Participant

December 11, 2014 at 11:18

Hi Robert,

I have commented and voted 5 stars as you guys deserve.

Robert, is there an easy way to hide The product description in the product page? http://prntscr.com/5fk3eu? Can it be hidden with CSS? I have tried, but didn’t work well 🙂

#28992 Copied
Robert Hall

Support staff

December 11, 2014 at 11:57
Thank you!
Please add following code into custom.css file.
```
.product-information .short-description{
display:none;
}
```
Regards,
Robert Hall.
#28998 Copied
donsokoli

Participant

December 11, 2014 at 12:06

Hi robert,

That removed the description completely, i just wanted to remove the following: http://prntscr.com/5fkf8q

#29002 Copied

Eva Kemp

Support staff

December 11, 2014 at 13:15

Hello,

Please add this code in custom.css:
.meta-title { display: none !important; }

Thank you.
Regards,
Eva Kemp.

#29015 Copied
Tagged: add to cart, change cart color, color customization, easy customization, remove hover, woocommerce wordpress
Viewing 18 results - 1 through 18 (of 18 total)