
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 | |
} |
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 | |
} |
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' ); |
Using this it will change the order to show the Reviews tab as first, Additional information second and Description as last.
3 thoughts on “Adding custom product tabs in WooCommerce”
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).”;
}
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
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