Remove Tabs but keep product description in Woocommerce
The problem.
A client did not like the Tabs on Woocommerce Single product pages. The ones that include product description, Product specifications if you have entered any and product reviews. That is easy, a single line of code will remove all of the tabs (see below), but she still wanted to display the product description.
The solution
You will need to edit some PHP. New to PHP editing? see the Tools panel at the end of this post. You should also setup a Child theme, for more on that see the Note panel at the end of this post.
I was working with the free MyStile theme from Woothemes (v1.3.0) and Woocommerce (v2.1.7) on WordPress 3.9. This solution should work for most themes I believe, although I can not guarantee it.
This goes in your functions.php file in your Child Theme.
First the simple line that removes the tabs completely, thus also removing the product description.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
Now add this code which will display the product description on its own without the tabs wrapper. The number in the last line will effect where on the page the description appears. To be clear the numbers do not refer to a physical location, they are the order in which the actions run, lower numbers first. This then effects the order in which things are created and drawn to the page, thus effecting where they appear. More on priority can be found here.
In my case I set it to 5 so that it would appear just after the Product Title. Things may differ in your setup as I had customized the layout. Just try numbers, you will not break anything. Woocommerce seems to use a range from 0 to 30 in increments of 5, so try 5, 10, 15 etc.
<?php
function woocommerce_template_product_description() {
woocommerce_get_template( 'single-product/tabs/description.php' );
}
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_product_description', 20 );
?>
I also wanted to remove the heading which rather superfluously said “Product description” So I added a little CSS in my child themes Style.css. You may need to be more specific with the CSS as ‘.summary h2’ may effect h2 headings on other types of pages and posts. You could use ‘.single-product .summary h2’ as the CSS selector.
/* remove "Product Description" heading */
.summary h2 {
display:none;
}
Tools:
You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
Child Themes
You want to change code in a way that will not be over-written when you update your theme. So if you do not already have one you should setup a child theme. I always do this if I am making any changes to the main theme, even if it is only CSS. That is not the topic of this post so here is a link to a tutorial on creating a child theme, you will find the WordPress codex article here.
25 Comments
Elian
March 7, 2016Works perfectly!
Alex Williams
January 25, 2016I’ve been struggling for hours looking for a solution like this. Thank you!
Dawn
December 15, 2015This is exactly what I was looking for, but I have a question: where in the functions.php should I add this code? When I add it to the beginning of the doc I get a Fatal Error message. Thanks!
Diana
December 14, 2015This helped a lot – Thank you!!
Helder
December 13, 2015justin March 15, 2012 at 11:35 am Hey Roy, thanks for sptiopng by and checking out my plugin. If you’re familiar with PHP development then adding support for additional tabs would be pretty straightforward; it would require changing the code in a number of places though, more than would be easy to explain here. I don’t know how big of a rush you are in, but I can tell you that someone else is working on a paid extension for WooCommerce that will allow for additional tabs, and a lot more control over the tabs than my little free plugin offers. I don’t know when it will be available, but when it is I’ll link to it from here. I’ll try and take some time in the future to make this plugin support additional tabs, but for now I hope this helps. Thanks again
mike
November 5, 2015OK this worked … just had to remove the <?php wrapper … thanks
mike
November 5, 2015I tried this and it has not worked. nothing changes. Any ideas?
WP … 4.2.4
WooComm … 2.3.13
Randy
October 5, 2015This is EXACTLY what I was looking for. Thanks a ton! Now just have to figure out how to pull that section out of the parent div to span full width. Thanks again.
benjamin
September 29, 2015Brilliant! Very Grateful!
Gustav Wiberg
June 24, 2015Really really god and helpful! Thank you! Saved my day!
thomas
June 21, 2015thank you for this, great.
how to do exactly the same, but including the additional infos of a product in the content area, below the description?
such as delivery time, product specs etc., not shown by a tab, but like your solution, just in content, which is perfect.
similar to our current magento site.
thank you and cheers . . . thomas
Bojidark
April 21, 2015Thanks, it worked out great with the latest versions of wordpress and woocommerce to date. One thing I had to remove to get it done was the open and closing PHP tags in the second code.
Regards.
Andrew Butler
February 26, 2015What a gem you are, that looks so much better! Thanks
Sillo
February 26, 2015Very nice, thank you very much – this saved my azz xD
Casey
February 24, 2015Hi, this is really informative, thank you. Somehow, I managed to move the product description up under the pricing but the tab stayed below as well. Having been back and forth for an hour or two now trying to remove the product description tab from the bottom…I can’t replicate what I did initially (two description fields) or even get the product description where I want it at all. Any help is greatly appreciated. Thank you!
Eric
February 22, 2015This saved the day. Thanks!
lydia Campbell
February 18, 2015Help please, I used your code above to try and remove wrappers around text on my site in the php code and crashed the site. Can you help in reversing this disaster?
Matt
January 16, 2015Sorry – a quick correction – that last line should read:
add_filter( ‘woocommerce_product_description_heading’, ‘blankout_productdescription_heading’ );
Matt
January 16, 2015Very helpful – thank you!
Another way to remove the text ‘Product description’ is to use a filter. In functions.php in your theme, add in the following code:
// Remove ‘Product Description’ heading from Product page
function blankout_productdescription_heading() {
return null;
}
add_filter( ‘woocommerce_product_description_heading’, blankout_productdescription_heading );
Joana
December 17, 2014Where should I add the second piece of code exactly? Still inside the functions.php ?
Dado
September 20, 2014Thank you so much! This was super helpful
Josh Winn
August 20, 2014Thanks for this simple solution. It worked perfectly to remove the tabs on a custom theme I’m developing.
Kaia
August 19, 2014Thank you soo much!
Solved my issue with only few lines of code <3
mowgly
August 10, 2014this was very useful, thanks! 🙂
William
July 19, 2014Super helpful! Thank you!!!