In this post I’m going to show you how you can add custom tabs on a product listing on the front-end. These tabs are additional to the default ‘Description’, ‘Reviews’ and ‘Additional information’ tabs that WooCommerce has available by default.
In case you’re looking for adding custom tabs in the admin area, check this post that describes how you can add custom options in the edit product screen.
With the examples I’m going to add some conditional checks to ensure the tabs are only shown when required. For example a ‘Shipping’ tab for physical products only.
A custom tab in its most basic form
This example will simply add a tab that is added to each product.
The result of the code:
Only show a tab for physical products
Here’s a example that adds shipping information to only your physical products:
Sorting between the existing tabs
Good chance you want to position the custom tabs exactly at the right position for your scenario. Luckily WooCommerce has taken that in account and ensured you can easily set the ‘priority’ to your needs. The value you’re setting represents the position in which all the available tabs will be sorted in. The default tabs in WooCommerce have the following priorities:
So if you’d like to sort it between the first and second you could use any number between 10 and 20, and between 20 and 30 to sort is between the ‘Additional information’ and ‘Reviews’ tabs.
Changing the default tab position
Its a bit outside the scope of this post as its modifying existing tabs vs. creating new tabs, but lets also cover how you can change the position of the default tabs real quick. With the ‘priority’ option this is really easy to do like so:
Using this it will change the order to show the Reviews tab as first, Additional information second and Description as last.