Gray out add to cart when variations need to be selected

Hi,

I have products with variations, at this moment when a customer doesn’t choose a variation but clicks on the add to cart a (ugly) notification appears.
How can i make the button either gray out or make it not clickable until a variation is selected?

Hello,

Thank you very much for choosing our theme and for contacting us.

Unfortunately, Woocommerce does not provide the option. If a variable product is based on more than two attributes, both should be selected to add a product to a cart. Otherwise, create the variation basing on one attribute.

Best Regards

Hi, thanks for getting back.
This actually is not true, or I might have not been clear about what I mean:

Looking at the standard Woocommerce demo here you will notice the button for add to cart is grey. As soon as you select the variation (size) the button becomes black.

Looking at your demo, for example the panton product, the button is green, and does not change after selecting the variation.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .single_add_to_cart_button.alt{
color:red;
background:yellow;
}

Best Regards

Thanks but this only changes the color of the button. I want the color to be depending on if the button is “clickable” or not (just like it is by default in woocommerce)

By default in woocommerce the button is grey if you cannot click it, and becomes
black/ different color as soon as you can click it (after the variation is selected)

Please also see the link in previous post above. When selecting the size, the color of the button becomes black. This is a default function in Woocommerce but not working in your theme.

Hello,

Please replace the custom with this one:

.single_add_to_cart_button.disabled {
	background-color: #BFBFBF;
}
.single_add_to_cart_button.disabled:hover {
	background-color: #A3A3A3;
}

Best Regards

Great thanks, that did the trick! 🙂

You are welcome! If you have any questions please feel free to contact us.

We will appreciate highly if you spend a couple of minutes and answer the questions provided here: https://8uehqcg4tjy.typeform.com/to/IgyV2EiP

Best Regards

[Author]

Posts