WooCommerce : How to Create a Custom Product Tab on Product page.

Add custom product tabs in WooCommerce

This post is regarding how we can add custom tabs on a product page on the front-end.
These tabs are additional to the default ‘Description’, ‘Reviews’ and ‘Additional information’ tabs that are available by default.

The default tabs in WooCommerce have the following priorities:

• Description 10
• Additional information 20
• Reviews 30

For adjusting your product in between them we need to give priorities in between.

How to Change the default tab position

function ChangeTabPosition( $tabs ) { 
  if ( isset( $tabs['description'] ) ) {
    $tabs['description']['priority'] = 29;
  }
  if ( isset( $tabs['additional_information'] ) ) {
    $tabs['additional_information']['priority'] = 10;
  }
 return $tabs;
}
add_filter('woocommerce_product_tabs','ChangeTabPosition' );

For Adding Product Tab on Product Page we have to define tab and it’s callback in woocommerce hook 'woocommerce_product_tabs'.

The ‘woocommerce_product_tabs’ filter provided by WooCommerce should be used for adding a custom tab to a single product page in WooCommerce. The code should be added to the functions.php file of your theme.

Example :

function AddNewTab( $tabs ) { 
  $tabs['my_new_tab'] = array(
    'title'    => 'New Tab',
    'callback' => 'new_custom_tab_content',
    'priority' => 51,
  );
return $tabs;
}
add_filter('woocommerce_product_tabs','AddNewTab' );
function new_custom_tab_content($slug,$tab) {
  echo '<h3>' . $tab['title'] . '</h3><p>Add Your Content.</p>';
}

 

We can also do this For a Specific Product Or For Specific Product Type.

Example : For Specific Product

function  AddNewTab( $tabs ) { 
  global $product; 
    if( $product->get_id() == 786 ) {
    $tabs['my_new_tab'] = array(
      'title'    => 'New Tab',
      'callback' => 'new_custom_tab_content',
      'priority' => 51,
    );
  }
return $tabs;
}
add_filter('woocommerce_product_tabs','AddNewTab');
function new_custom_tab_content($slug,$tab) {
  echo '<h3>' . $tab['title'] . '</h3><p>Add Your Content.</p>';
}

Example : For Specific Product Type

function AddNewTab( $tabs ) { 
  global $product; 
    if( $product->is_type( 'variable' ) ) {
    $tabs['my_new_tab'] = array(
      'title'    => 'New Tab',
      'callback' => 'new_custom_tab_content',
      'priority' => 51,
    );
  }
return $tabs;
}
add_filter('woocommerce_product_tabs','AddNewTab');
function new_custom_tab_content($slug,$tab) {
  echo '<h3>' . $tab['title'] . '</h3><p>Add Your Content.</p>';
}