Moving Variation Dropdowns Below Options in WooCommerce Product Options plugin

WooCommerce is a versatile e-commerce platform for WordPress, allowing users to create and manage online stores efficiently. The WooCommerce Product Options plugin by Barn2 Plugins enhances the product customization experience, offering a range of options for users. However, by default, the variation drop-downs appear at the top of the product page, which might not be the most user-friendly arrangement. In this article, we’ll explore how to use JavaScript to move the variation drop-downs below the product options.

Prerequisites:

Before proceeding with the customization, you’ll need a snippets plugin installed on your WordPress site. We recommend using the “Insert Headers and Footers” plugin, which allows you to add custom code to your site without modifying the theme files directly.

Step 1: Install the Snippets Plugin

1. Navigate to your WordPress dashboard.
2. Go to “Plugins” > “Add New.”
3. Search for “Insert Headers and Footers” and install the plugin by WPBeginner.
4. Activate the plugin.

Step 2: Add Custom JavaScript Code

1. Create a new snippet.
2. In the JS code section, paste the following code:

<script>
jQuery(function($) {
  $(document).ready(function() {
    if ($('body').hasClass('single-product')) {
      let variationsElement = $('.variations_form .variations')
      let optionsContainerElement = $('.variations_form .wpo-options-container')
      variationsElement.insertAfter(optionsContainerElement)
    }
  })
})
</script>

This code checks if the current page is a single product page, and if so, it moves the variation drop-downs below the product options.

3. Save your changes.

Step 3: Verify the Changes

1. Visit a single product page on your WooCommerce site.
2. Check if the variation drop-downs now appear below the product options.

That’s All!