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.

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;
}

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.

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

WordPress Tips & Tricks
With tags: WooCommerce, WooCommerce Customization

Comments

Vik Flair :

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.

Log in to Reply
Dennis50 :

I cant seem to link directly to the tabs, any way to fix this?

Log in to Reply
mahathun :

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;
}

Log in to Reply 1
- susotogil :
  
  @mahathun thank you so much!!!
  
  Author post should update the article with your code.
  
  Thanks again.
  
  Log in to Reply
Pinalkumar :

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

Log in to Reply
Ray Grau :

Thank you for posting this. Will be testing it shortly.

Log in to Reply 1
- Ray Grau :
  
  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.
  
  Log in to Reply