WordPress.org

Support

Support » How-To and Troubleshooting » Can't change color of WooCommerce Add To Cart button

Can't change color of WooCommerce Add To Cart button

  • I’ve been developing a site for a client of mine and they require a shopping cart for their uses. I chose WooCommerce because it’s always been easy to use in the past, however it’s not playing well with the theme I’m using.

    http://aeonstrife.com/air2data/product/force-series-access-point/

    At that link, I need to change the colors of the Add To Cart button, however I can’t find it in the CSS and it won’t change with any of the settings I’ve tweaked in the dashboard.

    Any help or tips would be appreciated! I’ve looked around and haven’t been able to find any tutorials or anything for changing it.

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    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.

    WPyogi

    @wpyogi

    Forum Moderator

    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);
    }
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Can't change color of WooCommerce Add To Cart button’ is closed to new replies.
Skip to toolbar