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:
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?