Move the product description below the image product on tablet only

Hey Audrey,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

@media only screen and (max-width: 1200px) {
.single-product-main-image {
  width: 100%;
  margin-right: 0;
  float: none;
}}

Cheers!
Yigit

Hi,

Thank you for the clarification.

You can use this code in the functions.php file to move the product tabs below the product image and make it fullwidth.

function av_woo_tabs_below() {
    remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 1 );
    add_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 20 );
    }
add_action( 'init', 'av_woo_tabs_below');

Best regards,
Ismael

Hi,
Thanks for your patience, please try this code to the end of your child theme functions.php file in WordPress ▸ Appearance ▸ Theme File Editor instead:

function custom_script_move_woo_tabs() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function ($) { 
    var width = $(window).width();
if (width > 767 && width < 1200) {
	$('#top.single-product .woocommerce-tabs.wc-tabs-wrapper').css({'padding-top':'0'}).appendTo( ".container_wrap_first.template-shop > .container > .product" );
	$('#top.single-product .single-product-main-image').css({'padding-bottom':'0'});
   }
})(jQuery); 
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script_move_woo_tabs');

this only works on screens between 767px and 1200px as asked, please copy the css from the forum and not from an email notification so the greater than symbol is copied correctly.
Also note that if you test on a desktop screen by resizing the window you will need to refresh the widow to trigger the script, this would not be an issue for an actual user.
Here is the expected results between 767px and 1200px with the tabs moved:

this is when the screen is larger than 1200px:

I have linked to my test page below, please give this a try.

Best regards,
Mike

Hi,
Glad to hear that this helped, Ismael’s solution is a PHP function and works on the server side while the page is being built, but getting the browser screen size needs to be done on the client side with javascript after the page is built, so this won’t work.
I can add a function to account for screen resizing, but it just auto reloads the page on resize and in a live situation the user would not trigger this because their devices would not change from desktop to tablet on the fly. Originally I thought you asked for the product tabs below the product image and make it fullwidth, in your last post you asked to have the title, price, add to cart button and description below the image, just like on the mobile version, so for this I have also added the resize function.
Try this code to the end of your child theme functions.php file in WordPress ▸ Appearance ▸ Theme File Editor instead:

function move_woo_product_summary_below_image_with_resize() { ?>
    <script>
window.addEventListener('DOMContentLoaded', function() {
    (function ($) { 
        var width = $(window).width();
    if (width > 767 && width < 1200) {
      $('#top.single-product .woocommerce-tabs.wc-tabs-wrapper').css({'padding-top':'0'}).appendTo( ".container_wrap_first.template-shop > .container > .product" );
      $('#top.single-product .single-product-summary .entry-summary').css({'padding-top':'0'}).insertBefore( ".container_wrap_first.template-shop > .container > .product .woocommerce-tabs.wc-tabs-wrapper" );
      $('#top.single-product .single-product-main-image').css({'padding-bottom':'0','width':'100%'});
       }
    })(jQuery);
    var resizeId;
    window.addEventListener('resize', function() {
        clearTimeout(resizeId);
        resizeId = setTimeout(doneResizing, 300);
    });
    
    function doneResizing(){
        location.reload();
    }
});
</script>
  <?php
}
add_action('wp_footer', 'move_woo_product_summary_below_image_with_resize');

Below I have linked to my test page, I tested with a Dev Tools device emulation of a device 1024px by 1205px to test the resize by rotating portrait to landscape and back.
For portrait:

For landscape:

Please give this a try.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard