Add to Cart

Show Add to Cart buttons with the product quantity box.
Product Add to Cart element outputs the form that allows your users to add that product to the cart. The form contains all the options like the product variations with their prices, product quantity and the button that submits that form to add the product to the cart with the users selection.
Right now, you can only see the add to cart form below the product excerpt on the single product page. How, if you can add the same at the end of the product page so user can simply click to add the product to the cart instead of scrolling up and getting distracted?
With WooCommerce Product Template Builder, you can achieve that easily. Just add the element to the template and boom!
Let's see what we can achieve with the customization available -
Place Add to Cart on right side

Product Variation Swatches

From the version 2.2, you'll see two new options added to the Add to Cart element of the WooCommerce Product Page builder plugin. What these options do? They allow you to change how the variable product will display the variations form , which it usually display as a dropdown.

Option - Variation Style

This option will give you choice to whether or not use the product variation swatches for the template you're currently editing. The change will affect all the products that has variations and using that template.
The theme default option will do nothing and keep the variations form display as per the theme styling. This is useful when you have another plugin installed already that controls the variation swatches for you.
The Swatches option will convert the normal dropdowns to awesome looking Product Variation Swatches once you've them all configured. You can read this documentation post to learn more about how you can configure them.