There’s a WooCommerce builtin shortcode to add a product to cart, by default the shortcode works only for simple product, not for variable products, as when using this shortcode you can’t define variations. You can use these two shortcodes [add_to_cart id=’XX’] and [add_to_cart_url id=’XX’] for simple products.

But what if you want to create a “add to cart” button for variable products? Let’s say you want to create a add to cart button for adding X product with Y Size?

Well, you need to add variable product to cart using the URL and create a url similar to this:

http://mysite.com/cart/?add-to-cart=PRODUCT_ID&variation_id=VARIATION_ID&attribute_size=ATTRIBUTE_SLUG

How can you use it?
Best and easy example:

<a href="http://mysite.com/cart/?add-to-cart=9499&variation_id=9561&attribute_size=X">Add To Cart</a>

You can use it by another way

<form action="<?php echo bloginfo('url')?>/cart/" method="get">

<input type="hidden" name="add-to-cart" value="9499" />

<input type="hidden" name="variation_id"  value="9561" />

<input type="hidden" name="attribute_size"  value="XL">

<button type="submit" class="single_add_to_cart_button button alt">Add To Cart</button>

</form>