Now that WooCommerce 2.0 is in the wild I figured it was finally time to update my original post about adding multiple tabs to WooCommerce Single Product pages.
Please note that I would never argue that my code is the most elegant and/or best way to achieve the end result. There are several premium plugins available that do a much better job of managing multiple tabs. Definitely consider using Justin Stern’s WooCommerce Tab Manager for more advanced options.
Nonetheless, this solution is free and has been tested as a working solution. Again, if you have suggestions to improve my code I’m all ears. Definitely ping me via the comment section or via e-mail. I’m considering posting my code to GitHub as well. I’ll post the link here once I do.
The goal of the original code was to enable support for multiple product tabs. I have simply updated the original code to be compatible with WooCommerce 2.0. All of your data will remain intact after upgrading the original code. If you’re looking for a solution that’s compatible with an older version of WooCommerce please see my original post.
Each block of code will enable a new tab. Again, you’ll need to save each block of code as a separate file and then call each file via your functions.php file.
How to create multiple tabs?
- Create two files in your theme directory (I created mine in a separate folder named “inc”)
– custom-woospecs.php
– custom-woodownloads.php
- Call each file from your functions.php file with the code below. Place the code at the top to make it easy after your php declaration.
require_once get_template_directory() . '/inc/custom-woospecs.php'; // woocommerce custom tabs require_once get_template_directory() . '/inc/custom-woodownloads.php'; // woocommerce custom tab 2
WooCommerce 2.0 Compatible Tab Code
- Grab the code for your first tab here: http://pastebin.com/1Zzyq9Cq
- Grab the code for your second tab (uses WP code editor): http://pastebin.com/cWZuRNCH
- Grab the code for your third tab (WP download manager): http://pastebin.com/wSdkBqiL
If you enjoyed this post shoot me back a link or even better donate $10 to the
Navy SEAL Foundation. Cheers!
May 10, 2013
Marieke
Hi,
I really like this solution to add a tab to the product page.
I would like to show related products in a tab in stead of below the page, because it looks nicer on the theme.
Is there a way to do this, the related products need to show on every productpage, therefore it would be easier to ‘hardcode’ it, so I don’t have to add it to every product.
Could you please push me in the right direction on how to accomplish this?
Thank you.
Marieke
May 10, 2013
Ben Blanco
Marieke,
I did something similar for my last project.
Example: http://www.heapg.com/products/xlt-ocs/
I’m not sure if it’s still compatible with the latest version of WooCommerce. I’ll test it and post back if it works.
Cheers!
Ben
May 10, 2013
Ben Blanco
Marieke,
I was able to figure it out. Tested as working. Let me know if you run into any trouble. You’ll need to include this in either your functions.php file or your own woocommerce file dedicated to customizations that you call from your ‘functions.php’ file. Hope that makes sense.
Code to enable Woocommerce Upsells / Accessories Tab: http://pastebin.com/ephzRHjQ
Hit me back if you end up having problems implementing this code.
Cheers!
Ben
Oct 8, 2013
shawon
HI,
thanks for your post. I M using your codes in my site but those tabs not supporting shortcodes. can u help me ?
Feb 3, 2014
Gopal Patel
following code will add shortcode filter to your custom field.
$text360 = get_post_meta($post->ID,’360 view’);
echo ““.$text360[0].”“
Feb 3, 2014
Gopal Patel
// insert this code in function where your custom_field data is generated
// $custom_field is generated data. change it with yours.
$custom_field = do_shortcode($custom_field);
echo $custom_field ;
Jun 6, 2013
dlab
Hi Benny im trying to add 2nd tab code but im getting an error message
Parse error: syntax error, unexpected ‘)’, expecting T_STRING or T_VARIABLE or ‘$’ in /home/ddyer/public_html/devada/wp-content/themes/pagelines/inc/custom-woodownloads.php on line 61
Ive checked line 61 and its a character ); .
which is from 2nd code file any ideas how I can correct this error?
Thanks
DLab
Jun 21, 2013
Ben Blanco
Hi DLAB,
Sorry for the late reply regarding the WooCommerce Tab code. Were you ever able to get this fixed? I not able to reproduce the error on my end. I’m happy to help if you’re still stuck.
Cheers,
Benny
(Regarding WooCommerce Custom Tab)
Jun 17, 2013
Alvaro
Hello
thank you for this wonderful tutorial, it works great,
Can you let me know how to enable shortcode in the custom tab with WP code editor, at the moment it is not taking the short code
Thanks
Jun 18, 2013
Len
I tried it, tabs were added but still I have to install the woocommerce tab plugin to show it on a tab display *sigh* payed for the theme then they still asked us to buy the plugin? jeezz nice job though…
Jul 19, 2013
TKT
Hi Ben,
Thanks a ton for the detailed code.
I am adding one extra tab & one for accessories. But
1] I can only see a basic empty tab in between ‘description’ & ‘reviews’ . I am unable to see anything under admin > woocommerce > settings OR under product options
2] Accessories tab is showing on frontend – but again nothing to configure on backend.
PS: New woocommerce update is released today. Could it be something to with it?
Thanks
Jul 19, 2013
Ben Blanco
Hi TKT,
Thanks for the heads up about the woocommerce upgrade. I’ll upgrade and test the code on my development server. I’ll post updated code and update this thread when the issue is fixed.
Cheers,
Ben
Jul 19, 2013
Ben Blanco
Hi TKT,
I updated to the latest version of WooCommerce today. Code listed in my original blog post appears to still be working. When you edit a product you should see new tabs that look like this screenshot: http://d.pr/i/UrdL
My accessories tab code, that I made for @Marieke above, is now throwing an error. I’ll work on a solution and re-post.
Feel free to give me more information so I can help you fix any issues you’re experiencing. There will be no options listed under admin. It’s all listed under the product options.
Accessories are controlled/displayed via product upsells/cross-sells which is also defined under product options.
Regards,
Ben
Aug 9, 2013
Jame
Hi Ben,
Thanks for your nice tutorials! When I follow you it’s working as usuanl. Yet, I have one main issue about the Custom Tabs are also showing in all product pages even if I leave it alone and did enable it on each particular products. It show something blank tabs with no title & content, too.
You could check out this working page coz i’m enable it: http://www.ad-via.com/led/product/fl-eb350d-150w-type-e-flood-light-2/
This is another page that is not enable: http://www.ad-via.com/led/product/flood-light-copy/
Thanks!
Jame
Aug 27, 2013
Schibi
hy ben,
Thanks to your super instructions. I have 2 tabs successfully integrated
But in the first tab is my wysiwyg editor not to see and the input field is very small.
On the second tab there is the wysiwyg editor correct and the input field is the correct size too.
I have, however, also installed the plugin “custom tab lite” of previously from skyverge
do you have any idea how I can activate the wysiwyg editor for the second tab?
I use the latest version woocomerce and the theme superstore
greetings from Germany
Aug 27, 2013
Schibi
Sorry I´m again.
I stand corrected
the wysiwyg editor is displayed only in your second tab.
otherwise in any other tab
kind regards
Aug 30, 2013
foguii
Hi Ben,
Thanks for a great tip!
Just one tiny issue: I can’t seem to be able to include two tabs with a code editor, I’m not sure what to change in the code for the second tab (tried many things!), any hint?
Regards
Sep 9, 2013
Oblivius
Great work Benny, I’m not a dev I know enough to squeak by..
A: Is there a solution for a “Child Theme”?
B: when creating those two .php files and then calling them into the functions.php file it won’t work because I’m not sure which .php file to put which code into?? I get “grab this code for this and grab this for that but sadly, not sure which (custom-woodownload.php or custom-woospecs.php) to put what code into..Sorry for what I’m sure is obvious. The OLD version works to a point when I just paste it into my child.functions.php file.
C: is there a way to code an IMAGE into the new tab details???
Hey thanks for all your hard work. I and many others are super grateful ! Peace !
DC
Sep 11, 2013
Oblivius
Hey Benny, Ya I figured out All my issues..Except the child theme part. I believe I will get there but if you have a concrete fix please post….Thanks again ! YOU ROCK !
D.
Oct 24, 2013
Rex Stevens
I had issues with a child theme as well and changed the code to stylesheet_directory instead of template_directory and it fixed it. You may give that a shot if you haven’t already.
Nov 10, 2013
Ben Blanco
Rex, thanks for the tip man! Hope others can benefit as well. Cheers!
Sep 15, 2013
Nick
Thanks for the help with this post and the previous post. I am new to wordpress and this and your last post from 2012 are helpful, however it is clear I still have a lot to learn. I will do my best to use this code without effing it up. Keep up the good work!
Sep 23, 2013
marcel
Works perfectly, thanks!
Oct 24, 2013
Rex Stevens
Quick question, I am using this on a project and they want a default tab on every product with the ability to edit it on a per product basis. Is there a way to have default content on this tab unless its changed? I can’t seem to figure it out. Any help would be massively appreciated!
Thanks,
Rex
Nov 5, 2013
Denis
Hi! How to hide the tab if they have no content or inactive and off? but it is not exactly time will be displayed.
http://d.pr/i/MJEt
and how to change the name of the tab upsell not through the code, and the site through the admin panel?
sorry for my English translated in Google! 🙂
Oct 23, 2014
M’tijn
not sure if i understand your question (yay for google translate!), but i had a similair problem. after installing the code all of my existing products showed an empty tab. problem is the custom-fields are only added after you save your (existing)products again. after that the empty tab is invisible. since i have 1000+ products i found a small change in the code does the trick aswell.
find this line (around line 70)
if ( $custom_tab_options[‘enabled’] != ‘no’ ){
and change it to:
if ( $custom_tab_options[‘enabled’] == ‘yes’ ){
Dec 12, 2013
Angel
Hello,
For those who are looking to get SHORTCODES working I figured out a way.
Here’s the code: http://pastebin.com/PrPq6sSx
I changed this function
function custom_product_tabs_panel_content( $key, $custom_tab_options ) {
echo ” . $custom_tab_options[‘title’] . ”;
echo $custom_tab_options[‘content’];
}
To this
function custom_product_tabs_panel_content( $key, $custom_tab_options ) {
// allow shortcodes to function
$content = apply_filters( ‘the_content’, $custom_tab_options[‘content’] );
$content = str_replace( ‘]]>’, ‘]]>’, $content );
echo apply_filters( ‘woocommerce_custom_product_tabs_panel_heading’, ” . $custom_tab_options[‘title’] . ”, $custom_tab_options );
echo apply_filters( ‘woocommerce_custom_product_tabs_panel_content’, $content, $custom_tab_options );
}
Cheers!
Dec 12, 2013
Ben Blanco
@Angel Thanks for sharing! Woot!
Dec 12, 2013
SmartwatchBoss.com
thanks so much!
Is it possible to get a WYSIWYG-editor for the custom tab in the backend?
Dec 12, 2013
SmartwatchBoss.com
I have one more question: How can I add more than one custom tab?
If I just paste the code twice an error shows up (redeclared variable).
Thank you!
Dec 14, 2013
Paul
Sorry for the newbie question.
I need to adjust the tabs and content on my Woocommerce site and having little PHP experience am a bit lost.
This is what I need to do:
When you first visit a product page the first tab should not be active and no tab content should be visible.
Once a tab is clicked the content then becomes visible along with the content.
Any help would be much appreciated!
P
Feb 20, 2014
12p
Thanks BEN BLANCO very much, I did 3 tabs as your guide. I want to do fourth, fifth tab. Plz help me.
Mar 11, 2014
peter
the code is sort of working…I see the custom tab in the admin, but when I save the post, page blanks to white. Only way to get it back is by removing the code. Any ideas what is up? thanks, Peter
Mar 11, 2014
peter
this solution worked out… http://www.sean-barton.co.uk/2013/03/sb-add-woocommerce-tabs-wordpress-plugin/
Apr 20, 2014
Andy
Thanks a lot Ben for your article. It was huge help for me.
May 8, 2014
Robert Sykes
Great code and very useful.
One issue I am having is wanting to put a googlemap in the tab, I have done this through the use of a shortcode but the map does not display correctly.
It does work on the description tab no problems but not on the custom, any ideas what the description tab is doing different?
Thanks
May 16, 2014
Umar Hashim
How to make “Enable Custom Tab?” by default checked and Title of the Tab “This is Title”.
so user’s don’t click to enable the tab and enter Title every time they add new product.. both fields filled automatically i.e. Tab Enabled and Title Filled.! and user only add content in WYSIWYG editor….
i used this code example > http://pastebin.com/cWZuRNCH
May 24, 2014
Dejan Kostevski
Hi Ben,
First of all I want to thank you for this nice piece of code. It was just what I was looking for. I just want to point out that you switched Custom Tab 2 with Custom Tab 3 in the links you provided. They work however. 😀 They work magically. :))) I had to temper a bit with the priority attribute to get them positioned where I want them, but that is just a minor code sniffing. All in all, GREAT WORK !
All the best
Dejan Kostevski
Sep 12, 2014
CapitalH
This line
if ( $custom_tab_options['enabled'] != 'no' ){should be like this
if ( $custom_tab_options['enabled'] == 'yes' ){Sep 29, 2014
Elvin
Nice snippets! It’s compatible with latest WooCommerce 2.2.4. Thanks for sharing!
Dec 5, 2014
Steve
Has anyone been able to add an HTML text editor to this yet?