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).
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
}
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
Hi Stacie, did you forget the closing curly bracket?
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 ?
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
Great!
bro thanks so much you save my day every time, i like your website !
awesome bro
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.
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!
Update: working when I disabled all plugins apart from woo. Will fathom it out. How to get reviews underneath this code above? TY…
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!
Cool!
thanku sir very helpfull you site
yourewelcomesir
This post saved my life, best ever, thank you very much
Thanks!
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.
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!
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.
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 !
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!
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.
Thanks!
The top looked great, but then it made a copy of the description twice and just shoved it down.
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
Thank you so much! You’re a lifesaver! 🙂
Great!
Hi
If I want to add below >> the attributes, addittion information? how can I do?
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
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 }Awesome! 🙂
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(); }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?
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
Works perfectly for me on Woo 3.5.1, PHP 5.6.38 and WP 4.9.8
Great 🙂
Hi,
The snippet works – but now I’ve lost the additional information tab. Is there a way to show that below the long description?
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
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…. 🙂
Nice, thanks Roberta 🙂
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.
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 🙂
Sorry, never mind, I figured out the problem. The code works fine on all three browsers.
Great 🙂
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?
Hi,
Can you please confirm this snippet is meant to remove tabs and overwrite Short Description with Long Description?
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 🙂
Hi
I am using the Woocommerce theme. Your snippect echos the text but fails to remove the description box!
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
This doesn’t work for me! Is the code the latest for WooCommerce?
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?
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 .
🙂
I love these snippets. They just work. 😉
Thank you Madeleine!
Best Blog to learn advance woocommerce!
Thank you Santhosh!
Hi,
Would it be possible to remove the long description tab only if its empty?
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 🙂
Thanks so much – all your Woo customization tips are so helpful!!
Jean, much appreciated 🙂 Thanks so much!