How to add custom product tabs in WooCommerce
Have you ever found you need Custom product tabs in WooCommerce?
Each and every online store is different when it comes to WooCommerce, depending on your theme you may or may not have the flexibility to add additional content to your store. Content is a vital asset for customers browsing your store, but bundling it all into the same area can seem overkill.
That’s where custom product tabs come in, alongside the basic product tabs that come built into WooCommerce (Description, Additional Information and Reviews) you can actually add in additional tabs into your product setup.
It’s quite easy to develop your own little solution to add custom product tabs in WooCommerce for your product pages.
Adding custom product tabs in WooCommerce using PHP
Disclaimer: Editing your WordPress theme does come with risk. If you are unfamiliar with WordPress and PHP this may not be for you. We never recommend you edit in a production environment and you should always use a child theme (unless of course you are developing your own).
The WooCommerce core boasts a huge collection of custom filters that we can use to add the functionality we require. For this demonstration, we’ll use the woocommerce_product_tabs filter.
We are going to add a custom tab “Worldwide Shipping & Returns” to provide our customers with more information about shipping and returns worldwide.
The first step is to hook into the filter:
This filter allows us to define new product tabs for our product page, each new tab can be broken down as follows:
- title: The given title for the new tab.
- priority: The location you would like the tab to appear (e.g. to make it appear first simply change the priority to 1).
- callback: The function you will call to return the content inside of the tab.
We’ll now define our callback function to build on our tabs content.
Once you’ve added in the callback – you’re done! Each product page now contains a new tab with our content for Worldwide Shipping & Delivery.
As you can see, we’ve successfully added our very own tab into WooCommerce product pages.
What else can I do with this snippet?
In this example, we’ve shown you how to add custom product tabs in WooCommerce but we’ve only hardcoded the values into our demonstration. That isn’t always the idea in the real world, especially if you need specific content on a product level. That being said, our implementation can be extended to fit your requirements including.
- Implementing your own meta boxes to store unique content per product.
- Creating a size guide table with custom fields.
- Using contact forms and shortcodes to insert custom order or quote features.