Can't change color of WooCommerce Add To Cart button

Appears to be here:

.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt {
    background: -moz-linear-gradient(center top , #00B0D1 0%, #00859E 100%) repeat scroll 0 0 transparent;
    border-color: #005A6B;
    color: red;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}

Thank you so much! I’ll mess around with that and see if it works out.

On that same page, we’re also having issues with the position of the +/- buttons to the left of that Add To Cart button. Any ideas on that? I’ve searched for that as well, and all the changes I’ve made to the CSS thus far have left the positions of those buttons completely unchanged.

Are you using Firebug to identify CSS for an element? It indicates this is what you want:

.woocommerce .quantity .plus, .woocommerce .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce #content .quantity .minus, .woocommerce-page .quantity .plus, .woocommerce-page .quantity .minus, .woocommerce-page #content .quantity .plus, .woocommerce-page #content .quantity .minus {
    background: -moz-linear-gradient(center top , #008199 0%, #005666 100%) repeat scroll 0 0 transparent;
    border: 1px solid #002B33;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.075) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    color: red;
    cursor: pointer;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 15px;
    line-height: 13px;
    margin: 0;
    overflow: visible;
    padding: 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
    vertical-align: text-top;
    width: 20px;
}

I put this code into the site just barely, and it only changed the color of the + and – text color. I can’t figure out how to change the positions of the buttons. I’m just trying to make it so that the + and – buttons are tight up next to each other instead of being spaced apart horizontally.

Also, I’m not using Firebug. I’m unfamiliar with it. I’ll check it out, though!

Hello, I’m having this same issue with the quantity minus button not aligning correctly with my theme. (just like the photo in 1st post)

I’m using Firebug – and I’ve been tinkering with the relevant css for this button and can’t get it to move up. I’m wondering if this is a deeper theme conflict or is it correctable. If anyone knows how, please help.

Thanks

I wish there were better documentation available for troubleshooting theme issues with Woo Commerce.

This worked for me, add to your child theme css:

div.product div.summary button.button:hover, div.product div.summary a.button:hover{
border-radius: 2px 2px 2px 2px;
background: -moz-linear-gradient(center top , #F7F6F7 0px, #555 100%) !important;
color: #5E5E5E;
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}