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.


Related Content

vps germany
Disclaimer: The content published in this article is the views of the author only. Techglimpse does not gurantee accuracy, completness or validity. If you believe the content on this post violates your copyright, please send us a mail for removal. Read more.