WooCommerce allows you to add extra tabs on a product page alongside description, reviews and additional information with the filter, woocommerce_product_tabs.

Let’s say you wanted 2 extra tabs – ‘Ingredients’ and ‘How To Use’ as the heading, you can use the filter woocommerce_product_tabs like so…

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
/**
 * Add 2 custom product data tabs
 */
function woo_new_product_tab( $tabs ) {
	
	// Adds the new tab
	
	$tabs['ingredient_tab'] = array(
		'title' 	=> __( 'Ingredients', 'woocommerce' ),
		'priority' 	=> 15,
		'callback' 	=> 'ska_ingredients_callback'
        );
        
        $tabs['work_tab'] = array(
		'title' 	=> __( 'How To Use', 'woocommerce' ),
		'priority' 	=> 15,
		'callback' 	=> 'ska_works_callback'
	);

	return $tabs;

}

The array values are title for the Tab Title, the priority for how early it appears in the tab tow, lower numbers appear earlier and the callback which is the function called to output the tab’s content.

For the content of the tab you may wish to use a custom field as a text area with ACF – then echo the field name in the function callback…

function ska_ingredients_callback() {
        echo the_field('ska_ingredients');
}

function ska_works_callback() {
        echo the_field('ska_works');

}

This is how it will look

Woocommerce Tabs Extra Product

Here is how you can remove or re-order the tabs.

Related Posts:

Get Beaver Builder Now!
Categorized WordPress Tagged ,

6 Comments

  1. Christoph on February 20, 2020 at 10:46 pm

    It works but how to hide the tab if empty?

    Reply
  2. gaurav negi on January 5, 2020 at 3:13 pm

    What if title key value is spanish with special character. as in that case its showing blank tab without title.
    $tabs[‘ingredient_tab’] = array(
    ‘title’ => __( ‘Ficha técnica’, ‘woocommerce’ ),
    ‘priority’ => 15,
    ‘callback’ => ‘ska_ingredients_callback’
    );

    Reply
  3. Adam on October 8, 2019 at 10:22 am

    Hi, i have problem like Ayah,
    the tabs are showing, but the content no. Thank you.

    Reply
    • Neil Gowran on October 9, 2019 at 4:37 am

      Check all code is in functions.php – test with a simple string (See below response)

      Reply
  4. Ayah on October 5, 2019 at 12:02 pm

    Hello,

    I am using ACF and the content of the text area won’t show on the site even though I added the second code you provided, could you advise me further please?

    Thank you

    Reply
    • Neil Gowran on October 9, 2019 at 4:36 am

      Both code snippets go in functions.php – to rule out an ACF issue – just echo out a string…

      function ska_ingredients_callback() {
      echo ‘what the blazes’;
      }

      Reply

Leave a Comment