How to manage Product Tabs in WooCommerce

This lesson will show you how to rename, reorder and hide the default Product tabs in WooCommerce. It also introduces some of the concepts involved in using the functions.php file in your WordPress theme to override WordPress and WooCommerce code. It requires that you edit the functions.php file, which can be found in your theme folder.

By default, WooCommerce displays information about your products in a set of tabs that appear on every page. However, you may need to change the default tabs to suit your specific requirements.

In this lesson, we'll look at how to do three things:

1. Reorder the product tabs
2. Rename the product tabs
3. Remove one or more product tabs.

This lesson does not cover how to add a new tab. This can be done by installing a separate plugin. We have used, and like, the free version of the Yikes plugin, Custom Product Tabs for WooCommerce, although there are a number of free and paid plugins to choose from, depending on what you need.

How to reorder the product tabs in WooCommerce

The following function can be added to the functions.php file in your theme if you want to override the default product tabs on a WooCommerce product page:

// Override product data tabs
add_filter( 'woocommerce_product_tabs', 'woocommerce_override_tabs', 98 );
function woocommerce_override_tabs( $tabs ) {
    // Your code goes here
    
    // Done - return the result of the modifications made above
    return $tabs;
}

Note that this code doesn't actually do anything because we haven't added any code to the function yet. We'll do that in the next section.

In the meantime, here's how this code works.

• The first line starts with //, which indicates that this line is a comment for us, not for the website. It will be ignored when the page is loaded. We also have some additional comments later on in the code.
• The second line, add_filter, tells WordPress that we want to override some of the code in our website. It is used to "call" the function, or code that starts in the next line.
  • In this case, the code we want to override is a function called woocommerce_product_tabs. This function contains the code inside the WooCommerce plugin that defines the tabs for your product pages.
  • After that, we specify a new function of our own, woocommerce_override_tabs that will contain the code that we will use to override the code inside woocommerce_product_tabs
  • Finally, we specify the "weight" of our function. This allows us to specify when our function should be executed in relation to the woocommerce_product_tabs function. We set it to a high number, 98, to be sure that our code runs after woocommerce_product_tabs.
  • Important - this line is separate to the lines that follow, but is essential if we want this code to work. Without it, the rest of the code will be ignored.
• The next line "declares" our custom function, woocommerce_override_tabs.
  • We start by providing the name of the function, which must be the same as the name we used in the add_filter line. If they are different, our custom function won't be executed.
  • Next, we provide one or more inputs for our function. In this case we need one input, $tabs. This was originally generated by the woocommerce_product_tabs function. By using $tabs as our input here, we are saying to WordPress that we plan to us that information in our new woocommerce_override_tabs function.
• Finally, after two additional comment lines, we have a line stating return $tabs. This takes the current value of $tabs and gives it back to WordPress so it can be used build your product page. It also indicates the end of our function.

For now, add this code exactly as shown here to your functions.php page then visit a product page to make sure that the page still loads correctly. However, if you paste or type this code incorrectly, it could still break your site. If that happens, simply edit the code to match this example. If all else fails, remove the code altogether and check that your site now loads again.

In the next sections, we'll look at how to add code that will modify the $tabs value we got from woocommerce_product_tabs and give that modified version of $tabs back to WordPress.

How to reorder the product tabs in WooCommerce

Let's look at how we can change the order that the product tabs appear in.

Here is the default order for the product tabs in WooCommerce

1. Description
2. Product Information
3. Reviews

Let's say we want to change this sequence so that Reviews are displayed before Product Information.

To do this, modify the code above so it looks like this. It is similar to our earlier code, but now we have added some extra lines to change the order in which the tabs are displayed:

// Override product data tabs
add_filter( 'woocommerce_product_tabs', 'woocommerce_override_tabs', 98 );
function woocommerce_override_tabs( $tabs ) {
    // Change the default sequence of the product tabs
	$tabs['reviews']['priority'] = 15; // Reviews first
	$tabs['description']['priority'] = 10; // Description second
	$tabs['additional_information']['priority'] = 5; // Ingredients last

    
    // Done - return the result of the modifications made above
    return $tabs;
}

Here's how this code works:

• There is a line of code for each tab we want to override. This is because we need to change position of each tab individually.
• In each case, we are overriding an existing value (priority) for each tab within the $tabs variable.
• For each line, we state the name of the tab we are overriding, e.g. description and its priority.
  • The name of the tab is defined within WooCommerce.
  • We must provide the "machine" name of the tab, not the display name (the display name is what we see on our product pages).
  • If the name of a tab has a space in it when viewing the product page, you'll need to add an underscore to get the the machine name of the tab.
  • For example, the machine name for the Additional Information tab is actually additional_information.
  • If you find that this code doesn't work correctly, it could be that you've got the wrong machine name for one or more tabs.
• After the name, we identify the setting we are changing - in this case we are changing the priority of the tab. This controls the order in which the tabs are displayed.
  • The tab with the highest priority will be displayed first. The tab with the lowest tab value will be displayed last.
  • Note that it doesn't matter what order we add these lines to our code - all that matters is the priority value we assign to each tab.
  • If two tabs have the same priority they will be displayed in alphabetical order, e.g. Additional Information would appear before Reviews. However, it's a good idea to set a different priority value for each tab rather than leave it to chance.
