Remove Tabs but keep product description in Woocommerce

Posted by on Apr 28, 2014 in Blog, E-Commerce, Woocommerce | 25 Comments

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

  1. Elian
    March 7, 2016

    Works perfectly!

    Reply
  2. Alex Williams
    January 25, 2016

    I’ve been struggling for hours looking for a solution like this. Thank you!

    Reply
  3. Dawn
    December 15, 2015

    This 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!

    Reply
  4. Diana
    December 14, 2015

    This helped a lot – Thank you!!

    Reply
  5. Helder
    December 13, 2015

    justin 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

    Reply
  6. mike
    November 5, 2015

    OK this worked … just had to remove the <?php wrapper … thanks

    Reply
  7. mike
    November 5, 2015

    I tried this and it has not worked. nothing changes. Any ideas?

    WP … 4.2.4
    WooComm … 2.3.13

    Reply
  8. Randy
    October 5, 2015

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

    Reply
  9. benjamin
    September 29, 2015

    Brilliant! Very Grateful!

    Reply
  10. Gustav Wiberg
    June 24, 2015

    Really really god and helpful! Thank you! Saved my day!

    Reply
  11. thomas
    June 21, 2015

    thank 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

    Reply
  12. Bojidark
    April 21, 2015

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

    Reply
  13. Andrew Butler
    February 26, 2015

    What a gem you are, that looks so much better! Thanks

    Reply
  14. Sillo
    February 26, 2015

    Very nice, thank you very much – this saved my azz xD

    Reply
  15. Casey
    February 24, 2015

    Hi, 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!

    Reply
  16. Eric
    February 22, 2015

    This saved the day. Thanks!

    Reply
  17. lydia Campbell
    February 18, 2015

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

    Reply
  18. Matt
    January 16, 2015

    Sorry – a quick correction – that last line should read:
    add_filter( ‘woocommerce_product_description_heading’, ‘blankout_productdescription_heading’ );

    Reply
  19. Matt
    January 16, 2015

    Very 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 );

    Reply
  20. Joana
    December 17, 2014

    Where should I add the second piece of code exactly? Still inside the functions.php ?

    Reply
  21. Dado
    September 20, 2014

    Thank you so much! This was super helpful

    Reply
  22. Josh Winn
    August 20, 2014

    Thanks for this simple solution. It worked perfectly to remove the tabs on a custom theme I’m developing.

    Reply
  23. Kaia
    August 19, 2014

    Thank you soo much!
    Solved my issue with only few lines of code <3

    Reply
  24. mowgly
    August 10, 2014

    this was very useful, thanks! 🙂

    Reply
  25. William
    July 19, 2014

    Super helpful! Thank you!!!

    Reply

Leave a Reply