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!

Move product tabs in WooCommerce
Move product tabs in WooCommerce

PHP snippet: move product tabs beside the product image

/**
 * @snippet       Move product tabs beside the product image - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=393
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.5.2
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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 snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

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.3.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

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

  1. I would like the tabs at the top of the product page but not open
    I managed to move them to the top by altering this snippet and your guide, but the first tab is open.
    Is there a way to keep the tabs closed?
    Thanks

    1. Hello Amy, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. WordPress Version 5.5.3, WooCommerce Version 4.6.1, Code Snippets Version 2.14.0 – the code will display the tabs beneath the short description however the second function does not seem to operate and shows duplicate descriptions

    1. Which theme are you on?

  3. Move product tabs under short description – some update caused it to quit working just a few days ago.
    I believe WP 5.1.1

    1. Hello Brad, it still works for me. Please test with a different theme and no plugins but WooCommerce and let me know.

      1. This works for me but the description div (woocommerce-tabs) appears as a 100% width div. So even though the tabs are on the right, and the gallery is on the left, the tabs seem to appear invisible over the gallerty. So you can’t switch between images. Any ideas?

        1. You’d need a bit of CSS to adjust that

  4. Hello, I’m not using a child theme. How can I make this change please?

    1. Hey Elly, install the “Code Snippets” plugin and place the code into a new snippet. However, I strongly recommend you get a child theme done πŸ™‚

  5. Worked like a charm but showing duplicate description on the right side too, can you guide please?

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

      1. I had the exact same problem, the code below helped me:

        add_action( 'woocommerce_after_single_product_summary', 'removing_product_tabs', 2 );
        function removing_product_tabs(){
            remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
        }
        

        This removed the duplicate content for me!

  6. Hello! Tried this as a way to move my Reviews out of tabs, but doesn’t seem to have the desired effect. Any ideas would be appreciated.

    1. This is not the same thing πŸ™‚ Sorry

  7. It works like a charm. Thank you very much. Greetings from Poland:)

    1. Awesome πŸ™‚

  8. Hi there,

    your website is full of useful resources about woocommerce! I was wondering if I can have the product tabs out of the tabs section and put them one down the other with no need to having tabs.

    Is this possible?

    Thanks for any help

    1. Hey Vasilis, thanks for your comment! Yes, check this out: https://wordpress.org/plugins/woocommerce-extend-tabs/

  9. Hi, I’m trying to use this to make the product tabs go right under the image gallery. I managed to get it to work and I made the width of the product gallery 48% so that it would fit in the left portion of the page. Now I have a problem where all the info on the right (title, price, short description, add to cart, etc) is being pushed down the page. I think it is because that the right content loads after the content on the left (such as the image gallery) and the image gallery is now stopping the right content from moving up to the top of the page. Do you know any CSS or anything like that that would help with this? Thanks!

    1. Hello Logan, 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. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  10. Hello Rodolfo,
    I have problem to do this. I have tried to relocate price and work.
    Can you help me to locate description after product thumbnail?

    Thanks πŸ™‚

    1. Hello Ibeth, 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. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  11. Hello,
    thanks, the code works fine… but i need put the text description over the price… it’s possible? Screening:
    https://jordicarot.com/ftp/problem.jpg

    Thanks!

    1. Hey Jordi – 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

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

  13. 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 πŸ™‚

  14. 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

  15. 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
    https://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!

  16. Thanks Rodolfo. Worked perfectly.
    Legend πŸ™‚

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

  18. 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” πŸ™‚

  19. 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….

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

  20. 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!

  21. Big up yourself Rodolfo! Nice function πŸ™‚

  22. 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 πŸ™‚

  23. 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?

  24. 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

  25. 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?

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

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

    1. Thank you so much German πŸ™‚

  27. how to add custom text before sort discription

  28. 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 πŸ™‚

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

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

        that worked for me.

  29. 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” πŸ™‚

  30. Works great, thank you!

    1. Awesome Aj, thanks for your valuable feedback!

  31. 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.

  32. 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 πŸ™‚

      1. Nevermind- found it. Thanks for being so helpful anyway! πŸ™‚

        1. Excellent, thanks for following up πŸ™‚

  33. 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?
      1. 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.

        1. Of course. My email is infoATbusinessbloomer.com πŸ™‚

  34. 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

  35. 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?

      1. Yes πŸ™‚ I use Code snippets. Hope this helps!

  36. 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 πŸ™‚

      1. 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;
        }

        1. Try with just this:

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

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

            1. What’s your web address Peter?

          2. i dont have web adress yet.

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

  37. 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!

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

  39. 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.

  40. 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!

  41. 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..

      1. 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 πŸ™‚

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

          1. 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!

        2. 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..

          1. 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”.

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

  43. 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 πŸ™‚

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

        1. 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?

          1. using Legenda. do you develop sites Rodolph?

            1. 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.

      2. 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 are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.