Hide the Add to Cart button until a variant selection has been made.

[greggc]

I need to change our drop down lists to contain Select One. In doing this the add to cart button show sold out on the initial page load. Is it possible to hide the Add to cart button completely until a variant selection is made.

[Bruce - PhosphorMedia]

If you have jQuery available, the easiest way it something like this

<input id="CheckMe" type="checkbox" name="CheckMe"> <strong>Please check me to complete order.</strong></p>
<button class="btn btn-action btn-lg" type="submit" id="CompleteOrder" disabled>Complete Order</button>


At bottom of page add

script

$('#CheckMe').change(function () {
$('#CompleteOrder').prop("disabled", !this.checked);
}).change()

script

In your case, you'll want to switch the add (in the attribute template, a class like "required" to these variant attributes and change the first line to
$('.required').change(function () {