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

  • Resolved Jorian29


    Maybe this is very easy, but I don’t get it.

    This evening, I made a very basic shop ( Now I saw in the settings of WooCommerce that I could change the color of the order button. I changed it to the color I liked, as shown here. But I’d like that color on every ‘Kopen’ button. Like on the frontpage, where they are grey. I’d like them in the same red color.

    I’m not a hero when it comes to PHP, but when I was searching on Google I read it had something to do with functions.php etc.

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.

    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: or

    #commentform #submit,
    #btn-cart a,
    #btn-cart a span.btn-cart-inner {
    	background:-webkit-gradient(linear,left top,left bottom,from(#339e78),to(#27775b))!important;
    	background:-moz-linear-gradient(center top,#339e78 0%,#27775b 100%)!important;
    	background:-moz-gradient(center top,#339e78 0%,#27775b 100%)!important;
    	text-shadow:0 -1px 0 rgba(0,0,0,0.6)!important;
    #commentform #submit:hover,
    #btn-cart a:hover,
    #btn-cart a span.btn-cart-inner:hover {
    	background:-webkit-gradient(linear,left top,left bottom,from(#339e78),to(#20644c));
    	background:-moz-linear-gradient(center top,#339e78 0%,#20644c 100%);
    	background:-moz-gradient(center top,#339e78 0%,#20644c 100%);
    	text-shadow:0 -1px 0 rgba(0,0,0,0.6)

    Thanku you
    your code helped me.

    I’ve got it.


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: WooCommerce – excelling eCommerce] Change color 'add to cart'’ is closed to new replies.