Add Custom Product Tabs to WooCommerce Single Product Pages

Create custom product tabs using woocommerce_product_tabs filter modifying tabs array with title, callback function, and priority parameters. Default tabs include Description priority 10, Additional Information priority 20, and Reviews priority 30, position custom tabs between or after using priority numbers. Define callback function rendering tab content with slug and tab parameters, display custom HTML, product specifications, size guides, or warranty information, conditionally show tabs for specific product IDs using get_id method, display tabs only for certain product types like variable products with is_type check, change default tab positions with priority modifications, and organize product information with multiple custom tabs enhancing product pages.

How to Create a Custom Product Tab on Product page

Woocommerce Woocommerce Hooks Wordpress

How to Create a Custom Product Tab on Product page Tutorial/Guide

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 :

Before

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>';
}

    After 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>';
}

 

๐Ÿ’ก Have a Coding Problem?

Search our archives or reach out to our team for solutions and expert advice.