WordPress.org

Ready to get started?Download WordPress

Forums

Can't change color of WooCommerce Add To Cart button (9 posts)

  1. dylanlott
    Member
    Posted 1 year ago #

    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.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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);
    }
  3. dylanlott
    Member
    Posted 1 year ago #

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

  4. dylanlott
    Member
    Posted 1 year ago #

    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.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  6. dylanlott
    Member
    Posted 1 year ago #

    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.

  7. dylanlott
    Member
    Posted 1 year ago #

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

  8. troy7890
    Member
    Posted 1 year ago #

    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.

  9. Martin E
    Member
    Posted 1 year ago #

    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);
    }

Topic Closed

This topic has been closed to new replies.

About this Topic