Custom Product Tab for WooCommerce: All you need to know

The best way to help your customers understand your products is by offering them all information they need. The more information you provide, the more they know about your products, which may result in a better conversion rate. Normally, there are 3 tabs in a WooCommerce single product page namely Description, Reviews, and Additional Information. They are enough for almost all online stores; however, in case you want to add more content like instructions, map, or detailed bulk purchases, or any other information, you can add a custom product tab for WooCommerce product page.

In this article, we are going to give you the WooCommerce custom product tab definition, the reasons why you should create a custom tab, how to add a custom product tab for WooCommerce, and the top 5 best plugins helping you create a custom tab in WooCommerce pages.

Keep reading if you are finding the best way to include more tabs on your WooCommerce product page!

What are WooCommerce custom product tabs?

As mentioned earlier, when you need to add further details for your products, you should create a custom tab on your product page. So what is WooCommerce custom product tab defined?

Custom product tabs in WooCommerce are the places that display all additional product information you want to show for customers such as documents, maps, tutorial videos, etc. The standard information may be enough for normal products; however, for some specific items or particular product types, you should include more detailed information to make online shoppers understand more about your products. Or when you would like to provide buyers with bulk purchases information, you can also need a custom tab.

Why do you need custom product tabs in WoooCommerce?

The targeting purpose of adding custom product tabs in WooCommerce is to make customers get more understanding about what you are selling. However, it can offer you much more benefits than you think. Let’s take a look at the advantages you may get if creating a custom product tab on your WooCommerce product page.

• Improve the usability of the product page by arranging the information in a logical and easy-to-understand manner.
• Provide your customers with a more comprehensive perspective by organizing product data as tabs, allowing them to quickly find relevant information to help them determine whether or not this is the product they desire.
• Allow you to include a broader range of content types, such as comprehensive technical datasheets, tutorial videos, and FAQs, without affecting page layouts.
• Use the tabs to add custom promotions without putting in too much effort.

In this tutorial, I will show the way to add a custom tab that shows bulk purchase details for online shoppers by adding custom code. You can apply to add other information by changing the content in the code snippets.

How to add a custom product tab for WooCommerce product page without plugins?

To add WooCommerce custom tabs to product page, you can use the following code and add it to the Theme Functions.php file:

add_filter( 'woocommerce_product_tabs', 'woostify_custom_tab' );
function woostify_custom_tab( $tabs ) {
    $tabs['woostify_custom_tab'] = array(
        'title'    => 'Quantity Pricing',
        'callback' => 'woostify_custom_tab_content',
        'priority' => 50,
    );
    return $tabs;
}
function woostify_custom_tab_content( $slug, $tab ) {
    echo '<h2>' . $tab['title'] . '</h2><p>Buy 10, reduce $10 each one. For more purchases, contact us.</p>';
}

In this example, I am adding a Quantity Pricing tab to the product page. You can change the name of the tab by replacing the text “Quantity Pricing” and “Buy 10, reduce $10 each one. For more purchases, contact us” with the text you wish.

To avoid theme config issues when adding custom code, you should create a child theme and activate it on your WooCommerce store.

To get access to the Function.php file of your child theme, from your dashboard, go to Appearance > Theme Editor

Take a look at the right side of the theme editor page, click on Theme Functions.

Then, copy the code and paste it into the Functions.php file of your child theme.

Here is the result. I have added a Quantity Pricing custom tab next to the product review sections. The content “Buy 10, reduce $10 each one. For more purchases, contact us” is well performed in the custom tab.

How to reorder WooCommerce custom product tabs?

In case you want to change the position of your WooCommerce custom tabs, it is extremely easy.

Let’s take a look at line 6 of the code of the snippet. The “'priority' => 50” is to set the position of the custom tab. The small number you set, the higher position the custom product tab is placed at. Contrastly, the bigger number is, the later the position of the custom tab is put.

Now, I will change the number in the code from 50 to 10. The code will be like this:

add_filter( 'woocommerce_product_tabs', 'woostify_custom_tab' );
function woostify_custom_tab( $tabs ) {
    $tabs['woostify_custom_tab'] = array(
        'title'    => 'Quantity Pricing',
        'callback' => 'woostify_custom_tab_content',
        'priority' => 10,
    );
    return $tabs;
}
function woostify_custom_tab_content( $slug, $tab ) {
    echo '<h2>' . $tab['title'] . '</h2><p>Buy 10, reduce $10 each one. For more purchases, contact us.</p>';
}

Then, update the theme file and see the result in the front end.

The Quantity Pricing custom tab is now placed right after the Description tab. You can change its position by changing the number to 20 or 30 or 40, or even change to a smaller number to put the custom tab in the first place. After that, you should take a look to check if it meets your requirement.

Note: That hook priority, in this case, must be smaller than 98 because the array sorting function is also connected to this hook and has 99 priority. If you set it to more than 98, the code will not work anymore.

How to Show the Custom Tab for Certain Product Types?

All codes above will be applied to all products in your shop. If you want to display the custom product tab on specific product types like simple products, variable products, grouped products, or external products, you should use the following code snippets:

