How to Edit Product Data Tabs on the WooCommerce Single Product Page

How to add a new custom tab on the WooCommerce single product page

There are two ways to add additional custom tabs to the tabbed product information section on WooCommerce single product pages.

Add new custom tabs with Custom Product Tabs for WooCommerce plugin

Custom Products Tabs for WooCommerce is a simple plugin by Yikes, Inc. that allows you to add new custom tabs in the single product page. The new tab is displayed to the right of the “Description” tab.

You can add new custom tabs in two different ways using Custom Products Tabs for WooCommerce.

1. Add new custom tabs to any product from the Edit Product page of that particular products
2. Create a Saved Tab globally and add them to the products you want from the Edit Product page of that particular products

When you create a Saved Tab, you set the tab label and content globally, and this content is used as the default content when you add the Saved Tab to a product. However, the plugin also gives you the flexibility to change the default content when you add the Saved Tab to the product. Here is how to do it.

Install Custom Product Tabs for WooCommerce

Open the WordPress dashboard and go to Plugin > Add New to go to the WordPress plugins repository.

Search for Custom Product Tabs for WooCommerce in the search field. Install and activate the plugin by Yikes, Inc.

Add new custom tab on a per-product basis

Once you install and activate the Custom Product Tabs for WooCommerce, it will add a new tab/menu with the label Custom Tabs in the Product Data section on the Edit Product page.

To see this in action, choose a product and open the Edit Product page.

Click on Custom Tabs.

Now you can see two ways to add a custom tab to the product.

• Add a Tab
• Add a Saved Tab

Add a Tab allows you to create a new custom tab only for this particular product.

Add a Saved Tab allows you to choose from a list of Saved Tabs. In this case, there is no Saved Tab because we haven’t created any Saved Tab. You will see how to create a Saved Tab in the next section.

So, click on Add a Tab to add a new custom tab for this product.

Enter the title and content for the new tab and click on Save Tabs.

If you want to add more custom tabs, you can click on Add a Tab button to add additional custom tabs.

Once you click the Save Tabs, WooCommerce will add the new custom tab in the single product page for only this particular product. Click on the View Product link at the top to view this in the front end.

Now you can see the additional new custom tab we have just added.

Please remember that this custom tab is shown only on this product page. If you want to add the custom tab for more products, you need to repeat the process for all those products.

Custom Product Tabs for WooCommerce plugin also allows you to save tabs that can be reused (with modification if required) for multiple products.

To create Saved Tabs, go to Settings > Custom Product Tabs for WooCommerce.

Click on the Add New button to create a new Saved Tab.

Enter a title and fill the content for this new Saved Tab. Then click on the Save Tab button. This content is the default content of this tab. When you assign this tab to a product, this content is used by default. However, you can also override this content on the Edit Product page while adding this Saved Tab to a product.

You can create multiple Saved Tabs if you want.

To assign the Saved Tab to a product, open the Edit Product page of any product.

Click on the Custom Tabs menu in the Product Data section.

Click on the Add a Saved Tab button to open the list of Saved Tabs.

From the list of Saved Tabs, choose the one you want.

Now the plugin will add the default content that you entered while creating the Saved Tab in the previous step. You can see that the content is not editable.

However, you can overwrite the default content of this Saved Tab only on this particular product page. To do this, check the checkbox for Override Saved Tab for this product.

Now you can edit the title and content if you want. These changes will affect only this particular product page. If you have used the Saved Tab without overriding the content on any other product page, there you can still see the default content of the Saved Tab.

How to remove a default tab from the tabbed product information section on WooCommerce single product pages

You can easily remove any default tab from the product page by unsetting the particular tab using the woocommerce_products_tabs hook. All you need to do is add the following code to the functions.php file in your theme.

This code will remove all three tabs from the product page. If you want to remove only a particular tab, you can remove the corresponding line from the code.

**
 * Remove product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );          // Remove the description tab
    unset( $tabs['reviews'] );             // Remove the reviews tab
    unset( $tabs['additional_information'] );     // Remove the additional information tab
    return $tabs;
}

How to Rename a tab on the WooCommerce product page

The default tab labels are appropriate for most businesses, but if you want to change it for some reason, here is the PHP code to it. All you need to do is add this code to the functions.php file on your theme folder with a few customizations.


//**
* Rename product data tabs
*/
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['description']['title'] = __( 'More Information' ); // Rename the description tab
$tabs['reviews']['title'] = __( 'Ratings' ); // Rename the reviews tab
$tabs['additional_information']['title'] = __( 'Product Data' ); // Rename the additional information tab
return $tabs;
}


This code will change the tab labels like the following

• Description > More Information
• Reviews > Ratings
• Additional Information > Product Data

You can replace the More Information, Ratings, and Product Data in this code with anything you want.

Reorder products data tabs in WooCommerce single product page

Rearranging the order of tabs on the WooCommerce single product page can be done by changing the priority number of the tabs.


/**
* 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;
}


You can change the priority number of tabs to reorder them on the product page. You can assign any number as the priority number for the tabs. The tabs will be arranged in the order priority from the highest priority (lowest priority number) to the lowest priority (highest priority number).

Summary

Product data tabs in the single product page are very important in eCommerce websites. They present information in an organized way without cluttering the design or overwhelming the buyers. It allows you to provide all the information you want without overwhelming the buyers. The default tab structure and labels offered by WooCommerce may not fit all businesses. However, WooCommerce offers the flexibility to customize the product data tabs in any way we want by leveraging the ‘woocommerce_product_tabs’ hook.