Adding your own tabs to Woocommerce and Woothemes

September 12, 2012 | PHP, Plugins, Themes, Tutorials, WooCommerce, Wordpress | 25 comments

Click for larger image

A short while ago I wrote about how to remove the reviews tab from Woocommerce themes like Wootique (See image to the right). As a reply I was asked how we can add our own tabs and panels with custom or fixed content inside so I thought I would write this quick follow up to explain all.

There are two actions we need to hook into to get our tabs to work.. firstly the tab top and secondly the tab content (or panel as they are known). The following code is a complete example for you to add a new tab and panel pair with hard coded content:

add_action( 'woocommerce_product_tabs', 'sb_woocommerce_new_tab', 40 );
add_action( 'woocommerce_product_tab_panels', 'sb_woocommerce_new_panel', 40 );
function sb_woocommerce_new_tab() {
 echo '<li><a href="#tab-new">' . __('New Tab', 'woocommerce') . '</a></li>';
}
function sb_woocommerce_new_panel() {
 echo '<div class="panel" id="tab-new">
 <h2>New Panel</h2>
 <p>Example content...</p>
 </div>';
}

If you put the above into your theme functions.php file you should see a new tab appear called test. When duplicating this be sure to make sure the anchor tag (<a>) has the correct link to the ID of the panel which should be unique. Woo use the format tab-[name] so best to stick to that really.

The question I had was to be able to put a contact form in there. The simplest method I have found for adding contact forms to WordPress is Contact Form 7. It’s a nicely written and presented plugin with few or no adverts and begging links to annoy their users. It has also been extended by others so has plenty of companion plugins to make it even better. For today though we just want to grab the shortcode from the Contact Form 7 admin page and put it a handy PHP function do_shortcode(‘[your_shortcode]’); as follows.

function sb_woocommerce_new_panel() {
 echo '<div class="panel" id="tab-new">
 <h2>New Panel</h2>';

 echo do_shortcode('[your-shortcode]');

 echo '</div>';
}

In recent projects I have been clever and populated tabs from WordPress custom fields which can be done easily although without massive configuration possibility using the More Types plugin. This allows you to build little forms and attach them to custom post type item edit pages in custom meta boxes. Ideal for making a bespoke yet quick interface.
Assuming that made sense to you.. the following custom field code will come in handy for your panel. It pulls the tab content from the custom field called tab_content. In the event there is nothing in the custom field it won’t show the panel. Remember if you want to hide the panel when there is no content in the custom field then don’t forget to include the same code around the label output.

function sb_woocommerce_new_panel() {
 global $post;
if ($new = get_post_meta($post->ID, 'new_tab_content', true)) {
 echo '<div class="panel" id="tab-new">
 <h2>New Panel</h2>
 ' . $new . '
 </div>';
 }
}

Good luck and if there is ever anything you want me to write about then do let me know using my contact page.

Further Reading, my original post on the matter

A Donate Button!

