Any way to hide the “Add to cart” button if no variation chosen?

Hey there ??

Thanks for reaching out!

It seems you’re looking to hide the “Add to cart” button for variable products on the shop page when no variations are selected, correct?

There is no built-in option within WooCommerce core that allows for hiding this button conditionally, however it’s possible to achieve this by using some custom CSS.

Can you try adding the following CSS to?Appearance?→ Customize → Additional CSS?and see if this does the trick:

/*Hide Add To Cart Until Variation is selected*/
.woocommerce-variation-add-to-cart-disabled {
display:none;
}

Here are the results before and after:

BEFORE CSS:

AFTER CSS:

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Hope this helps!

Hi there!

We haven’t heard back from you in a while, so I’m going to mark this as resolved – feel free to create a new topic if you need any further help. ??

Cheers.