WooCommerce: Remove Product Tabs, Show Long Description

Today we take a look at the WooCommerce Single Product page and specifically at how to remove the whole Product Tabs Section, and re-add the Long Description on its own (and not inside a tab).

WooCommerce: Remove Tabs & Display Long Description
WooCommerce: Remove Tabs & Display Long Description

PHP Snippet: Hide Product Tabs & Show Long Description @ WooCommerce Single Product Page

/**
 * @snippet       Remove Product Tabs & Echo Long Description
 * @how-to        businessbloomer.com/woocommerce-customization
 * @author        Rodolfo Melogli, Business Bloomer
 * @testedwith    WooCommerce 5.1
 * @community     https://businessbloomer.com/club/
 */
 
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
 
add_action( 'woocommerce_after_single_product_summary', 'bbloomer_wc_output_long_description', 10 );
 
function bbloomer_wc_output_long_description() {
?>
   <div class="woocommerce-tabs">
   <?php the_content(); ?>
   </div>
<?php
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

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. Follow @rmelogli

62 thoughts on “WooCommerce: Remove Product Tabs, Show Long Description

  1. Getting this error:
    Your PHP code changes were rolled back due to an error on line 88 of file wp-content/themes/Divi-Child/functions.php. Please fix and try saving again.

    syntax error, unexpected ‘}’, expecting end of file

    1. Hi Stacie, did you forget the closing curly bracket?

  2. Awesome! I didn’t want the tabs to show but the contents only…

    Right now, the review is gone, may i know how do i add in the review section after the long description ?

    1. Hi, i found your other article on ‘explode’ the tabs… this is what i wanted! Thanks!

      Btw, need help on removing the headers after exploded

  3. bro thanks so much you save my day every time, i like your website !

  4. Sorry it doesn’t work at all. Tabs did not disappear and long content is still sitting in the description box. Very disappointing as tediously looking for a solution all day. Using Flatsome theme and all up to date. Code cleanly copied from snippet. Failed to do what it can do for everyone else.

    1. Seems to be working! However in the wrong location. The long content is now sitting below the tabbed content, that is still showing – but needs to be deleted or hidden from view? I will fiddle, without breaking my site…ho ho! TY!

      1. Update: working when I disabled all plugins apart from woo. Will fathom it out. How to get reviews underneath this code above? TY…

        1. Got it all to work great now. Modify page layout plugin was conflicting code. I found some new snippets to simply get the add to cart above the excerpt to be above the fold, and then deleted the unnecessary plugin. Then re-added your code and all works perfectly and for the reviews…excellent TY!

  5. thanku sir very helpfull you site

    1. yourewelcomesir

  6. This post saved my life, best ever, thank you very much

    1. Thanks!

  7. Hello guys,

    I am new to all this hooking but I have been building custom product page using flatsome.
    I need to know how I can pull out product reviews and long description apart from each other.
    So one column where I can paste just long description and other one where I can put product reviews.
    Any suggestions are welcome.

    1. Hi Jehuda, 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!

  8. How would you add the “Description” header back to the long description using this snippet? For example:

    DESCRIPTION

    Here is the long description for the product.

    1. echo '<h3>Description</h3>';
  9. Hi !

    I added the snippet code and it successfully remove the tabs and made a single long description.
    But it didn’t show reviews. I have also added the snippet code for reviews.
    I am using Ryviu to import reviews from Aliexpress for my dropshipping store.
    Can anybody please help.

    Thanks in advance !

    1. Hello Muhammad, 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!

  10. Rodolfo,
    Works great!, I forgot how many times you have saved my day. Next time instead of googling for something I want to do, I will come to your website first.

    Nestor.

    1. Thanks!

  11. The top looked great, but then it made a copy of the description twice and just shoved it down.

    1. Hey Johnny, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

      To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

      Hope this helps!

      R

  12. Thank you so much! You’re a lifesaver! πŸ™‚

    1. Great!

  13. Hi
    If I want to add below >> the attributes, addittion information? how can I do?

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

  14. Small modification to show product reviews:

    /**
     * @snippet       Remove Product Tabs & Echo Long Description with product reviews
     * @how-to        businessbloomer.com/woocommerce-customization
     * @sourcecode    https://businessbloomer.com/?p=19940
     * @author        Rodolfo Melogli, Business Bloomer / Dexter
     * @testedwith    WooCommerce 3.3.5
     */
    
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
     
    add_action( 'woocommerce_after_single_product_summary', 'bbloomer_wc_output_long_description', 10 );
     
    function bbloomer_wc_output_long_description() {
    ?>
        <div class="woocommerce-tabs">
        <?php the_content(); ?>
    	<?php comments_template(); ?>
        </div>
    <?php
    	
    }
    
    1. Awesome! πŸ™‚

  15. Great! And If You want to add product reviews under long description, use this:

    add_action( 'woocommerce_after_single_product_summary', '_show_reviews', 15 );
    function _show_reviews() {
      comments_template();
    }
    
  16. Hello. I express my deep gratitude to you for this change. The product card has become much better. Tell me, is it possible to return reviews immediately after the description?

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

  17. Works perfectly for me on Woo 3.5.1, PHP 5.6.38 and WP 4.9.8

    1. Great πŸ™‚

  18. Hi,
    The snippet works – but now I’ve lost the additional information tab. Is there a way to show that below the long description?

    1. Hey Tim, 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

  19. I made someΒ modifications using this – thank you for the base idea

    The client wanted the variable price to not display as it was confusing to have two prices shown, and they figured customers would be hesitant to purchase as a result of the 2nd price being higher (in some cases by the 100;s)

    They wanted instead for it to say something like: Starting from $59 – As low as $20 each

    I took the above code and edited to this:

    
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    
    add_action( 'woocommerce_after_shop_loop_item_title', 'bbloomer_wc_output_long_description', 10 );
    
    function bbloomer_wc_output_long_description() {
    ?>
    <div class="woocommerce-tabs">
    <h5 style="text-align: center; font-weight:bold; margin-top:-4px;"><?php the_content(); ?></h5>
    </div>    
    <?php
    }
    

    Now it shows for each item, whatever is put in the long description – good for individual advertising or blurb, for specific products.

    If not used, then nothing gets displayed…..

    Thanks for the tip, Rodolpho, hope this helps someone…. πŸ™‚

    1. Nice, thanks Roberta πŸ™‚

  20. Hi Rodolfo,
    It doesn’t seem to work for a website with Woo 3.3.4. It runs on PHP 7.2 and an updated Genesis framework theme.

    1. Hey Bart, thank you so much for your comment! I just tested it on 3.3.4 and still works – you must have some other kind of error πŸ™‚

  21. Sorry, never mind, I figured out the problem. The code works fine on all three browsers.

  22. Why does this code only work with the Chrome browser, but not Internet Explorer or Firefox? The element with the description appears to be completely missing in IE and Firefox. It is only there in Chrome. How can this be?

  23. Hi,

    Can you please confirm this snippet is meant to remove tabs and overwrite Short Description with Long Description?

    1. Hey there, thanks so much for your comment! No, it deletes the tabs and print the long description in there. Short description stays where it is πŸ™‚

  24. Hi

    I am using the Woocommerce theme. Your snippect echos the text but fails to remove the description box!

    1. Hey Val, thanks so much for your comment! Try delaying the remove_action, as I’ve done for this snippet: https://businessbloomer.com/woocommerce-remove-default-sorting-dropdown/#remove-default-sorting-dropdown-in-storefront-theme

  25. This doesn’t work for me! Is the code the latest for WooCommerce?

    1. David, thanks for your comment! It could be your theme is overriding this, and therefore my default snippet doesn’t work. Can you try with 2017 theme and then get back to me?

  26. Great, I’ve been working on this problem for several days.
    When I found your headline to solve the problem, it was resolved within 5 seconds.
    Thank you very much .

  27. I love these snippets. They just work. πŸ˜‰

  28. Best Blog to learn advance woocommerce!

  29. Hi,
    Would it be possible to remove the long description tab only if its empty?

    1. Hey Andy, yes, I’m 100% sure it is. Sorry but I can’t provide custom work in the blog comments – if you’re interested feel free to contact me for an estimate. Thank you πŸ™‚

  30. Thanks so much – all your Woo customization tips are so helpful!!

    1. Jean, much appreciated πŸ™‚ Thanks so much!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. 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 the Business Bloomer Club to get quick WooCommerce support. Thank you!

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