Is there a way to separate the variation dropdowns and the add to cart button in woo commerce?

Yes, it is possible to separate the variation dropdowns and the “Add to Cart” button in WooCommerce. You can do this by modifying the WooCommerce template file that displays the product page.

Here is an example of how to do this using a child theme:

1. Create a child theme: You need to create a child theme to make changes to the WooCommerce template files without affecting the parent theme files.
2. Copy the WooCommerce template file to the child theme: Go to the WooCommerce plugin folder (wp-content/plugins/woocommerce/templates) and copy the file named single-product/add-to-cart/variable.php to the child theme folder (wp-content/themes/[child-theme-name]/woocommerce/single-product/add-to-cart).
3. Modify the file: In the file you copied to the child theme folder, find the code that displays the variations dropdowns and the “Add to Cart” button. Split the code into two separate sections, one for the variations dropdowns and one for the “Add to Cart” button.
4. Wrap each section in a div: Wrap each section of code in a div and give each div a unique class name.
5. Style the divs: Use CSS to position the divs wherever you want on the page.
6. Save the file and test: Save the file and test the changes on the product page.

Here is an example of the code after you have made the changes:

phpCopy code<div class="variation-dropdowns">
    <!-- Variation dropdowns code here -->
</div>

<div class="add-to-cart-button">
    <!-- Add to cart button code here -->
</div>

Keep in mind that you should always make a backup of the original template file before making any changes, in case you need to revert the changes later.