Posted on

WooCommerce: Move Product Tabs Under the Short Description

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

Move product tabs in WooCommerce
Move product tabs in WooCommerce

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!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

91 thoughts on “WooCommerce: Move Product Tabs Under the Short Description

  1. Worked like a charm. (brand new install, all up to date) Would have spent hours trying to accomplish this with CSS!

    1. Excellent ๐Ÿ™‚

  2. Mine didn’t work – gave this error – syntax error, unexpected ‘remove_action’ (T_STRING), expecting function (T_FUNCTION)

    1. Hey Trista, thanks for your comment! This works, so check again that you haven’t missed a bracket “)” or some other punctuation ๐Ÿ™‚

  3. Hi, can you please help me just to move up Product Description (not under the Short Description on the right) but I want it to stay in the same position, only to move it as close as it’s possible to (under) the Product image and Short Description.
    Thank you

    1. Jovana, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  4. Firstly, thanks for the entry it really is useful.

    I’ve added the code as you mentioned, but the information on the tabs is displayed outside of the page
    http://prntscr.com/jfm7za

    Do you have any ideas on how i can fix that with CSS ?

    Thanks again

    1. Hey Spiros, thanks for your comment! I’m afraid this is custom to your theme, so I can’t help here via the comments. Thanks for your understanding!

    1. Fantastic ๐Ÿ™‚

  5. Thanks Rodolfo. Worked perfectly.
    Legend ๐Ÿ™‚

  6. Hi Rodofo, thank you! This worked perfectly!

  7. Ciao rodolfo ,
    il codice funziona corettamnete (complimenti) ma io ho avuto un piccolo problema e ora mi spiego :purtroppo Usando questo codice la descrizione si attaca alla categoria . come posso staccarli .

    Grazie x la tua risposta ,,

    1. Hey Moji, you will need CSS for that, and specifically “clear: both” ๐Ÿ™‚

  8. Hi Rodolfo, please i am looking for something similar, i wish i could post pictures and i have placed the website on maintenance. Please i need to move mine below the product image where yours is moving from, the product descripton is below the price tag and i dont like it that way could you please help.
    Thanks!
    Beverly,

    1. Beverly, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. Thanks for your response, please how can you help me out. You can send me an email….

    3. ๐Ÿ™‚ If you’d like to get a quote, feel free to contact me here. Thanks a lot

  9. Hi Rodolfo. This snippet is great! I’m also like to convert the tabs into accordions. Got any idea for me?

    1. Thanks Liran ๐Ÿ™‚

      No, I don’t I’m afraid!

  10. Big up yourself Rodolfo! Nice function ๐Ÿ™‚

    1. Cheers Tom ๐Ÿ™‚

  11. Is there a way of having this action only happen when on a mobile device? And this includes all other hooks in the right hand table of the single product page? In effect changing a mobile layout from two columns to one.

    1. Hey Jason, thanks for your comment! Yes and no – PHP cannot detect the screen size; however you can play with display:none in CSS in combination with PHP. This will duplicate content even if invisible so I’m afraid there is not a perfect answer ๐Ÿ™‚

  12. Hi Rodolfo, Thank you very much for your help… I have do what you said in this post but i dont have any change on my website, please your help!.

    1. Hey Jhon, thanks for your comment! Can you try with a default theme like 2016 please?

  13. Hello Rodolfo, You are legend saved me time for Fast and Furious 7 haha.

    just a quick question if you can help me with that. After, moving tabs on the right under the short description; there is empty space under the product image. Can we make product image sticky somehow, so when a user scrolls down to read the info in tabs they don’t feel emptiness.

    1. Gary, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  14. Hi
    This has worked well for me, and like many others, saved hours of trawling through the web and messing around with customisations etc, so a big thanks Rodolfo.

    Just one query though if you can assist; i have to now click on the description tab to reveal the description – is there any way to have that showing by default (as you would on a normal wc page)?

    Thanks
    Farzan

    1. Hey Farzan, thanks for your comment! Yes, I’m sure there is a way – unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

    2. Thanks Rodolfo

      Of course, I understand that.

      Do you do custom work, at a cost obviously?

    3. No, thank you for understanding ๐Ÿ™‚ Yes, of course, you can post your project specifications via the “Contact” page. Cheers, R

  15. You are a life and time saviour! thanks!!

    1. Thank you so much German ๐Ÿ™‚

  16. how to add custom text before sort discription

  17. any solution to get rid of duplicate product tab?

    1. Hey Miku, thanks for your comment! Probably your theme is re-adding the tabs in a different position and your default remove_action is not finding the correct position. Try looking through the theme files to see if this is happening ๐Ÿ™‚

    2. I had the same problem and used this css code

      .woocommerce-tabs:nth-of-type(2) {display:none;}

      that worked for me.

  18. Hello,

    I need your help regarding the next issue: I want to move the product data tab after single product summary (beneath product image) and I tried to modify the code provided by you without any success. This is the one I used:

    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 60 );
    add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

    What could be wrong? It has anything to do that I had removed the description tab? Right Now I only have additional information tab.

    Thank you!

    1. Hey Bogdan, thanks for your comment! I’m not sure I fully understand… the product tabs are already in the “woocommerce_after_single_product_summary” ๐Ÿ™‚

  19. Works great, thank you!

    1. Awesome Aj, thanks for your valuable feedback!

  20. Hi Rodolfo,

    First of all, thanks for your help with all this woocommerce code!

    I’m trying to move description below images on a column, I added this code to functions.php

    
    function dante_product_tabs_override() {
      add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 35);
    }
    
    add_action('init', 'dante_product_tabs_override', 5);
    
    

    And added also this css:

    
    .woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs{float:left !important; width:48% !important; }
    
    

    But it is still “flying” below short description (in my case very very long) on left.

    Hope you can help me out

    Thanks
    Carlos

    1. Carlos, thanks for your comment ๐Ÿ™‚

      Can you give me your website URL please? This should be pretty easy CSS.

  21. hi Rodolfo, great post, thanks !
    I am having the same issue as a previous user, with the site’s footer wrapping all over my product page. Kindly can you let me know whether a solution was found? I am using WordPress.

    many thanks !
    Tom

    1. Hey Thomas, thanks for your feedback! This must be an easy CSS fix – can you tell me your website URL please? Thanks ๐Ÿ™‚

    2. Nevermind- found it. Thanks for being so helpful anyway! ๐Ÿ™‚

    3. Excellent, thanks for following up ๐Ÿ™‚

  22. Hi Rodolfo, If I use this code in my website, the footer code starts under the image, coloring all the part withe the background color.
    It seems like this solution remove some closing DIV…

    Is there a way to solve this issue?

    1. Hey Ren, thanks so much for your email. It could be that your theme has a custom single product page and they added some

      wrappers around the WooCommerce functions. Is there a URL I can take a look at?
    2. I’m working on a demo site and, in my theme, I have a single-product.php inside Woocommerce folder.

      Now I’ll check if this file add some particular code to the single product page.

      I don’t like to show this demo online, so could I send you an email?

      At the moment I remove your code.

    3. Of course. My email is infoATbusinessbloomer.com ๐Ÿ™‚

  23. Hi, this article has saved me hours of fiddling around.
    I’ve been able to customize the ordering, using code snippets but I’m looking for a little more.

    How can I move the Product Description (Ideally without the ‘description’ Tab) to the empty space beside (to the right of) the product image?

    Thank you so much for the help

    Mike

    1. Hey Mike, thanks for your feedback ๐Ÿ™‚ The Product Description shows under your image as margins are messed up in CSS – reduce them and you will see the description on the right side of the image ๐Ÿ™‚ Hope this helps! ~R

  24. Thank you Rodolfo! But can you please guide me in which PHP file should I insert these codes? (I cannot find the functions.php under theme>woocommerce )

    1. Or if it’s possible to use the plugin Snippet?

    2. Yes ๐Ÿ™‚ I use Code snippets. Hope this helps!

  25. Hello Rodolfo, is it difficult to put some space between SKU and product tabs after moving them under short discription?

    1. Peter, thanks for your feedback! No, it’s not difficult at all, you just need a bit of CSS. Product tabs have a specific class that you can target to add some padding above and under. Let me know ๐Ÿ™‚

    2. I put this bit of code in style.css but nothing changed.

      .woocommerce div.product .woocommerce-tabs ul.tabs li.active:before,
      .woocommerce div.product .woocommerce-tabs ul.tabs li.active:after {
      padding: 10px;
      }

    3. Try with just this:

      div.product .woocommerce-tabs {
      padding: 10px 0;
      }

    4. still the same. the product description is very close to SKU.

    5. What’s your web address Peter?

    6. i dont have web adress yet.

    7. Peter, as soon as you push the website on a live or test domain let me know and I’ll give you a hand ๐Ÿ™‚

  26. Bit late to reply but I found this today and it was very useful. Had to comment out a line in my templates woocommerce-settings.php to remove the bottom description but I wouldn’t have had a clue without this guide thank you Rodolfo!

    1. Thanks so much for your feedback Leo!

  27. hello! a simply but tricky for me. how to echo review tab in custom single product template.

  28. bravo sir! Appreciate you taking the time to put out this code – it helped a place I was spending too much time on. “Good on ya Mate!” as they say in Ausi land.

    1. Cheers John ๐Ÿ™‚

  29. Hi,

    Please help me to add an additional tab area under product image.

    How to extract only ‘Review’ tab from do_action( ‘woocommerce_after_single_product_summary’ ); and display only contents just after product image.

    I just want to show one review tab under product image as an additional information.

    I don’t want to remove default tab area which contains review, description and additional information tabs.

    I have tried my best but failed. Kindly help me configuring the same.

    Thanks

    1. Rahul, thanks for your comment. Try using the hook ‘woocommerce_product_thumbnails’ which is positioned right under the single product image. Hope this helps!

  30. Hello there, thanks for your comment! The easiest thing to do is the following: download your template files on your computer, and search for “woocommerce_output_product_data_tabs” in all its PHP files. At some stage, you will see if any customization on that hook was already done and tweak your code.

    Let me know how you get on!

    1. seems like i cannot find anything like that on my template files..

    2. Albert, the other alternative, as you use the Flatsome theme, is to edit the file “content-single-product.php” in the theme folder / Woocommerce folder. On line 94 you will see a line with the following code: “woocommerce_get_template(‘single-product/tabs/tabs.php’);”. Simply cut that, together with the opening and close PHP, and paste it on line 60, just after “do_action( ‘woocommerce_single_product_summary’ );”.

      This has to work ๐Ÿ™‚

    3. still no luck ๐Ÿ™‚ I’m still seeing the duplicate tab below the images..

    4. Albert, if you use the method I explained (overriding the file) it’s impossible that you see duplicate tabs, as you’re overriding the whole PHP file. You either put the file in the wrong place, or forgot to cancel the previous code you put in the functions.php, or there is something else that I cannot identify without looking at your website code ๐Ÿ™‚ Let me know!

    5. i think the remove_action code just not working on function.php, because no matter what number i put just stay the same have 2 description..

    6. Albert, maybe the remove action is triggered too early and therefore it doesn’t remove anything. Try wrapping the remove action in a function, similar to this example:

      
      function do_the_remove() {
      remove_action (.........);
      }
      
      add_action('init', 'do_the_remove');
      
      

      If “init” doesn’t work, try with “wp_loaded”.

  31. i have same issue, how do i get the number from my theme ???

  32. I seem to have two description tabs now one under the price and the other one where is always was

    1. Tommy, probably the “remove_action” does not trigger. Try wrapping that code with the following, so that the remove_action happens after the theme has loaded and not before:

      
      add_action('after_setup_theme','remove_action_previously_added') ;
       
      function remove_action_previously_added(){
      remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
      }
      
      

      If it doesn’t work, try using “wp_loaded” instead of “after_setup_theme” in the action above ๐Ÿ™‚

    2. No nothing seems to be getting rid of this duplicate description.

    3. It could be the “10” inside the remove_action. Probably your theme has a different “priority” if they customised that section. It could be any number. What template are you on?

    4. using Legenda. do you develop sites Rodolph?

    5. Thanks for that Tommy, I’m not familiar with Legenda theme but that could be the problem. There should be a /woocommerce folder in the theme main folder, and if they overwrote that specific action you’ll find it there. You can place an order on Fiverr (see above) if you want me to take a look at your code and fix this issue.

      And yes to the other question, I develop and design websites, mostly Woocommerce-based.

    6. Cheers for this. The original code (without “add_action(‘after_setup_theme’)”) resulted in a duplicate block being written out, but the above version (with “add_action(‘after_setup_theme’)”) worked perfectly for me. Tavern theme from Highgrade.

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.