In the past 2 Blog posts we told you how to rename and change priority of tabs in woocommerce single product page.

Today we gonna present you how to add a new extra tab in to woocommerce single prodcut page tabs

Lets get start!

For do this add following code to your functions.php file. (Get help of a professional developer if you don’t know how to do this)

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

// Adds the new tab

$tabs['custom_tab_01_tab'] = array( // This is the ID for tab (for spaces have to use underscore "_")
'title' => __( 'Custom tab 01', 'woocommerce' ),
'priority' => 2,
'callback' => 'custom_tab_01_tab'
);
//Im adding two tabs so i repeat same code here with ids and names changed as i want
//if you want only one tab to added after you adding a tab add this code to end of the tab adding code return " $tabs; } "
//Like the end of the second code below

$tabs['custom_tab_02_tab'] = array(
'title' => __( 'Custom tab 02', 'woocommerce' ),
'priority' => 3,
'callback' => 'custom_tab_02_tab'
);

return $tabs;
}

Now we need to add data for this tabs. before we start coding for that we have to add this following code to function.php to add our next functions to wordpress.


// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

Now add following code to add input areas for our new tabs.
***NOTE** : These input areas appear in your product >> Product data >> General >> here will be your custom input areas ***


function woo_add_custom_general_fields() {

global $woocommerce, $post;

echo '

';

// Custom tab 01
woocommerce_wp_textarea_input(
array(
'id' => '_Customtab01',
'label' => __( 'Custom tab 01', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter Custom tab 01 content here.', 'woocommerce' )
)
);

// Custom tab 02

woocommerce_wp_textarea_input(
array(
'id' => '_Customtab02',
'label' => __( 'Custom tab 02', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter Custom tab 02 content here.', 'woocommerce' )
)
);

echo '

';

}

function woo_add_custom_general_fields_save( $post_id ){

// Custom tab 01
$woocommerce_textarea = $_POST['_Customtab01'];
if( !empty( $woocommerce_textarea ) )
update_post_meta( $post_id, '_Customtab01', esc_html( $woocommerce_textarea ) );

// Custom tab 02
$woocommerce_textarea = $_POST['_Customtab02'];
if( !empty( $woocommerce_textarea ) )
update_post_meta( $post_id, '_Customtab02', esc_html( $woocommerce_textarea ) );
}

function additional_tab_content() {

// The new tab content

$prix = get_post_meta( get_the_ID(), '_Customtab01' );
echo $prix[0];
}

function specs_tab_content() {

// The new tab content

$prix = get_post_meta( get_the_ID(), '_Customtab02' );
echo $prix[0];
}

Enjoy 🙂