Woocommerce

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

Het Patel

I'm a Professional WordPress Developer with 5+ years of web design and development experience including custom websites for small & enterprise businesses. I also have acquired fame and popularity in API Integration & Development and am responsible for producing high-quality solutions for the company customers, Bringing a deep understanding of Modern HTML, JavaScript, and CSS, Plugin Customization, Theme Customization, Theme Creation, creating websites from scratch, and the software development life cycle, And strong ability to execute and implement standard software architecture patterns.

Share
Published by
Het Patel

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago