Posted in:

Create a Custom Product Tab on woocommerce single product

Table of Contents

But now we are ready to create a custom tab! It is super-easy, guys. Well, it depends on what you are going to display inside your tab, but creating a tab, in general, is simple.

This is my tab, I use the StoreFront theme, so in your theme tabs could look another way.

Create a custom product tab.

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 15
		'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:

  • $slug – it is misha_custom_tab.
  • $tab – contains all the same parameters of an array on line 5.

What is the reason to put $slug as a first argument of this function you may ask? Easy – it allows you to create multiple tabs and to use the same callback function for each of them. Just add a condition inside for each tab using $slug argument.

Show the Tab for Certain Product Types or Specific Products Only

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

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


Or for specific product types only:

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


Another post: 



Check out our categories: Android Update, Elementor, flutter, Guide, Game, Plugin, Theme, webmaster, SEO, Woocommerce, WCFM


About the author

Post Comments

{{ reviewsTotal }} Review
{{ reviewsTotal }} Reviews
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}