How to Add New Tab WooCommerce Product Page

Do you want to add a new tab on the product page of your WooCommerce store? Customers need to be informed about the products that you are selling to them. This is why WooCommerce includes a single product page to display all the relevant information about the products you sell.

Table of Contents

From the back end, you can modularize the content and present lots of information about the product. The design is clean and does not overwhelm the user.

Add New Tab WooCommerce Product Page

You may want to add a custom tab on the WooCommerce product page to add more information about your products. Remember the more, the better.

However, by default, WooCommerce has three tabs only. They are:

Additional information
Reviews
Description (displayed only if you have added description content for the product)

Here is how they are displayed in the front end:

These are the default tab content structure in WooCommerce.

In this tutorial, we will share with you how to add a custom tab using a PHP script. There are many plugins in the market today, which can help you achieve this. Some of them are premium and some free.

However, they may collide with your theme, or some will not work on your site. Let us look at how you can achieve this programmatically.

Steps to Add New Tab WooCommerce Product Page

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will add a custom tab on the WooCommerce product page.
Add the following code to the php file:

[php] /**
* Add a custom product data tab
*/

add_filter( ‘woocommerce_product_tabs’, ‘njengah_new_product_tab’ );

function njengah_new_product_tab( $tabs ) {

// Adds the new tab

$tabs[‘test_tab’] = array(

‘title’ => __( ‘New Product Tab’, ‘woocommerce’ ),

‘priority’ => 50,

‘callback’ => ‘njengah_new_product_tab_content’

);

return $tabs;

}

function njengah_new_product_tab_content() {

// The new tab content

echo ‘New Product Tab’;

echo ‘Here\’s your new product tab.’;

}[/php]

This is the outcome:

How the Code Works

The code helps you to add a custom tab programmatically. We’ve used the ‘woocommerce_product_tabs’ filter provided by WooCommerce to add a custom tab to a product page.

Once a custom tab has been added the content for the tab can be either added as static data or the content can be fetched from the custom fields added to the admin dashboard.

Conclusion

In this tutorial, you have learned how to add a custom tab on the product page. We recommend using a child theme to add the PHP snippets. It is important to add important information on the product page so that your customers can make an informed decision.

You should be very careful because any error will break down your site. This means that your customers will not be able to make purchases. If you encounter any problems, please contact a qualified WordPress developer.

Editorial Staff

How to Add New Tab WooCommerce Product Page

Add New Tab WooCommerce Product Page

Steps to Add New Tab WooCommerce Product Page

How the Code Works

Conclusion

Similar Articles

Related