Search

How to Add Custom Tab to a WooCommerce Product Page

Listen to this article
add-custom-tab-woocommerce
Add Tab to WooCommerce Product Page

With the expansion of the eCommerce market there has been a steep rise in the number of themes and plugins which have been developed specifically for this domain. WooCommerce is one of the most popular plugins in the eCommerce domain. Many theme developers have used the popularity of this plugin to their advantage and have developed WooCommerce compatible themes.

While developing a client site with one such theme i.e. Enfold Theme, I realized that the individual product page had only one additional tab apart from the ‘description’ tab and that is the ‘review’ tab. However, the client required around six different tabs on an individual product page. To achieve the required result I used the following method for the customization.

Add a Custom Tab to Product Page

The ‘woocommerce_product_tabs’ filter provided by WooCommerce should be used as below to add a custom tab to a product page in WooCommerce. The code should be added to the functions.php file of your theme.

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
    $tabs['desc_tab'] = array(
        'title'     => __( 'Additional Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
}

So on using this code, I was able to add an additional tab to the already existing tabs. The tab section looked as given below after I had added the tab.

add-custom-tab-info
Product Page After Adding a Tab

Add Content to Custom Tab

Once a custom tab has been added the content for the tab can be added in two ways. The content can be either added as static data or the content can be fetched from the custom fields added to the admin dashboard. The following code should be added to the functions.php file of your theme to add static data to the custom tab.

function woo_new_product_tab_content() {
  // The new tab content
  echo '<p>Lorem Ipsum</p>';
}

If you have custom fields provided in your admin dashboard for your product, then the following code would be useful to achieve the required result.

function woo_new_product_tab_content()  {
    // The new tab content
    $prod_id = get_the_ID();
    echo'<p>'.get_post_meta($prod_id,'additional information',true).'</p>';
}

There can be an instance where the data from the custom tab needs to be added to the cart. For example, if the additional tab is to personalize products then the data specified by the customer would need to be added to the cart. Read  ‘How to Add Custom Data to WooCommerce Cart

Reorder Custom Tabs

Custom tabs that have been added can also be rearranged as per the requirement. To achieve this the  ‘woocommerce_product_tabs’ filter has to be used once more. The code for the same will be as below.

add_filter( 'woocommerce_product_tabs', 'sb_woo_move_description_tab', 98);
function sb_woo_move_description_tab($tabs) {
    $tabs['desc_tab']['priority'] = 5;
    $tabs['reviews']['priority'] = 20;
    return $tabs;
}

[space]

Using the above method, a user can be provided with plenty of content without cluttering the product page. Arranging the data logically not only makes it simpler for the website visitor to understand the features of the product but it also becomes easier for the web admin to maintain the uniformity in data across the product.

[space]

Liked this? Here are some case studies based on other projects that we’ve worked on. Do check them out! 🙂

Aruna Vadlamani

Aruna Vadlamani

7 Responses

    1. I found this very useful IF you want a tab displayed on every product. But not very useful for my client who is building products and adding content via the admin.

  1. add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
    function woo_new_product_tab( $tabs ) {
    // Adds the new tab
    $tabs[‘desc_tab’] = array(
    ‘title’ => __( ‘Additional Information’, ‘woocommerce’ ),
    ‘priority’ => 50,
    ‘callback’ => ‘woo_new_product_tab_content’
    );
    }

    This code is Nicely work in Woocommerce product page.Thank you

  2. if anyone is wondoring why its not working, you need a return at the end

    add_filter( ‘woocommerce_product_tabs’, ‘woo_new_product_tab’ );
    function woo_new_product_tab( $tabs ) {
    // Adds the new tab
    $tabs[‘desc_tab’] = array(
    ‘title’ => __( ‘Additional Information’, ‘woocommerce’ ),
    ‘priority’ => 50,
    ‘callback’ => ‘woo_new_product_tab_content’
    );

    return $tabs;
    }

  3. Dear all,

    I successfully added one tab by following above.

    What do i do if I have to add more than one such custom tabs.

    I tried using the same code twice but it doesn’t work.

    Appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »