WooCommerce includes a section in the templates of single products that displays a set of tabs, along with each tab’s respective content (e.g. “Description” and “Reviews” tabs). In the Storefront theme, these WooCommerce product tabs look like this…
Notice the tab with the title of “Test Tab?” That’s a custom tab! You can set the title to be anything you want, and you can add any content you’d like into the tab’s content area. Here are a couple ways to do this.
Via Plugin
The easiest way to do this without touching any code is to use the Tab Manager module in the UltimateWoo plugin.
Once you’ve installed and activated UltimateWoo, you simply enable the Tab Manager module. From there, you can access the Tab Manager settings on a global or per-product basis. With the Tab Manager module, you can also re-arrange the tabs to display in your preferred order.
Using the UltimateWoo Tab Manager module is the quickest and easiest way to add and manage multiple product tabs.
Via Code
You can also add custom product tabs via PHP. This process is quick and straightforward with a little coding knowledge, and if you’re not adding a bunch of tabs, or trying to rearrange them. Since the code can easily become convoluted, we recommend the Tab Manager module if you’re trying to do anything more than add a few tabs.
The example code to add the “Test Tab” from above looks like this.
<?php
/**
* Add a custom tab to WooCommerce products
*
* @param (array) $tabs - Registered tabs
* @return (array) $tabs - Updated array of tabs
*
* @author UltimateWoo <www.ultimatewoo.com>
*/
function uw_custom_product_tab( $tabs ) {
global $post;
$tabs['uw_custom_product_tab'] = array(
'title' => 'Test Tab',
'priority' => 50,
'callback' => function( $key, $tab ) {
echo "Our custom test tab's content, added via PHP!";
}
);
return $tabs;
}
add_action( 'woocommerce_product_tabs', 'uw_custom_product_tab' ); On line 15, we add a new element to the $tabs array. Each array element takes an array containing a title, priority, and callback element. The title sets the title of the tab. The priority determines where the tab will display in the list. The callback is the name of a function that will render the tab’s content.
If you’d like to remove any of the default tabs, you would use unset( $tabs['key'] );, where key is the appropriate key of the tab you want to remove. The keys of the default tabs are description, additional_information, and reviews.
Working with custom product tabs in WooCommerce is not too tricky, and can be quite easy. While we recommend the Tab Manager for fast, code-free creation and edition of WooCommerce product tabs, adding the tabs via code will give you unlimited control over what content is displayed in the tab.
