Adding your own WooCommerce Tabs simplified step by step

November 5, 2012 | Ecommerce, PHP, Plugins, Plugins, Time Savers, Tutorials, WooCommerce, Wordpress | 33 comments

woocommerce_logoMy original tutorial on WooCommerce product tab addition has gone down very well. However it has been brought to my attention that people who don’t know much PHP are struggling to follow it. This is ok.. we all need to start somewhere but for convenience I have put it all into a plugin and commented each line with instructions accordingly. The content of that plugin is directly pasted below with a download link at the bottom for you. It will work out of the box with no modification. You just need to add a custom field to your products which have additional information. If anyone is interested I shall write another tutorial on how to add a nice WYSIWYG editor to the product admin pages for that more integrated feel.

The Code

// Each tab requires three things. A tab, a panel and some code to initiate it. The functions below are in this order. Note the instructions below.
// This function handles the tab name. When you make your own version you need to change the _1 to something unique (_2 and so on)
// You need to change the #tab-new for each tab to something unique. I suggest just adding a number to the end (#tab-new2). Note this needs to match the id of the next function as explained below
// The wording needs to change as above
function sb_woocommerce_new_tab_1() {
global $post;
 if ($tab_content = get_post_meta($post->ID, 'new_tab_content_1', true)) { //this line represents the custom field which the content for the tab is pulled from. If there is content then the tab will be added. If there is none then it won't be. Remove this line to always show the tab. 'new_tab_content_1' needs to change accordingly as per instructions below
 echo '<li><a href="#tab-new">' . __('New Tab', 'woocommerce') . '</a></li>';
 } //end of if statement. Remove to always show the tab.
}
// This function handles the panel itself. The body of the panel if you like. The name of the function needs to change as above. I suggest using a similar naming convention _2 will do it if your function above is called _2 as well for clarity
// In the first div statement the id needs to change to reflect the href above. So if you called your title tab href #tab-new then you would need to set the id of the panel below to be tab-new (the same but with no #)
// This panel is database driven meaning that the content is pulled from a custom field on the product itself. There is no interface for this so you can go to screen options on the product page and make sure that custom fields are checked and in view.
// Then add a custom field called new_tab_content_1 (in this case. It needs to change for each tab you add to the name of the custom field below.. marked with a comment for your benefit)
function sb_woocommerce_new_panel_1() {
 global $post;
if ($tab_content = get_post_meta($post->ID, 'new_tab_content_1', true)) { //this is the custom field name. Replace 'new_tab_content_1' with your own for each tab 'new_tab_content_2' and so on... Remove this line to always show the panel regardless of whether there is any content
 echo '<div class="panel" id="tab-new">'; //the id="" text needs to change accordingly as above. Do not delete this line.

 echo '<h2>New Panel</h2>'; //this line can optionally be removed if you want. It just adds a title inside the panel content

 echo wpautop(do_shortcode($tab_content)); //This will output the content of the custom field making sure to process any shortcodes that might be within it and auto-paragraphing your text. If you remove the encapsulating if statement then this needs to go as well in favour of some static content.

 echo '</div>'; //required. Do not delete.
 } //remove this to always show the panel.
}
// These two lines 'hook' our functions into WordPress and WooCommerce. Simply change the respective function names and edit the number at the end.
// The number represents a priority.. the lower it is the further to the left the tab will appear. The higher it is the later the functions will be loaded and the lower down the list (further to the right) they will be.
add_action( 'woocommerce_product_tabs', 'sb_woocommerce_new_tab_1', 40 );
add_action( 'woocommerce_product_tab_panels', 'sb_woocommerce_new_panel_1', 40);

Download

[Download not found]

Errors

Some people are getting the following error:

Warning: uasort() [function.uasort]: The argument should be an array in …/wp-content/plugins/woocommerce/woocommerce-template.php on line 791

This is a WooCommerce error and nothing to do with the code I offer you here. Please read my writeup on the error at the bottom of this blog post

A Donate Button!

33 Comments

  1. Bryan

    Hey Sean, thanks for the tuts! This saved me a lot of time and a few bucks as well! And since you mentioned it….I would like to see your tut on adding the WYSIWYG….and Woocommerce shortcode support too?!

    Either way, thanks again and we’ll look you up in the sooner-than-later future to inquire about hiring your servies.

    THANK YOU THANK YOU!

    Reply
  2. John

    Thanks so much for this Sean. The only question I have is what value do I put in the new custom field on the product page?

    Reply
  3. John

    Sorry, maybe that wasn’t clear. I’ve set up a custom field on a product page called new_tab_content_1, added some text to the value field, but no new tab is appearing. thanks for any help.

    Reply
    • Sean

      Hey John,

      In my example the custom field was called new_tab_content_1. I think my code snippet was wrong. You need to include ‘global $post;’ at the top of the function. The title function didn’t have it in my example so won’t work.

      Try that and let me know

      ta
      S

      Reply
  4. Matti

    would love the WYSIWYG tutorial, would be great to see how its implemented.

    Reply
    • Sean

      Hi Matti,

      Actually it’s easier than you think. You can use a plugin like More Fields or Pippin Williamson’s excellent Easy Content Types plugin to add WYSIWYG custom fields to your admin pages and simply put the name of that field into your new tab. I can write a tutorial to do it directly though if you think a plugin is overkill.. which it might be for this little bit of simple functionality

      ta
      S

      Reply
  5. Jason

    Hi Sean, any idea how this can work for Woocommerce 2.01 – it seems the tabs functionality has changed and now they no longer work.

    Reply
    • Sean

      Hey Jason.. yep.. see my new blog post on the subject which will clear it up for you.

      ta
      S

      Reply
  6. Anu

    Hi sean, i pasted the code in functions.php , my all tabs is in product page is gone. can you tell me how to add the Key ingredients tab after description tab.

    Thanks,
    Anu

    Reply
    • Sean

      Hi Anu,

      Can I see your code please?

      thanks
      Sean

      Reply
  7. George

    Hello, I appreciate the help if you can give it.

    I am using your code to rename the description tab, but it is creating a new tab instead of renaming it. What can I do?

    Thanks in advance.

    Reply
    • Sean

      No problem, can you show me your code please?

      thanks
      Sean

      Reply
  8. Michael

    Hi,

    I’ve tried to use this code and also the first test tab of your original post. In both case, the following message message is displayed instead of the tabs (even the default ones disappear):

    uasort() expects parameter 1 to be array, null given in /home/assembly/public_html/wp/wp-content/plugins/woocommerce/woocommerce-template.php on line 791

    The uasort() in question is in this function:

    function woocommerce_sort_product_tabs( $tabs = array() ) {
    // Re-order tabs by priority
    if ( ! function_exists( ‘_sort_priority_callback’ ) ) {
    function _sort_priority_callback( $a, $b ) {
    if ( $a[‘priority’] == $b[‘priority’] )
    return 0;
    return ( $a[‘priority’] < $b['priority'] ) ? -1 : 1;
    }
    }
    uasort( $tabs, '_sort_priority_callback' );
    return $tabs;
    }

    Reply
    • Sean

      Hey Michael,

      Sorry I missed this comment. See my response to Arnaud at 2013/03/27 at 12:21 pm on this.

      ta
      S

      Reply
  9. Michael

    I forgot to mention that I have WooCommerce 2.0.4 and WP 3.5.1, just in case you need that info.

    Regards.

    Reply
  10. arnaud

    Hi Sean,

    I tried your plugin but got this message :

    Warning: uasort() expects parameter 1 to be array, null given in /homez.713/aiguemar/www/wp-content/plugins/woocommerce/woocommerce-template.php on line 791

    Using woocommerce 2.0.5.

    Can you help ?

    Reply
    • Sean

      Hey Arnaud, it’s just a PHP Warning so nothing to worry about. Add this code to your functions.php file in your theme and it should go:

      error_reporting(E_ERROR);

      I should add that this is not an error I caused. It’s just a slight bit of dodgy code within WooCommerce. A simple check to see if the variable passed is an array and has any items would have been a good move but this isn’t anything to worry about.

      ta
      S

      Reply
  11. Cristiano

    Hello, I’m from Brazil, I have a problem in one tab does not know anything about php. This is the error that appears me: Warning: uasort () [function.uasort]: The argument Should be an array in / home/eletrosa/public_html/lojawp3/wp-content/plugins/woocommerce/woocommerce-template.php online 791

    In line of the file shows that this error is written as: uasort ($ tabs, ‘_sort_priority_callback’);

    The error appears as having put a plug simulator plots to display the product tab. The plug would be this: http://wordpress.org/extend/plugins/woocommerce-credit-card-interest-table/

    Could you help me?

    Reply
    • Sean

      Hi Christiano, check my removing the woocommerce reviews tab in WC 2.0+ post and I explain it there.

      thanks
      Sean

      Reply
      • Cristiano

        Good evening. Excuse the ignorance, could you pass me the link, I’m not finding. Thank you.

        Reply
  12. mevan

    Hi nice work
    but when i activate the plugin i got this error in the single product page. and Tabs wont appear.

    Warning: uasort() [function.uasort]: The argument should be an array in /home/vertex/public_html/test/wp-content/plugins/woocommerce/woocommerce-template.php on line 791

    Reply
    • Sean

      Thanks Mevan,

      This is actually very common. It’s a WooCommerce error and now yours to sort. The only way to get rid of it is to turn your error reporting level down. I have explained how to do this in the main article above.

      thanks
      Sean

      Reply
  13. hesham fathi

    i got this error : Warning: uasort() expects parameter 1 to be array, null given in /homez.713/aiguemar/www/wp-content/plugins/woocommerce/woocommerce-template.php on line 791
    Using woocommerce 2.0.5.

    and after i added “error_reporting(E_ERROR);”
    to it the whole tabs disappeared

    Reply
    • Sean

      Thanks hesham, I had highlighted this WooCommerce error above and in other posts but it’s good to hear that you managed to implement it ok and your site is working.

      ta
      S

      Reply
  14. hesham fathi

    can you share the link of your replies on the other posts plz ?

    Reply
  15. Erin

    Well – I have no idea what I’m doing as far as .php. Never dealt with it but am trying to build this cart for my son’s website. I’m having a hard time. I’ve attempted to edit the woocommerce.php child files – however no matter where in the directory I put them – they don’t appear to load (or at least code doesn’t work.) So for grins – I put this code above in the themes functions.php file – and all the tabs disappear. If you have time I would appreciate any insight. (You will have to baby step me though).

    Reply
  16. Jolene

    Hi! Just wanted to drop by and say how helpful your post has been! Much better than the support team of the theme. I managed to configure everything within just 5 minutes using your codes. Simply amazing!

    Reply
  17. Saravana Kumar

    Hi,
    I am using this plugin SB Add WooCommerce Tabs. After i adding products but i want to rename the tabs. Please explain me how to rename it.

    Reply
  18. olja1

    All code remove all tabs! 🙂

    Reply

Trackbacks/Pingbacks

  1. SB Add WooCommerce Tabs – WordPress Plugin | Tortoise IT - [...] plugin only works with WooCommerce Version 2 or newer. I have already written another post last year to show…

Leave a Reply

Divi United

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance PHP Website Developer in Crewe, Cheshire. He is a Wordpress and CMS/Framework specialist.
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

Our Services

  • Wordpress plugin/theme development
  • Divi specialist
  • Ecommerce (Woocommerce, WPSC, Shopify, Magento)
  • PSD to Wordpress theme conversion (Responsive)
  • Website design work (Banners, Logos, Full Site, etc)
  • Website analysis (security, usability, SEO)
  • API Integrations (InfusionSoft, SalesForce, Ontraport, Customer Thermometer, etc..)
  • Wordpress consultancy & expert advice
  • Crisis support
  • Website hosting

The main services offered are Wordpress based although we do a great deal of technical programming for bespoke systems. From troubleshooting, extending frameworks, finding bugs to writing them from scratch.

Find out more by looking through our past projects or get a quote.

Be the first to hear about new products/updates!

This is a mailing list for those people interested in being told when we release a new product (Divi plugin or Theme).

We shall also use this list to let you know about product updates and releases.

You have Successfully Subscribed!