Customizing WooCommerce product single page tabs (data tabs)

WooCommerce product single page has three tabs by default:

  1. Description
  2. Additional Information
  3. 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.