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:

<?php /** * 1) Hook into the filter woocommerce_product_tabs * where we add in our own custom tab */ add_filter( 'woocommerce_product_tabs', 'devign_woocommerce_wordwide_shipping_tab' ); function devign_woocommerce_wordwide_shipping_tab( $tabs ) { // Add in a new tab to the $tabs array $tabs[] = array( 'title' => __( 'Worldwide Shipping', 'child-theme' ), 'priority' => 50, 'callback' => 'devign_woocommerce_wordwide_shipping_tab_content' ); return $tabs; }

This filter allows us to define new product tabs for our product page, each new tab can be broken down as follows:

  1. title: The given title for the new tab.
  2. priority: The location you would like the tab to appear (e.g. to make it appear first simply change the priority to 1).
  3. 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.

<?php /** * 2) Note our callback - we add in our desired tab content * into the callback function */ function devign_woocommerce_wordwide_shipping_tab_content() { // Our desired tab content echo '<h2>Worldwide Shipping & Delivery</h2>'; echo '<p>We currently use two options for international deliveries: A non-tracked service with Royal Mail and a tracked service through DHL.</p>'; }

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.

The results

Adding a custom tab into WooCommerce product pages

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.

Get involved in the discussion

Need a little extra help?

If you need a little more help from our resources, drop us a message direct - we'd love to help!

Leave a message Ask a question