add_filter( 'woocommerce_product_tabs', 'woostify_custom_tab' );
function woostify_custom_tab( $tabs ) {
	global $product;
	if( $product->is_type( 'variable' ) ) {
		$tabs['woostify_custom_tab'] = array(
	        'title'    => 'Quantity Pricing',
	        'callback' => 'woostify_custom_tab_content',
	        'priority' => 50,
	    );
	}
    return $tabs;
}
function woostify_custom_tab_content( $slug, $tab ) {
    echo '<h2>' . $tab['title'] . '</h2><p>Buy 10, reduce $10 each one. For more purchases, contact us.</p>';
}

Copy the code above and paste it into your Theme Functions:

The code above will be applied for only variable products in your store. If you want to set it for other types, you can change the text “variable” to the type you wish.

After that, don’t forget to update your file.

How to Show the Custom Tab for Certain Products?

If you wish to add custom tabs to only a specific product, you can use the following code.

add_filter( 'woocommerce_product_tabs', 'woostify_custom_tab' );
function woostify_custom_tab( $tabs ) {
	global $product;
	if( $product->get_id() == 816 ) {
		$tabs['woostify_custom_tab'] = array(
	        'title'    => 'Quantity Pricing',
	        'callback' => 'woostify_custom_tab_content',
	        'priority' => 50,
	    );
	}
    return $tabs;
}
function woostify_custom_tab_content( $slug, $tab ) {
    echo '<h2>' . $tab['title'] . '</h2><p>Buy 10, reduce $10 each one. For more purchases, contact us.</p>';
}

Take a look at the condition statement:

if( $product->get_id() == 816 ) {

The custom tab will be added only for the product with ID 816. You can replace this number with the product ID you want to add further custom tab.

How to get product ID in your WooCommerce store?

This is extremely easy. Just navigate to your WooCommerce product list. Then hover the mouse to the product you wish to add custom tabs. The product ID appears right under the product name. Copy it and paste it into the code.

Now, paste the code to the Theme Functions:

Then see the result on the page front end of the product you chose.

Above are the detailed instruction to create and customize WooCommerce custom tabs without plugins.

If you do not want to add a custom product tab by adding code to your theme file, you can use a WooCommerce plugin or extension. Below are the best WooCommerce tab manager plugins for you to add and customize product tabs on your WooCommerce site.

Top 4 best plugins for you to create a custom product tab for WooCommerce

Custom Product Tabs for WooCommerce

Rating: 4.7/5 (140 reviews)

Pricing: $29.99 – $119.99, Free version available

This is a free WooComemrce plugin that allows you to add custom product tabs to multiple WooCommerce products at the same time. It also helps to show product tabs content in search results and more. The custom tab is placed to the right of the default “Description” tab.

With free version of plugin, you can create simple custom product tab. To unblock the premium features like Global Tabs, Category/Tag Tabs, Order Tabs, WooCommerce Bulk Edit, and Premium Support, you need to get the pro version of Custom Product Tabs plugin.

Key features:

• You can quickly add, delete, and reorganize tabs
• You can add tabs per product
• You can build tabs, save them, and use them across numerous items as needed
• In the tabs, you can use text, photos, HTML, and shortcodes.

To use the plugin, just install and activate it in your site.

Then choose the product you want to include further tab, and dropdown to Product Data section to create and customize your tabs.

Once finishing, just click Update to save your changes.

YITH WooCommerce Tab Manager

Rating: 4.5/5 (63 reviews)

Pricing: $80

YITH WooCommerce Tab Manager is a premium WooCommerce plugin developed by YITH. This plugin enables you to create several custom tabs on your WooCommerce product page.

This plugin also lets you customize WooCommerce product tabs so that you can provide your consumers with detailed information. The plugin makes it simple to include information on your product pages in the form of technical guides, user manuals, FAQs, and so on. Furthermore, product page tabs can be used to market your products as well as upsells and cross-sells.

Key features:

• You can place your tabs wherever you want on the product page.
• You can choose whether to show the custom tab for a specific category or for specific products.
• It offers eight distinct layouts
• You can edit the text in the tab
• You can display an icon next to the tab name
• You can hide the product tabs on mobile devices.

WooCommerce Tab Manager

Rating: N/A

Pricing: $99

WooCommerce Tab Manager is a premium WooCommerce plugin that enables you to create new custome product tabs to showcase further information about the product. It gives users a drag-and-drop interface where you can visually reorder tabs, share tabs among multiple products, and etc.

Key features:

• You can create an unlimited number of custom product tabs
• You can design a default tab style that applies to all products
• Tab content can be shown in search results

Woocommerce custom product tabs

Rating: 5/5 (2 reviews)

Pricing: $19

WooCommerce Custom Products Tabs is a free plugin developed by Motifcreatives. This WooCommerce plugin allows you to add a custom tab in WooComemrce single product page and manage all product tabs in all products.

Key features:

• You can add an unlimited number of tabs.
• It contains six tabs for advanced products (Product FAQs, Google maps, Inquiry form, Image carousel with light box, video carousel with light box and Default editor tabs)
• You can display an icon next to the tab name.

Last Thoughts

Besides the standard information such as description, price, image, customers reviews, or additional information, you should try adding more product information by including more custom tabs in WooCommerce single product page. In order to create a custom product tab for WooCommerce, you can add custom codes to the theme functions file. Although these methods require you some programming knowledge, it costs zero dollars.

Or you can also use a WooComemrce tab manager plugin if you do not want to touch on coding. However, using these WooCommerce plugins costs you some money, and it may also reduce your site loading speed.

Hopefully, this article helped you find out the best way to create and customize WooCommerce product tabs in your store.