Disable, Enable Or Add New Product Tab In Product Single Page Frontend

WooCommerce has 3 standard product tabs:

1. Description Tab including your long product description
2. Additional information showing your product attributes
3. Reviews displaying customers reviews to your product

Add a custom tab

If you know the PHP and WordPress you can develop your solution to add custom tabs to your products. Simply set up a child theme if you do not have one, then go into your functions.php file and start the job. The WooCommerce offers a custom filter hook to add its tabs with the name woocommerce_product_tabs.
For example, we are going to add a new tab called “Shipping & Delivery Times”. With this, we want to give the customer more information about the shipping process as when does my package arrives or what transport companies are used.

/**
 * Add a custom product data tab
 */
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
  
  // Adds the new tab
  
  $tabs['test_tab'] = array(
    'title' 	=> __( 'New Product Tab', 'woocommerce' ),
    'priority' 	=> 50,
    'callback' 	=> 'woo_new_product_tab_content'
  );

  return $tabs;

}
function woo_new_product_tab_content() {

  // The new tab content

  echo '<h2>New Product Tab</h2>';
  echo '<p>Here\'s your new product tab.</p>';
  
}

Note: Most important is the title, the priority, and the callback function. If you want to change the position of the tab, e.g. make it the first tab, change the priority to 1.

Now each product contains this tab. We can also remove tabs or rename existing ones.

Removing Tabs

Use the following snippet to remove specific tabs.

/**
 * Remove product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );              // Remove a description tab
    unset( $tabs['additional_information'] );          // Remove a additional information tab

    return $tabs;
}

Renaming Tabs

Use the following snippet to rename tabs.

/**
 * Rename product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

  $tabs['description']['title'] = __( 'More Information' );                // Rename a description tab
  $tabs['reviews']['title'] = __( 'Ratings' );                                // Rename a reviews tab
  $tabs['additional_information']['title'] = __( 'Product Data' );               // Rename a additional information tab

  return $tabs;

}

Re-ordering Tabs

Use the following snippet to change a tab order.

/**
 * Reorder product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

  $tabs['reviews']['priority'] = 5;                        // Reviews first
  $tabs['description']['priority'] = 10;                        // Description second
  $tabs['additional_information']['priority'] = 15;        // Additional information third

  return $tabs;
}

Customize a tab

The following snippet will replace a description tab with a custom function.

/**
 * Customize product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {

  $tabs['description']['callback'] = 'woo_custom_description_tab_content';	// Custom description callback

  return $tabs;
}

function woo_custom_description_tab_content() {
  echo '<h2>Custom Description</h2>';
  echo '<p>Here\'s a custom description</p>';
}

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories