How to Add / Edit / Customize WooCommerce Product Tabs

The WordPress.org Plugin Repository reports that WooCommerce has over one million active installs. The reason is, WooCommerce has become an incredibly popular eCommerce solution for WordPress. Today, most of the eCommerce sites need the simplest to the most advanced and complex online shops. And most of them wants to build their online shop with WooCommerce. This is mainly because of the flexibility it provides and the ease of customization.

Another very nice aspect of WooCommerce is, there are too many extensions to count and they cover almost every feature or functionality what you need. And the best part is while most of the official extensions will cost you some money or if you can’t find an extension that is what you need, you can always write it yourself.

As a shop owner, you may want to publish more information about your products. In this article, I’ll show you How to Add / Edit / Customize WooCommerce Product Tabs write it by yourself.

There has some available commercial solution also but why do you cost some money when it could fairly and easily do by yourself via some easy actions. In the following tutorial, I’m going to use a few action and filter hooks provided by WooCommerce that allows me to add or edit or customize WooCommerce Product Tabs.

If you use WooCommerce, I’m sure you have noticed that there are three built-in WooCommerce Product Tabs appeared on your product page: Description, Additional Information, and Reviews. How these tabs look will depend on your theme.

Add a custom WooCommerce Product Tabs:

Insert the following snippet code to add a custom tab in your functions.php file:

add_filter( 'woocommerce_product_tabs', 'wpb_new_product_tab' );
function wpb_new_product_tab( $tabs ) {
    // Add the new tab
    $tabs['test_tab'] = array(
        'title'       => __( 'Discount', 'text-domain' ),
        'priority'    => 50,
        'callback'    => 'wpb_new_product_tab_content'
    );
    return $tabs;
}

function wpb_new_product_tab_content() {
    // The new tab content
    echo 'Discount';
    echo 'Here\'s your new discount product tab.';          
}

Removing WooCommerce Product Tabs:

Use the following snippet code to remove the product tabs in your functions.php file:

add_filter( 'woocommerce_product_tabs', 'wpb_remove_product_tabs', 98 );
function wpb_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );             // Remove the description tab
    unset( $tabs['reviews'] );                 // Remove the reviews tab
    unset( $tabs['additional_information'] );  // Remove the additional information tab
    unset( $tabs['test_tab'] );                // Remove the discount tab
    return $tabs;
}

As I add the discount tab using ‘test_tab’ parameter, therefore I unset ‘test_tab’ also. If you don’t need to remove all the following tabs just stay away to unset every tab.

Renaming WooCommerce Product Tabs:

For this purpose, I just diverge the above code which I add before to remove product tabs from my functions.php file and after that add the following snippet code to renaming the product tabs:

add_filter( 'woocommerce_product_tabs', 'wpb_rename_tabs', 98 );
function wpb_rename_tabs( $tabs ) {
    $tabs['description']['title']               = __( 'More Information', 'text-domain' );       // Rename the description tab
    $tabs['reviews']['title']                   = __( 'Ratings', 'text-domain' );               // Rename the reviews tab
    $tabs['additional_information']['title']    = __( 'Product Data', 'text-domain' );         // Rename the additional information tab
    $tabs['test_tab']['title']                  = __( 'Commission', 'text-domain' );          // Rename the discount tab
    return $tabs;
}

Re-ordering WooCommerce Product Tabs:

Use the following snippet code to change tab orders in your functions.php file:

add_filter( 'woocommerce_product_tabs', 'wpb_reorder_tabs', 98 );
function wpb_reorder_tabs( $tabs ) {
    $tabs['reviews']['priority']                = 5;      // Reviews first
    $tabs[test_tab]['priority']                 = 10;    // Commission second
    $tabs['description']['priority']            = 15;   // Description third
    $tabs['additional_information']['priority'] = 20;  // Additional information fourth
    return $tabs;
}

Customise WooCommerce Product Tabs:

Add the following snippet code to replace the description tab with a custom function in your functions.php file:

add_filter( 'woocommerce_product_tabs', 'wpb_custom_description_tab', 98 );
function wpb_custom_description_tab( $tabs ) {
    $tabs['description']['callback'] = 'wpb_custom_description_tab_content'; // Custom description callback
    return $tabs;
}

function wpb_custom_description_tab_content() {
    echo 'Product Description';
    echo 'Product description goes here...';
}

Here, function woo_custom_description_tab_content() is a custom function in line six. You can add your own function and set the function rules inside the function.

That’s it! I hope you’ll like these snippets. If you don’t want to go with this process or you are afraid about any kind of coding there have a few free plugin for custom product tabs. Out of them I would like to describe about WPB WooCommerce Custom Tab Manager.

WPB WooCommerce Custom Tab Manager:

If you would like to customize your site’s product details page with an easy and fastest way, then WPB WooCommerce Custom Tab Manager is for you. This simple and free plugin allows you to add lots of custom product tab including lots of features with its user-friendly interface.

Features:

Add custom tab according to custom post type
Another plugin’s shortcode can be insertable into custom tabs
Tab priority management system, you can set tab sequence
Tab visibility system, you can enable or disable any tab by a simple checkbox. So you don’t need to delete any Tab

Video Documentation:

Free Download

Concluding

WooCommerce product tabs are a great way to tell your customers everything and anything there is to know about your product. Hope the following code snippets will help to customize your product tabs by own.

You can comment below to let us know your thoughts and opinion about the above tutorial for WooCommerce Product Tabs.

WPBean

Blog