How To Add, Remove or Modify WooCommerce Product Tabs

WooCommerce Product Tabs were introduced in WooCommerce version 2.0 with default behavior to show the product’s long description, buyer reviews and additional information. In most cases, the default tabs are not enough when you want to show custom information with the product.

WooCommerce Product Tabs can be easily added or customized via plugins. If you want to have full control over the tabs, like how and where to display them, you can always code your own solution. We’ll discuss both ways to manipulate WooCommerce product tabs.

WooCommerce Product Tabs
WooCommerce Product Tabs

Easy Way To Add WooCommerce Product Tabs : Plugins

There are several free plugins available if you just want to add new tabs. Two of them are Custom Product Tabs for WooCommerce and WooCommerce Product Tabs. To get complete control over WooCommerce Product Tabs, you need buy the official WooCommerce Tab Manager extension. We’ll discuss about the Custom Product Tabs for WooCommerce plugin as this one provides more customization options than WooCommerce Product Tabs.

Configuring the Custom Product Tabs for WooCommerce is pretty straight forward. Once you install and activate the plugin, there will be a new “Custom Product Tabs for WooCommerce” sub-menu under Settings menu. You can add new tab, modify or delete existing tabs from Product Tabs sub-menu.

Custom Product Tabs Sub Menu
Custom Product Tabs Sub Menu

The plugin also lets you add new tab (or choose from saved tabs) from the Add/Edit Product page. There will be a new Custom Tabs tab under product data tabs. You can fully customize your product tabs from here, or reorder them if necessary.

Custom Tabs Options
Custom Tabs Options

Though WooCommerce product tabs plugins allow you to add greatly customized tabs, however nothing comes closer to code them yourself. You’ll have full control over the tabs and customize every bit of them with some simple coding.

Advanced Way To Modify Tabs : Custom Code

WooCommerce has a nice tabs filter to modify the tabs lets you add new tabs, remove existing tabs or even rearrange the tabs. The filter that handles the tabs is woocommerce_product_tabs. It accepts a single parameter, $tabs, which is actually an array of objects containing the details of the tabs. Here are some sample code snippets which will get you started.

Removing Default Tabs

There are three default tabs with each product, Review, Description and Additional Information. The additional information tabs appears only when a product has weight, dimensions or attributes. The code snippet below will let you remove them.

Add Custom Product Tab

If you want to add a custom tab globally (will be added to all products), the code snippet below will do it.

And, this snippet will let you add custom tabs on selected product(s).

Renaming Tabs

If you just want to translate the tab names in your language, use the language pack from WooCommerce, but in case if you want to rename it, the code snippet below will let you do that.

Reordering Tabs

All the tabs are ordered by on the priority set while adding. The display order can easily be changed by changing the priority.

Customizing The Content Of a Tab

The contents of tabs can be set to display custom content by setting a callback function. This will override the default content set by WooCommerce or any plugins.

Note that all these code snippets can be implemented globally or product-wise by adding some simple conditionals.

These are some really simple examples. Product Tabs can be customized to have/display anything you want. If you need help with WooCommerce Product Tabs or have anything to add to the code snippets, please leave a comment below.

Leave a Reply

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