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.
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.
