WooCommerce product single page has three tabs by default:
- Description
- Additional Information
- Reviews
We can edit them, reorder them, delete them or add new tabs by using woocommerce_product_tabs
filter. If you do a print_r
, this is how the default array looks like:
Array (
[description] => Array (
[title] => Description
[priority] => 10
[callback] => woocommerce_product_description_tab
)
[additional_information] => Array (
[title] => Additional information
[priority] => 20
[callback] => woocommerce_product_additional_information_tab
)
[reviews] => Array (
[title] => Reviews (0)
[priority] => 30
[callback] => comments_template
)
)
Remove Tabs
Following snippets demonstrates how to remove one or more tabs:
/**
* Remove tabs
*/
function careless_remove_woocommerce_product_tabs( $tabs ) {
//remove the description tab
unset( $tabs['description'] );
//remove the additional information tab
unset( $tabs['additional_information'] );
//remove the reviews tab
unset( $tabs['reviews'] );
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'careless_remove_woocommerce_product_tabs', 999 );
Reordering Tabs
Following snippets demonstrates how to reorder tabs. Tab with lowest priority will be shown first and so on. But first we will check if a tab exists, to avoid accidentally set this tab without proper data. For example: the Additional Information
tab will only show if the product has weight, dimensions or attributes (with “Visible on the product page” checked). If we try to set priority
for Additional Information
, in this case, we will set Additional Information
tab with only priority
, which will output some html, without any data, thus breaking your style.
/**
* Reorder tabs
*/
function careless_reorder_woocommerce_product_tabs( $tabs ) {
if ( isset( $tabs['reviews'] ) ) {
$tabs['reviews']['priority'] = 5;
}
if ( isset( $tabs['description'] ) ) {
$tabs['description']['priority'] = 10;
}
if ( isset( $tabs['additional_information'] ) ) {
$tabs['additional_information']['priority'] = 15;
}
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'careless_reorder_woocommerce_product_tabs', 999 );
Renaming Tabs
/**
* Rename tabs
*/
function careless_rename_woocommerce_product_tabs( $tabs ) {
if ( isset( $tabs['description'] ) ) {
$tabs['description']['title'] = __( 'Product Information' );
}
if ( isset( $tabs['reviews'] ) ) {
$tabs['reviews']['title'] = __( 'Product Ratings' );
}
if ( isset( $tabs['additional_information'] ) ) {
$tabs['additional_information']['title'] = __( 'Product Attributes' );
}
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'careless_rename_woocommerce_product_tabs', 999 );
Customize Tab Contents
We can customize tab contents using callback
to set our own custom function. Following snippet demonstrates how to customize description
tab.
/**
* Customize description tab
*/
function careless_customize_woocommerce_product_tabs( $tabs ) {
if ( isset( $tabs['description'] ) ) {
$tabs['description']['callback'] = 'careless_custom_woocommerce_description_tab_content';
}
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'careless_customize_woocommerce_product_tabs', 999 );
/**
* Description tab content
*/
function careless_custom_woocommerce_description_tab_content() {
echo '<h2>Custom Description</h2>';
//your content goes here
}
Add a New Tab
We can add custom tabs quite similarly like we customized the description
tab above.
/**
* Add a new product tab
*/
function careless_add_new_woocommerce_product_tab( $tabs ) {
//add new tab
$tabs['my_awesome_tab'] = array(
'title' => __( 'My Awesome Careless Tab', 'woocommerce' ),
'priority' => 40,
'callback' => 'careless_woocommerce_my_awesome_product_tab'
);
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'careless_add_new_woocommerce_product_tab', 999 );
/**
* My Awesome new tab content
*/
function careless_woocommerce_my_awesome_product_tab() {
echo '<h2>My Awesome New Tab</h2>';
//your content goes here
}
If you are doing multiple operations (i.e. adding new tab, renaming, reordering and/or deleting some tab at the same time), it is better to do them all in a single function.
Code goes in the functions.php
file of your active theme.