• Finally, we return the modified value of the $tabs variable. This is what WordPress will use when it displays the tabs on your product pages.

How to rename the product tabs in WooCommerce

In this section, we will see how to rename the product tabs in WooCommerce. We'll change Additional Information to Ingredients, Reviews to Ratings and Description to Heating Instructions.

The code we will use is similar to the code we used in the previous section:

add_filter( 'woocommerce_product_tabs', 'woocommerce_edit_tabs', 98 );
function woo_edit_tabs( $tabs ) {
	// Rename tabs
	$tabs['additional_information']['title'] = __( 'Ingredients' );	// Rename the Additional Information tab
	$tabs['reviews']['title'] = __( 'Ratings' );				// Rename the Reviews tab
	$tabs['description']['title'] = __( 'Heating Instructions' );		// Rename the Description tab

	// Done - return the result
    return $tabs;
}

Here's how this code works. We'll focus on the lines that are different in this code snippet compared to the code in the previous section. You can review that section for a full description of the code used in both snippets.

• In this section, we are modifying the the title of our tabs (remember we modified the priority of our tabs in the last section).
• We have supplied the new title for each tab in a specific format, e.g. __( 'Ratings' ).
• We then return the modified version of $tabs so WordPress can use it in your product page.

How to hide a product tab in WooCommerce

In this section, we'll hide the Additional Information tab.

As in the previous section, our code is similar to the code in the earlier sections.

add_filter( 'woocommerce_product_tabs', 'woocommerce_edit_tabs', 98 );
function woocommerce_edit_tabs( $tabs ) {
	// Remove tabs you don't want
    unset( $tabs['additional_information'] );

	// Done - return the result
    return $tabs;
}

This code has a single line that does the job of hiding the Additional Information tab.

• We state that we want to unset a tab, i.e. hide that tab.
  • This will stop the tab from being output in the code for the product page.
  • This is a better solution than using CSS to hide the tab with display:none. The CSS option simply hides it, where this method removes it from the page altogether.
• We then name the tab that is to be unset by specifying its machine name - additional_information.
• Finally, we return the modified $tabs varible to WordPress so it can build the page.

How to combine all three into a single code snippet

You may have noticed that we re-used the same code that we starred with for all three examples - reordering tabs, renaming tabs, and removing tabs. But what if we want to do all three?

There are two options here:

1. Create three separate functions and call each separately, one after the other.
2. Combine all three into one function.

Create three separate functions

You could create three separate functions with three separate code snippets. Each code snippet would have:

1. Its own add_filter line.
2. Its own function name.

Here is an example of how that would look. There is a separate function for each (reorder, rename, remove) and they are added one after the other using three separate filter lines. We use the weight (96, 97, 98) to specify the sequence in which these functions will be run.

// Rename/remove product data tabs
add_filter( 'woocommerce_product_tabs', 'woocommerce_reorder_tabs', 96 );
function woocommerce_reorder_tabs( $tabs ) {
	// Code to reorder tabs here

	// Done - return the result
    return $tabs;
}

// Rename/remove product data tabs
add_filter( 'woocommerce_product_tabs', 'woocommerce_rename_tabs', 97 );
function woocommerce_rename_tabs( $tabs ) {
	// Code to rename tabs here

	// Done - return the result
    return $tabs;
}

// Rename/remove product data tabs
add_filter( 'woocommerce_product_tabs', 'woocommerce_remove_tabs', 98 );
function woocommerce_remove_tabs( $tabs ) {
	// Code to remove tabs here

	// Done - return the result
    return $tabs;
}

Combine all three into a single function

Rather than creating three separate functions, it is more efficient and faster to write one function that incorporates all three changes we want to make.

add_filter( 'woocommerce_product_tabs', 'woocommerce_edit_tabs', 98 );
function woocommerce_edit_tabs( $tabs ) {
	// Remove tabs you don't want
    unset( $tabs['additional_information'] );

	// Rename tabs
	$tabs['reviews']['title'] = __( 'Ratings' );				// Rename the reviews tab
	$tabs['description']['title'] = __( 'Heating Instructions' );		// Rename the description tab

	// Re-order tabs
	$tabs['reviews']['priority'] = 15;			// Reviews first
	$tabs['description']['priority'] = 10;			// Description last

	// Done - return the result
    return $tabs;
}

In this code function, we do the following:

1. Remove (unset) the Additional Information tab.
2. Rename the Reviews and Description tab. We haven't renamed the Additional Information tab since we just removed it.
3. Reorder the tabs so the Reviews tab comes first. Again, we don't need the code for Additional Information here since we have already removed it.

Note that although we have not bothered to include Additional Additional Information in the code to reorder or rename the tabs, it might be a good idea to set a value for each just in case you restore the Additional Information later. You could comment those lines out by adding // at the start of them, so they are there but are ignored for now.

Summary

In this lesson, we looked at how to reorder, rename and remove tabs from our product pages in WooCommerce. We also looked at how that code works - what we covered here will be useful when understanding other code snippets you may wish to add to your site.

If you have any comments or questions about how the code in this lesson works, you can add a comment below. Note that your comment will not appear immediately since it must first be reviewed by our team. Please read the comment policy before posting.