[Plugin: WooCommerce – excelling eCommerce] Change color 'add to cart'

What is the name of your theme?

I’m using the Twenty Twelve theme.

Try this code to and adjust the color # to your liking. I hope this helps!

a.button,.button.alt, .button, input.button, button.button, a.comment-reply-link, #commentform #submit, #btn-cart a, #btn-cart a span.btn-cart-inner {
background: #77BED2;

Put that code into your custom CSS.

Meevi,
That’s the idea, but not complete. In the WooCommerce Settings under Styles and Scripts I set the colors I wanted for my buttons (Primary), but only got the “Place Order” and “Proceed to Checkout” buttons to be the green color I wanted.

Using the code you posted, changed all the buttons to the same color like you said, but it’s missing all the code to make it purty…

Use the code below to keep the gradients, hover effects, and such. #339e78 is my green color. Change it to the color you want. Then play with the other #colors to get the final look you want.

I found the styling in the woocommerce.css file, and put this code in my theme css file so it’s not overwritten during a plugin update.

Thanks for the lead!

See it here: https://100DollarBillCards.com or https://upstairsroom.net/ecommerce

a.button,
.button.alt,
.button,
input.button,
button.button,
a.comment-reply-link,
#commentform #submit,
#btn-cart a,
#btn-cart a span.btn-cart-inner {
	background:#339e78!important;
	background:-webkit-gradient(linear,left top,left bottom,from(#339e78),to(#27775b))!important;
	background:-webkit-linear-gradient(#339e78,#27775b)!important;
	background:-moz-linear-gradient(center top,#339e78 0%,#27775b 100%)!important;
	background:-moz-gradient(center top,#339e78 0%,#27775b 100%)!important;
	border-color:#1a513d!important;
	color:#e0f0ea!important;
	text-shadow:0 -1px 0 rgba(0,0,0,0.6)!important;
}
a.button:hover,
.button.alt:hover,
.button:hover,
input.button:hover,
button.button:hover,
a.comment-reply-link:hover,
#commentform #submit:hover,
#btn-cart a:hover,
#btn-cart a span.btn-cart-inner:hover {
	background:#339e78;
	background:-webkit-gradient(linear,left top,left bottom,from(#339e78),to(#20644c));
	background:-webkit-linear-gradient(#339e78,#20644c);
	background:-moz-linear-gradient(center top,#339e78 0%,#20644c 100%);
	background:-moz-gradient(center top,#339e78 0%,#20644c 100%);
	color:#f1fffb;
	text-shadow:0 -1px 0 rgba(0,0,0,0.6)
}

neilfoster
Thanku you
your code helped me.

I’ve got it.

Thanks