Move up product data woocommerce on mobile - wordpress

Question

is there a way ON MOBILE to move the 3 dropdowns section to the above the product name and gallery image?
I am using the woocommerce plugin and for the dropdowns im using the PRODUCT DATA - VAriable product section.
check the link:
Website

Answer 1

I would need more about your actual code (or a demo version) to achieve what you exactly want. You could use a bit of jQuery in your function.php, the following code as not been tested but the logic is there:
/*Move the variation div to another created one
======================================================================= */
add_action( 'wp_footer', 'move_variations_product_tab' );
function move_variations_product_tab() {
if (is_product()) :
$product = wc_get_product( get_the_ID() );
if($product->is_type( 'composite' )){
?>
<script>
jQuery(document).ready(function($) {
$(window).load(function() {
$( ".variations_form" ).wrap( "<div id='variations-content'></div>" );
$( ".woocommerce-product-gallery" ).before( "<div class='container product-before-gallery'></div>" );
document.getElementsByClassName("product-before-gallery")[0].appendChild(
document.getElementById("variations-content")
);
});
});
</script>
<?php
}
endif;
}
Replace "product-short" by the container of your description.
Wrapping around the div you want to move.
Creating a new class before the desired location
Move the wrapped div (#variations-content) under the newly created one
(.product-before-gallery).
Hope that helps! Let me know how it goes and give more info if you needs help.
Cheers