How to add custom WooCommerce product tabs to your product pages

Published

If you’re using WooCommerce to sell products on your website, you may have come across the need to add additional and important information to your product pages. Naturally, one of the places that makes the most sense to add additional information about your products to is the tabs section below the product description. But how do you add new custom WooCommerce product tabs?

Well, that’s what were going to explore in this guide. We’ll run you through all the steps that are needed to be able to add tabs with the product information that you want to display.

Adding WooCommerce product tabs to the product page is not default or out of the box functionality, so we’re going to use a plugin to help us out. Don’t worry though, it’s really simple to implement and as mentioned, we’ll show you exactly how.

So, let’s get in to it.

Step 1: Install a custom WooCommerce product tabs plugin

The first step is to install the plugin that will allow the tabs to be added. Now, you have a few choices here as there are a number of plugins available that can add this functionality to WooCommerce for you. In fact, here at WP Geeks we’re in the process of creating our very own WooCommerce product tabs plugin.

Our plugin is not quite ready yet, but in the meantime, we can still get product tabs added to your online store by using another plugin. The plugin that we recommend that you use for now is called Custom Product Tabs For WooCommerce and can be downloaded from the WordPress.org plugin repository.

Go ahead and install the plugin and once you’ve activated it on your store, move on to step 2.

Step 2: Decide what type of tab you would like to add (global or product specific)

It’s time now to make a decision about what type of tabs you want to add to your products. This will be unique to each individual store and product. There are two main types of product tabs that you can create. They are:

  1. Global tabs – These are tabs that are created for use across all products. You create the tab once, add the information that you need and then re-use it across all products. This is very useful if you want to include the same tab on multiple products and not have to re-type all the information.
  2. Product specific tabs – These are thats that only apply to 1 specific product. It’s custom designed just for a single product. It cannot be re-used on another product.

Based on the purpose of the product tab that you want to add, you should know which type of tab to create. In this guide, we’ll set up one of each tab type.

Step 3: Setup a global tab for multiple products

Navigate to “Custom Product Tabs” and you’ll see an interface which allows you to create global tabs. To add a new tab, click the “Add Tab” button at the top of the page. Type in a title, name and the tab content in to the fields provided and then click “Save Tab”.

Custom WooCommerce Product Tabs - Global
Adding a custom WooCommerce product tab globally to our demo store

Your tab is now ready to be used on any product that you wish. We’ll get to adding global tabs to a product in step 5.

Step 4: Add a individual product tab to a product

Now, let’s navigate to a single product to add a custom tab just for that product. So click on “Products” on the WP Admin sidebar and select the product that you would like to add the tab to. Upon clicking the title, you will be directed to the edit page of the product. Scroll down to the “Product data” meta box.

You’ll now see a new submenu item in the meta box called “Custom Tabs”. Click that and you’re now given the opportunity to create a custom tab, just for this product. So add a title and the tab content. Once done, click “Save Tabs”

WooCommerce Product Tabs
Adding a single WooCommerce product tab to our product

Step 5: Assign the global tab to a product

Ok, let’s go ahead and assign the global tab that we created in step 3 to this product as well. To do that, click the “Add a Saved Tab” button. A modal will present itself and give you the ability to add the tab we created earlier. Go ahead and add the global product tab that we created.

Choose Custom WooCommerce Product Tab
Modal selection for the global product tab selector

Great! Now save the product and visit the actual product page. You should now be seeing a product page with the two additional custom WooCommerce product tabs.

We told you this was going to be easy! 🙂 We hope you enjoyed this guide and found it useful. Did you perhaps get stuck on any of the steps above? Maybe something isn’t working out as you expected. Feel free to let us know in the comments and we’ll try our best to help you out.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.