I find it unusual that after years of sharing tutorials on Business Bloomer there is no snippet for creating a custom product tab on the single product page!
I mean, we’ve seen an example about Related Products in a Custom Tab snippet a while ago, but here I want to concentrate on the actual functionality of adding a custom tab, giving a name and a heading to it, showing it conditionally (e.g. only for a specific product category), and making sure the “scroll to tab” works when the URL contains its anchor tag.
Enjoy!
PHP Snippet: Create a Custom Product Tab @ WooCommerce Single Product Page
/**
* @snippet New Product Tab @ WooCommerce Single Product
* @how-to businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 8
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_product_tabs', 'bbloomer_add_product_tab', 9999 );
function bbloomer_add_product_tab( $tabs ) {
$tabs['docs'] = array(
'title' => __( 'Docs', 'woocommerce' ), // TAB TITLE
'priority' => 50, // TAB SORTING (DESC 10, ADD INFO 20, REVIEWS 30)
'callback' => 'bbloomer_docs_product_tab_content', // TAB CONTENT CALLBACK
);
return $tabs;
}
function bbloomer_docs_product_tab_content() {
global $product;
echo 'Whatever content for ' . $product->get_name();
}
Bonus 1: Display Custom Product Tab Conditionally @ WooCommerce Single Product Page
For example, you may want to show the custom tab only if the current product belongs to the product category ‘plugins’. Simply wrap the previous declaration inside an has_term conditional:
function bbloomer_add_product_tab( $tabs ) {
if ( has_term( 'plugins', 'product_cat', wc_get_product()->get_id() ) ) {
$tabs['docs'] = array(
'title' => __( 'Docs', 'woocommerce' ), // TAB TITLE
'priority' => 50, // TAB SORTING (DESC 10, ADD INFO 20, REVIEWS 30)
'callback' => 'bbloomer_docs_product_tab_content', // TAB CONTENT
);
}
return $tabs;
}
Bonus 2: Scroll to Custom Product Tab If URL Contains Anchor Tag @ WooCommerce Single Product Page
If you redirect users to example.com/whatever-product/#tab-docs, where tab-docs is the anchor tag of the brand new product tab, the following edit will allow you to scroll to it on load.
Unfortunately the default WooCommerce JS does not have this function for custom tabs, so we need to code it ourselves:
function bbloomer_docs_product_tab_content() {
global $product;
echo 'Whatever content for ' . $product->get_name();
wc_enqueue_js( "
$( 'body' ).on( 'maybescroll', '.woocommerce-tabs', function() {
var hash = window.location.hash;
if ( hash === '#tab-docs' ) {
$( this ).find( 'li.docs_tab a' ).trigger( 'click' );
}
});
$( '.woocommerce-tabs' ).trigger( 'maybescroll' );
" );
}
Advanced Plugin: WooCommerce Product Tabs
In case you don’t want to code or edit PHP, I also researched plugins which will allow you to do the same thing as the above code snippet. I found that Barn2’s WooCommerce Product Tabs plugin has this exact feature, plus a lot more too.
This robust plugin lets you add an unlimited number of extra tabs to the single product page. As with the code snippet, you can put whatever you like in each tab. It also has extra features such as letting you hide or rename the default tabs, and add an icon to each tab:
Hi Rodolfo!
Thanks so much for this! Was exactly what I was trying to do! Thank you!
I have a quick question though – on how to implement this multiple times for multiple product categories (Each with different ‘echoes’ ).
– I have set this up for category ‘Ponchos’ and it creates a new tab ‘Size Guide’ and echoes the content specifically for that product type.
– Now I would like to set this up again, but for product category ‘Beach Robes’ – but the size guide for this would have to echo different content than the Poncho category.
Is it as simple as repeating the code you provided a second time in my Functions.php and just changing the values? Or is it more complicated than that?
Many thanks for your help, and for providing the world with this solution! 🙂
Niki
FYI: my current code below
/** * @snippet Add Custom Product Tab Descriptions to Single Product Page * @sourcecode https://www.businessbloomer.com/woocommerce-add-tab-single-product-page/ */ add_filter( 'woocommerce_product_tabs', 'bbloomer_add_product_tab', 9999 ); function bbloomer_add_product_tab( $tabs ) { if ( has_term( 'ponchos', 'product_cat', wc_get_product()->get_id() ) ) { $tabs['size-guide'] = array( 'title' => __( 'Size-Guide', 'woocommerce' ), // TAB TITLE 'priority' => 20, // TAB SORTING 'callback' => 'bbloomer_docs_product_tab_content', // TAB CONTENT ); } return $tabs; } function bbloomer_docs_product_tab_content() { global $product; echo '<strong><span style="color: #f17345;">ONE SIZE FITS MOST </span> </strong> – We have designed the Arzi Beach Poncho as one-size to fit people with sizes from Small through X.Large.<br> Height/Length: 100cm (39.37inches) <br> Width/Waist: 65cm/130cm (25.5/51 inches) <br> <strong><span style="color: #f17345;">Not happy with the size?</span></strong> Send yours back to us unused for a full refund on your ' . $product->get_name(); }Thank you Niki! Inside the bbloomer_add_product_tab() function you can simply add more “sections”:
function bbloomer_add_product_tab( $tabs ) { if ( has_term( 'ponchos', 'product_cat', wc_get_product()->get_id() ) ) { $tabs['size-guide'] = array( // args here ); } if ( has_term( 'beach-robes', 'product_cat', wc_get_product()->get_id() ) ) { $tabs['wash-guide'] = array( // args here ); } // etc. return $tabs; }Hello, Rodolfo
First of all, Thank you for the code, very helpful, I love the code much more than a plugin.
I have a question though, I was using the code with condition to show the Tab only under a specific product_cat like in Bonus 1, and Yes indeed the new Tab shown as expected, but at the same time my other product page like the ones doesn’t belong to this product_cat shows an empty Tab, a Tab without title and content; is there anyway to resolve this? view the screenshot here: https://prnt.sc/MJ1emB1iRLKN
Thank you,
Hey Andy, if you share your custom code here I can take a quick look!
Hello Rodolfo, would you think it’s possible to add a shortcode in the tab section
echo ‘Whatever content for’
or does it need further coding?
Yes! You can just use this in PHP:
….thank you, it works! Would you help me with a little custom edit, if I want to echo a different shortcode when the browser is in a different language? Would it be possible to do something like “if url is domain.com/eng/ then echo shortcode 2?
I’d appreciate if you write some code for me. If not, I thank you anyway.
Great! If you use a multi-language plugin, I’m sure they have a function you can use to do conditional work 🙂
Hi Rodolfo! Many thanks for this; it works perfectly. One question: I want the tab to be open by default. How can I make this happen? Thank you!
Hi Maria! Would it work if your custom tab went to position 1?
Hey, it worked perfectly. The problem is that I can’t change the order of the tabs. Any solution? Many thanks!
Hey Marius, did you play with the “priority” value?
Hello Rodolfo! Thank you for making Woocommerce more understandable for my kind of noobie. Your code works great to create an extra custom single product page tab. Very nice! My problem is that I cannot figure out how to add a shortcode running a tiny 3rd party plugin importing texts etc. from another database. The shortcode and plugin work fine (tested) but how should it coded to be run showing the information on the custom tab?
It seems there need to more coding here, but I have no idea what, LOL
Hello Era! What’s the shortcode you need to add?