How to Add Custom Tab on WooCommerce Product Page?

How to Add Custom Tab on WooCommerce Product Page?

Wondering how to Add Custom Tab on WooCommerce Product Page? Along with the expansion of the e-commerce market, the number of specially developed topics and plugins has grown tremendously in this domain.

WooCommerce is the most popular plugin in e-commerce domain. Therefore, many theme developers used the popularity of this plugin for their advantage and have developed WooCommerce compatible themes.

Developing the customer website as a topic, such as Enfold Theme, I realized that the individual product page had an extra tab in addition to the ‘Details’ tab, and it is the ‘review’ tab.

However, the customer needs 6 different tabs on the individual product page. To get the necessary results, I also used the following method for optimization.

If you are facing problem related to WooCommerce Setup talk to our WordPress Experts dial + 1 888 614 0555(Toll-Free).

What is WooCommerce Custom Tab?

WooCommerce Custom Tab is a plugin. This plugin will help you show product details in different tab pages. Even the use of shortcodes is to show the product support forums (for example, bbpress), galleries and statistics.

However, it has some features and some functions that are available in the PRO version only. Also, available languages: English and Chinese- translated by Janfeng Lee.

Now let’s take a look-

How to Add Custom Tab on WooCommerce Product Page

wOOCOMMERCE (1)

The ‘woocommerce_product_tabs’ filter that is provided by WooCommerce should be used to add custom tabs to the product page in WooCommerce. Also, this code should be added to the function.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 using this code, I could already add an extra tab to the existing tab. In the tabs section I had added the tab and after that given below:

WOOCOMMERCE 2 (1)

Add Content to WooCommerce Custom Tab

Once, a custom tab is added to the content. After that, the tab can be added in two ways. The content can be added as static data or the content can be fetched from the custom fields that are added to the admin dashboard.

Thus, to add static data to a custom tab. The following code should added to the functions.php file of your theme.

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

Hence, if you have custom fields in your admin dashboard for your product, the following code would be useful to get the required code.

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

Consequently, an instance can be added where the data on the custom tab should be added to the cart. For example, if the additional tab is to personalize the product, then the data specified by the customer will need to add to the cart.

Reorder Custom Tabs

Any custom tabs that is added can be arranged according to the requirement. To get this, the ‘woocommerce_product_tabs’ filter will be used once again. The same code is also shown 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;
}

CONCLUSION

Here, in this blog, we have discussed on How to Add Custom Tab to a WooCommerce Product Page? Consequently, we concluded it’s definition, and method.

Through above method, you can easily add Custom Tab to a WooCommerce Product Page. If you have any question, tell us in the comments section provided below.

This post is helpful to you! Also, share this post with your peers.

Need instant help for WordPress? Just feel free to avail our Services by dialling our WordPress Technical Support number, + 1 888 614 0555. We will be glad to help you.

Read More Blogs:



Leave a Reply