WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: WooCommerce - excelling eCommerce] Change color 'add to cart' (8 posts)

  1. Jorian29
    Member
    Posted 1 year ago #

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

    This evening, I made a very basic shop (shop.charge-it.nl). 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.

  2. Meevi
    Member
    Posted 1 year ago #

    What is the name of your theme?

  3. Jorian29
    Member
    Posted 1 year ago #

    I'm using the Twenty Twelve theme.

  4. Meevi
    Member
    Posted 1 year ago #

    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;

  5. Meevi
    Member
    Posted 1 year ago #

    Put that code into your custom CSS.

  6. neilfoster
    Member
    Posted 1 year ago #

    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: http://100DollarBillCards.com or http://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)
    }
  7. Mesec
    Member
    Posted 1 year ago #

    neilfoster
    Thanku you
    your code helped me.

  8. Meevi
    Member
    Posted 1 year ago #

    I've got it.

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic