Adding your own tabs to Woocommerce and Woothemes
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
Hi Sean,
Thanks for this tutorial! Would love to see one on how to clone/override the widgets, so they’d survive an upgrade.
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
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?
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.
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?
No problem Manning. You might want to read my original post on the matter which provides this information. Anything you need after reading this just let me know.
http://www.sean-barton.co.uk/2012/05/woocommerce-removing-reviews-tab/
thanks
Sean
Thanks for helping out hear.
Please, how do I add my country’s currency to woocommerce plugin
No problem at all James. Check out my recent blog post for the currency addition: http://www.sean-barton.co.uk/2012/10/adding-currency-woocommerce/
thanks
Sean
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.
Hi Win,
Thanks for your comment. Note my next blog post just completed and fully commented for those who need more information.
http://www.sean-barton.co.uk/2012/11/adding-woocommerce-tabs-simplified-step-step/
thanks
Sean
Too bad you decided to not explain further for us less knowledgeable with php. Would have been great help tp a lot of people.
I have just put all of this into a plugin and explained each line accordingly for yourself and others who are less knowledgeable. Please do let me know if I have left anything out or if it doesn’t make sense and I shall try to explain for you.
http://www.sean-barton.co.uk/2012/11/adding-woocommerce-tabs-simplified-step-step/
thanks
Sean
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!
Excellent tutorial!
Many thanks for your help tonight Sean, very much appreciated 🙂
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.
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…
‘;
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.
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
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
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
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!
Hi Mafer, please can I see your code.. My code should work with PHP.. there is no reason why it wouldn’t.
ta
S
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’ 😀
And if I want more Tabs (Tab1, Tab2, etc…) It’s possibile ?
It is, just edit the top of the plugin file where you will find an array to extend. Nice and simple.