25 Comments

  1. Louis

    Hi Sean,

    Thanks for this tutorial! Would love to see one on how to clone/override the widgets, so they’d survive an upgrade.

    Reply
    • Sean

      Hey Louis, no problem at all. If by widgets you mean the tabs then as long as the code to add them is maybe in your theme functions.php or a new empty plugin then the changes will not be reverted out when you upgrade. But Woo’s framework upgrade script just upgrades the admin system and some automated stuff. site files are left mostly alone so there is no issue.

      thanks
      Sean

      Reply
  2. Louis

    Sorry Sean, forgot to ask, how would you make the shortcode/c7 form grab the name of the post/product page? I imagine someone sending an email, asking questions… about which product?

    Reply
    • Sean

      No problem. You can use a custom hidden field in CF7 which you can populate using GET or POST. Also you can use JS to add it. In the tab code after the CF7 code declaration just stick a bit of JS which uses the ID of the input field (hidden or otherwise) and adds the_title(); to it.

      Reply
  3. Manning

    Thank you for the code. I tried and it worked for the hardcoded solution and getting ready to try the shortcode code. Do you know how to get rid of the default tabs or change the names?

    Reply
  4. James

    Thanks for helping out hear.
    Please, how do I add my country’s currency to woocommerce plugin

    Reply
  5. Win

    Hi Sean, thank you for great tut. Not being proficient with php I’m a bit stuck. I’ve inserted the code in functions and have the tab, but don’t see it in woocomerce.
    Must have something to do with ” link to the ID of the panel”. Sorry, I’ve no idea. Hope you can elaborate with further instructions for people like me!
    Also, could I use it twice and what would I need to change?
    Thank you in advance for going the extra mile. Great work.

    Reply
  6. Win

    Too bad you decided to not explain further for us less knowledgeable with php. Would have been great help tp a lot of people.

    Reply
      • Win

        Sean, my many thanks for following up on this and many apologies for giving up so soon.
        I will definitely use this and let you know if I have difficulties.
        Thanks
        Win

        PS Others tuts great as well!

        Reply
  7. Simon Vincent

    Excellent tutorial!

    Many thanks for your help tonight Sean, very much appreciated 🙂

    Reply
  8. John Robinson

    Hi Sean, Thank you for the above code. I am VERY new to all of this.

    I am using the Weaver II theme. I have installed Woocommerce and the many plugins including Woocommerce Custom Products Tab Lite, Woocommerce Video Product Tab. They are all working as I would expect.

    I want to add a tab called Consumer Reviews. I copied your code and modified it as follows.

    add_action( ‘woocommerce_product_tabs’, ‘sb_woocommerce_consumer_tab’, 40 );
    add_action( ‘woocommerce_product_tab_panels’, ‘sb_woocommerce_consumer_panel’, 40 );
    function sb_woocommerce_consumer_tab() {
    echo ‘‘ . __(‘Consumer Tab’, ‘woocommerce’) . ‘‘;
    }
    function sb_woocommerce_consumer_panel() {
    echo ‘
    consumer Panel
    Example content…
    ‘;
    }

    I edited the Themes function.php and inserted the above code at the end of the Function.php just before the ?>.

    When I go to add a new product I do not find the ‘consumer tab. What am I forgetting to do?

    Also I would like to add a CSS rule in Weaver II Advanced Options to remove ‘Reviews’ label name. I don’t know what label to use before the display:none.

    Thank you for your response.

    Reply
    • Sean

      Hi John,

      Thanks for your message. It seems that you only omitted the encapsulating div around the panel. The id of the panel needs to reflect the hashtag of the tab so in this case tab-consumer. Note the following code although the site may mangle it in which case revisit my original post above.

      ta
      S

      New Panel

      Example content…

      ‘;

      Reply
  9. Zameer

    Thanks very much for this great tutorial.
    I managed to add the tabs as per my requirement however there is a problem. Some products may not need all the tabs, so I do not want that tab to show at all for those product pages. Is that possible?
    At the moment it shows the tabs but hides content panels if the ‘custom field’ is left blank.

    Reply
    • Sean

      Hey Zameer,

      This is easy enough. Simply add the same IF statement around the tab code. So in the panel where it says IF then gets the custom field info all you need to do is wrap the declaration of the tab title in that too.

      ta
      S

      Reply
  10. James

    Hi Sean,

    Great little tutorial, do you know if these hooks are still in use in woocommerce 2.0? I had a custom tab on my site, but after upgrade it only sits above as a bullet point?

    regards,
    James

    Reply
    • Sean

      Hi James. It seems you beat me to it 🙂 Please see the latest blog post I wrote on the subject to give you details about how to update your code for this.

      ta
      S

      Reply
  11. Mafer Valencia

    I read your article, and it works, yet i need to put a tab with php code, and in your example:
    echo ‘
    New Panel’;

    echo do_shortcode(‘[your-shortcode]’);

    echo ”;
    }

    Your echo is only text, how can I echo a php function?

    Any help?

    Thanks!

    Reply
    • Sean

      Hi Mafer, please can I see your code.. My code should work with PHP.. there is no reason why it wouldn’t.

      ta
      S

      Reply
  12. sola

    you are incredible!!! spent days searching for solutions on various things and everything was right here on your post thank you so much….bookmarked ‘favorite’ 😀

    Reply
  13. UNICA Web Agency

    And if I want more Tabs (Tab1, Tab2, etc…) It’s possibile ?

    Reply
    • Sean

      It is, just edit the top of the plugin file where you will find an array to extend. Nice and simple.

      Reply

Submit a Comment

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

CommentLuv badge

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance Website Developer in Crewe, Cheshire. He is a Full Stack Developer but with extensive experience in Wordpress and other Frameworks. He is the Co-Founder of SitePresser, Layouts Cloud and Page Builder Cloud among other things..
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

SitePresser is the plugin that packages child themes and layout packs for sale. Works with Divi and Elementor.