Create a Custom Product Tab

In this tutorial I will show you how to add a new tab on WooCommerce product page. We are going to do it without plugins because it is really easy. Well, it depends on what you are going to display inside your tab, but in general it is simple.

You may also be interested in how to remove default tabs or rename them or change their order.

Now let’s take a look at the screenshot what we are going to achieve in this tutorial.

woocommerce add product tab
The product tabs may look differently depending on a theme you’re using. I am using WooCommerce default theme – Storefront.

And the code:

add_filter( 'woocommerce_product_tabs', 'misha_custom_tab' );

function misha_custom_tab( $tabs ) {
	
	$tabs[ 'misha_custom_tab' ] = array(
		'title'    => 'About Misha',
		'callback' => 'misha_custom_tab_content', // the function name, which is on line 14
		'priority' => 50,
	);
	return $tabs;
	
}

function misha_custom_tab_content( $slug, $tab ) {
	echo '<h2>' . $tab[ 'title' ] . '</h2><p>Tab Content. You can display something in PHP here as well.</p>';
}

Read this tutorial to learn more about how to choose a priority parameter.

A quick look on the arguments of the function:

Adding Multiple Product Tabs

Sometimes you may need to add two or even three custom product tabs at the same time. For the first time doing it, it may be unclear, so we will cover it in a second.

The main thing you have to keep in mind is that you do not have to use woocommerce_product_tabs hook or a callback function multiple times. Period!

add_filter( 'woocommerce_product_tabs', 'misha_multiple_product_tabs' );

function misha_multiple_product_tabs( $tabs ) {
	
	// first tab
	$tabs[ 'misha_tab1' ] = array(
		'title'    => 'Suggested use',
		'callback' => 'misha_tabs_callback',
		'priority' => 40,
	);
	
	// second tab
	$tabs[ 'misha_tab2' ] = array(
		'title'    => 'Warnings',
		'callback' => 'misha_tabs_callback',
		'priority' => 50,
	);
	
	return $tabs;
	
}

// we use the only callback function for all the tabs
function misha_tabs_callback( $slug, $tab ) {
	
	// display tab heading for every tab
	echo '<h2>' . $tab[ 'title' ] . '</h2>';
		
	if( 'misha_tab1' === $slug ) {
		// echo wpautop( 'Take 1 veggie capsule 1 or more times daily, with or without food.' );
		// you can get the tab content from product custom fields
		echo wpautop( get_post_meta( get_the_ID(), 'suggested_use', true ) );
	}
	
	if( 'misha_tab2' === $slug ) {
		echo wpautop( 'Keep out of the reach of children' );
	}
}

Here we are.

add multiple product tabs in WooCommerce

Conditioning Custom Product Tabs

You can also use global $product object to create some conditions. For example you can display your tab only for a specific product:

function misha_custom_tab( $tabs ) {
	
	global $product;
	
	if( 5 == $product->get_id() ) {
		$tabs[ 'misha_custom_tab' ] = array(

Or for specific product types:

function misha_custom_tab( $tabs ) {
	
	global $product;
	
	if( $product->is_type( 'variable' ) ) {
		$tabs[ 'misha_custom_tab' ] = array(

# WooCommerce, Product Tabs

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X