1. Home
  2. WordPress
  3. 5 Ways to Customize Product Tabs in WooCommerce!

5 Ways to Customize Product Tabs in WooCommerce!

I was recently working on WooCommerce for some of my client projects, where I learned to customize product tabs according to the client’s requirement. Well, you got it. I’m going to share few tips that helped me to customize product tabs in WooCommerce – which includes, renaming tab names, re-ordering the tabs, adding custom tab, removing a tab etc…

Adding a custom tab

You can easily add custom tabs in WooCommerce either by adding a code snippet in theme’s functions.php file or using a plugin.

Copy and paste the below code in functions.php file to create a new tab in single product page.

add_filter( 'woocommerce_product_tabs', 'tg_new_product_tab' );
function tg_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'This is new tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'tg_new_product_tab_content'
);

return $tabs;
}
function tg_new_product_tab_content() {

// The new tab content
echo '<h2>This is the new tab - specifications</h2>';
echo '<p>Type in the contents for the new tab here...</p>';

}

You may also use YIKES Custom product tab plugin.

add,remove,arrange tabs

Re-order Product-tabs

Copy and paste the below code in functions.php and modify it accordingly to reorder the tabs.

add_filter( 'woocommerce_product_tabs', 'tg_reorder_tabs', 98 );
function tg_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 1; // 1st - reviews
$tabs['description']['priority'] = 2; // 2nd - description
$tabs['additional_information']['priority'] = 3; // 3rd - Additional information third

return $tabs;
}

Rename product tab

Copy and paste the below code in functions.php file. e.g., rename “Additional Information” tab with “Product Info & Care” as shown below.

add_filter( 'woocommerce_product_tabs', 'techglimpse_rename_tab', 98);
function techglimpse_rename_tab($tabs) {
$tabs['additional_information']['title'] = 'Product Info & Care';
return $tabs;
}

Remove all tabs in product page

The below code will remove all tabs in product page. Lookout for ‘unset‘ function which takes tab name as an argument.

add_filter( 'woocommerce_product_tabs', 'tg_remove_product_tabs', 98 );

function tg_remove_product_tabs( $tabs ) {

unset( $tabs['description'] );
unset( $tabs['reviews'] );
unset( $tabs['additional_information'] );

return $tabs;

}

Remove a specific tab in product page

The below code will remove “reviews” tab from single product page. Lookout for ‘unset‘ function which takes “reviews” as an argument.

add_filter( 'woocommerce_product_tabs', 'tg_remove_product_tabs', 98 );

function tg_remove_product_tabs( $tabs ) {

unset( $tabs['reviews'] );
return $tabs;

}

That’s it. Check out my other articles on WooCommerce.

Updated on September 2, 2017

Was this article helpful?

Related Articles

Add A Comment