Posted on

WooCommerce: Remove Product Tabs & Echo 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.

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

WooCommerce Snippet: Remove Product Tabs & Echo Long Description


/**
 * @snippet       Remove Product Tabs & Echo Long Description
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=19940
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.3.4
 */

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

33 thoughts on “WooCommerce: Remove Product Tabs & Echo Long Description

  1. Small modification to show product reviews:

    /**
     * @snippet       Remove Product Tabs & Echo Long Description with product reviews
     * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
     * @sourcecode    https://businessbloomer.com/?p=19940
     * @author        Rodolfo Melogli / 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! πŸ™‚

  2. 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();
    }
    
  3. 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

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

    1. Great πŸ™‚

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

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

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

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

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

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

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

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

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

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

    1. Thank you Madeleine!

  15. Best Blog to learn advance woocommerce!

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

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

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

  18. […] WooCommerce: Remove Product Tabs & Echo Long Description […]

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.