Add to Cart on Variation Selection, Woocommerce

I was recently tasked with having a Woocommerce site where as soon as someone chose the variation they wanted, the form submitted and the product was automatically added to their cart.

In other words, the user wouldn’t have to actually click “Add to Cart”.

It looks like this:

the words "book now" with two variation options

So first you’ll note that my variations are being displayed as buttons rather than a dropdown. I used this plugin to switch the variation selection from a dropdown to radio buttons.

Then some CSS to make the radio buttons and their labels look like buttons. Essentially I’m just adding some styling and hiding the radio button itself.

.my-form-wrapper form, .my-form-wrapper fieldset {
margin: 0;
padding:0;
}
.my-form-wrapper label.display-label {
display:block !important;
}
label.display-label {
background: #e6e6e6;
float: left;
margin-right: 5px;
padding: .5em;
border-radius: 3px;
position:relative;
}
label.display-label input, .single_variation_wrap {
position:absolute; left:-999em;
}
}

And then some jQuery in my footer.php file to submit the form when the radio button values change.

<script type="text/javascript">
jQuery( document ).ready( function () {
$('table.variations input[type=radio]').on('change', function() {
$(this).closest("form").submit();
});
});
</script>

If you didn’t want to use the plugin linked above, you can probably change that jQuery to:

<script type="text/javascript">
jQuery( document ).ready( function () {
$('table.variations select').on('change', function() {
$(this).closest("form").submit();
});
});
</script>

Limitations

  1. This only works with one variation. You could modify it so that it only happened on the last variation, I suppose.
  2. It disables quantities, though you could design your site to ask them if they want to up the quantity before the variation was selected.
  3. jQuery is required in this particular implementation. Most Woocommerce single product pages are going to be using it anyway, but them’s the breaks.

Up Next: How to Upload and Link to a PDF in WordPress