Custom Product Page tab

On the product page, the description and the attributes table appear as tabs. You can add your own tab with a few lines of PHP, or without code by using Product Page Customizer.

When product page tabs are shown

Tabs only appear when Products > Settings > Catalog Design > Single Page Design > Select template is set to Formatted (the default). With the Plain template, the same sections are shown one below the other. On screens narrower than 1000px, the tabs are shown as an accordion.

Each tab is a div with a unique id, placed in the area below the product details. Its h3 heading with the catalog-header class becomes the tab title. Visitors can link straight to a tab by adding #<id>_tab to the product URL, for example #extra_product_tab_tab.

Add a tab with PHP

Add this code to your theme’s (or child theme’s) functions.php file, or to a code snippets plugin. The tab is added through the after_product_details action, so it keeps working after plugin updates and you do not have to change any template files:

add_action( 'after_product_details', 'my_extra_product_tab', 30 );</p>
<p>function my_extra_product_tab( $product ) {
	echo '</p>
<div id="extra_product_tab" class="extra-product-tab">';
	echo '</p>
<h3 class="catalog-header">Your Tab Title</h3>
<p>';
	echo '</p>
<p>Your tab content.</p>
<p>';
	echo '</div>
';
}

The priority sets the tab position. The description uses priority 10 and the attributes table uses 20, so 30 adds the tab after them and 5 adds it before them. The $product argument is the product post, so you can show different content for each product, for example from a custom field.

You can also put the same HTML into a custom product page template, for example after the description div in your copy of product-description.php.

Custom Product Page Tab without code

With Product Page Customizer active, you can add tabs without editing any files. Go to Products > Settings > Catalog Design > Single Page Design and find the Product Page Tabs section.

You can add as many tabs as you need by clicking the Add Tab button. Give each tab a unique name in the name field.

Custom tab content for each product

When you add a tab in Product Page Customizer, a separate editor box for that tab appears on the product edit screen. You can enter different content for each product there, using the same editor as the description and short description.