In this post I’m going to show you how you can add custom tabs on a product listing on the front-end. These tabs are additional to the default ‘Description’, ‘Reviews’ and ‘Additional information’ tabs that WooCommerce has available by default.

In case you’re looking for adding custom tabs in the admin area, check this post that describes how you can add custom options in the edit product screen.

With the examples I’m going to add some conditional checks to ensure the tabs are only shown when required. For example a ‘Shipping’ tab for physical products only.

A custom tab in its most basic form

This example will simply add a tab that is added to each product.

<?php
/**
* Add the custom tab
*/
function my_simple_custom_product_tab( $tabs ) {
$tabs['my_custom_tab'] = array(
'title' => __( 'Custom Tab', 'textdomain' ),
'callback' => 'my_simple_custom_tab_content',
'priority' => 50,
);
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'my_simple_custom_product_tab' );
/**
* Function that displays output for the shipping tab.
*/
function my_simple_custom_tab_content( $slug, $tab ) {
?><h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
<p>Tab Content</p><?php
}
view raw woocommerce-simple-custom-product-tab.php hosted with ❤ by GitHub

The result of the code:

Only show a tab for physical products

Here’s a example that adds shipping information to only your physical products:

<?php
function my_custom_physical_product_tab( $tabs ) {
global $product;
// Ensure it doesn't show for virtual products
if ( ! $product->is_virtual() ) {
$tabs['shipping'] = array(
'title' => __( 'Shipping', 'textdomain' ),
'callback' => 'my_custom_shipping_tab',
'priority' => 50,
);
}
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'my_custom_physical_product_tab' );
/**
* Function that displays output for the shipping tab.
*/
function my_custom_shipping_tab( $slug, $tab ) {
?><h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
<p>This tab contains shipping information</p><?php
}
view raw woocommerce-custom-physical-product-tab.php hosted with ❤ by GitHub

Sorting between the existing tabs

Good chance you want to position the custom tabs exactly at the right position for your scenario. Luckily WooCommerce has taken that in account and ensured you can easily set the ‘priority’ to your needs. The value you’re setting represents the position in which all the available tabs will be sorted in. The default tabs in WooCommerce have the following priorities:

Description 10
Additional information 20
Reviews 30

So if you’d like to sort it between the first and second you could use any number between 10 and 20, and between 20 and 30 to sort is between the ‘Additional information’ and ‘Reviews’ tabs.

Changing the default tab position

Its a bit outside the scope of this post as its modifying existing tabs vs. creating new tabs, but lets also cover how you can change the position of the default tabs real quick. With the ‘priority’ option this is really easy to do like so:

<?php
// Copy from here to your (child) themes functions.php
function my_custom_product_tabs_order( $tabs ) {
// Double check to make sure the default tabs exist and are not removed at some point.
if ( isset( $tabs['description'] ) ) {
$tabs['description']['priority'] = 30;
}
if ( isset( $tabs['additional_information'] ) ) {
$tabs['additional_information']['priority'] = 20;
}
if ( isset( $tabs['reviews'] ) ) {
$tabs['reviews']['priority'] = 10;
}
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'my_custom_product_tabs_order' );
view raw woocommerce-modify-product-tab-order.php hosted with ❤ by GitHub

Using this it will change the order to show the Reviews tab as first, Additional information second and Description as last.

 

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

3 thoughts on “Adding custom product tabs in WooCommerce”

amit October 28, 2017 at 8:30 pm

Hello,
i want to add custom global product tab just like additional info when a new product is created.I am able to create new tab but cannot find update anything on create new product page.I can see it on display page but how to add info through product edit page.I know i can use custom fields but looking to have it on product page so that shop manager or others can do it without adding custom field but just like they fill additional info.
My Code is

add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
function woo_new_product_tab( $tabs ) {

// Adds the new tab

$tabs[‘test_tab’] = array(
‘title’ => __( ‘Shipping’, ‘woocommerce’ ),
‘priority’ => 50,
‘callback’ => ‘woo_new_product_tab_content’
);

return $tabs;

}
function woo_new_product_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo”.get_post_meta($prod_id,’Shipping’,true).”;
}

Reply
Ben McDonald March 21, 2019 at 2:05 am

Thanks for this, this page is really helpful!! 🙂

Do you know if there is a way to add a product tab only if a certain custom taxonomy has a certain value? Or is that too complicated?

Thanks
Ben

Reply
Jeroen Sormani March 21, 2019 at 10:07 am

Hi Ben,

It is possible to do this with some additional code.
Feel free to reach out through the ‘Hire me’ page if you need help with that.

Cheers,
Jeroen

Reply

Leave a Reply