Mostly when the long description and additional information are short, you may want to move this block of content to the right hand side of the product image – as opposed to “waste” a lot of space underneath it. Here’s how you move the product tabs!
The goal: move product tabs under the short description
The snippet: move product tabs beside the product image
/** * @snippet Move product tabs beside the product image - WooCommerce * @how-to Watch tutorial @ https://businessbloomer.com/?p=19055 * @sourcecode https://businessbloomer.com/?p=393 * @author Rodolfo Melogli * @testedwith WooCommerce 2.5.2 */ remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );
Where to add this code?
You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.
Does this snippet still work?Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.
If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance 🙂
Need Help with WooCommerce?
Check out these free videos, tutorials and tips!