How to Add Custom Tab to a WooCommerce Product Page

By September 27, 2016 May 9th, 2019 WooCommerce

I’m currently wrapping up a new WooCommerce-powered ecommerce website for a client, and thought that I’d share the code I’m using to add multiple new tabs to the product pages. And on this tutorial I explain how to add multiple tabs, which is what I needed to do for project woocommerce.

For adding custom product tabs to the Woocommerce single product there are 2 solutions:
1. Use a free/commercial plugin
2. Do it yourself
And today I will add custom tab with myself that don’t use any plugins. All code in this tutorial should be added to the functions.php file of your theme.

How to Add Custom Tab to a WooCommerce Product Page

How to Add Custom Tab to a WooCommerce Product Page

1. Add a Custom Tab to Product Page

The ‘woocommerce_product_tabs’ filter provided by WooCommerce should be used as below to add custom tab to a product page in WooCommerce.

Adding a custom tab. We will add an array with the following values for the title, priority and the callback function for our new tab. To set the title we will add New Custom Product Tab. To set the new tab after the Additional information tab we will add a priority 50. To display our custom content with the callback function called catanis_new_product_tab_content()

2. 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 html or the content can be fetched from the custom fields added into the admin dashboard.

3. 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.

4. Remove specific tabs from WooCommerce product page