Change woocommerce Button colors in shop

hello,
I am customizing TheShop using woocommerce, and little by little figuring things out (am now setting up product attributes and variables).
My question:
When you go to a product page, and no variable (“size” for example) is selected, by default the “Add to Cart” button has the woocommerce light purple color…
Where can I edit this??
Thank you!
(the site isn’t live yet, so here you can see a screenshot)Screenshot

Hi,

You can change the color of WooCommerce disabled buttons with this Custom CSS:

.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover {
    background-color: red !important;
    opacity: 0.7 !important;
    color: #fff !important;
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hmm… I’m afraid it hasn’t made any change…

I’ve never seen css like that though, with “[disabled]” or “alt.disabled”…

oh wait! I added it this time using the plugin, and it DOES work!!
it didn’t work when I added it to the child theme .css for some reason.

thanks!

Hi,

Great! You’re most welcome! I’m glad it worked. If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba