How to Create Custom WooCommerce Product Tabs

Your online shop customers need information – the more the better. Thanks to current eCommerce solution WooCommerce for WordPress you can already add additional information to your products. Beside the standard things like name, price, image or short description you can add up to 3 standard product tabs:

1. Description Tab including your long product description
2. Additional information showing your product attributes
3. Reviews displaying customers reviews to your product

But what if you need more custom WooCommerce product tabs? Then you have two options. Either you are able to program in PHP and develop some code, that you can place into your functions.php of your child theme. Or you get yourself a plugin for WooCommerce which lets create tabs as you want without custom programming. We show you how you can add custom product tabs in both ways.

Adding Custom tabs using PHP

If you are familiar with PHP and WordPress you can develop your own solution to add custom tabs to your products. Simply setup a child theme if you do not have one, then go into your functions.php file and start the job. The WooCommerce core offers a custom filter hook to add own tabs with the name woocommerce_product_tabs. You can hook into this filter with ease.

As an example we are going to add a new tab called “Shipping & Delivery Times”. With this we want to give the customer more information about the shipping process like when does my package arrive or what transport companies are used.

We start by hooking into the filter:

add_filter( 'woocommerce_product_tabs', 'my_shipping_tab' );
function my_shipping_tab( $tabs ) {
    // Adds the new tab
    $tabs = array(
        'title'     => __( 'Shipping & Delivery', 'child-theme' ),
        'priority'  => 50,
        'callback'  => 'my_shipping_tab_callback'
    );
    return $tabs;
}

Most important is the title, the priority and the callback function. If you want to change the position of the tab, e.g. make it the first tab, change the priority to 1. The callback is the function we define now. This returns the content inside the tab:

function my_shipping_tab_callback() {

	// The new tab content
	echo '<h2>Shipping & Delivery</h2>';
	echo '<p>We ship for free within USA using UPS.</p>';

}

That’s it – now each product contains this tab. You can also remove tabs or rename existing ones.

But what if you need product specific or category based WooCommerce tabs? For example you need to show a sizing guide but only for products within the category clothing. Then you should take a plugin!

Create WooCommerce Category Tabs

Thanks to the WooCommerce Ultimate Custom Product Tabs Plugin you can create tabs the way you want:

• Create custom Specific Tabs
• Add category only tabs
• Show global product tabs
• Place an Icon in front of tabs
• Add styling and more

That are just some of the most important features this plugin offers for an ultimate product tab management. Lets take the example from above how to create a category specific tab. Go into wp-admin > WooCommerce > Ultimate Tabs. There you enable 1. tab for example, add a tab title, content & priority. Then comes the apply to part. Here you can set where you want this tab to appear on.And that’s it. The tab will now only apply on the hoodies section – easy as pie. What else can this plugin do? It can rename, disable and reorder the standard tabs. Or you can disable the tab functionality at all.

How to disable the WooCommerce Tab Functionality

Sometimes its better for Google SEO or for your customers at all, that they see all content directly. So it might be good to remove the tabbing function to show description, technical data and reviews directly. If you want to remove the tabulator functionality at all then add this custom script:

wp_dequeue_script( 'wc-single-product' );

Then add this custom CSS to hide the product tabs:

.woocommerce-tabs ul.tabs {
display: none !important;
}