Add or Change Content of Default Product Tabs

It is the last tutorial about WooCommerce product tabs, let me show how to change the content of the default product tabs or add something custom there.

There are already a couple tutorials about WooCommerce product tabs on my blog, so you can find out how to create a new tab, how to rename them or change the tabs order.

Description tab

You probably remember, that the description tab of a product displays the text or HTML which is added to the main content area.

Main content area of WooCommerce products

There is no specific hook for this tab, but you can use the_content filter hook, yep?

add_filter( 'the_content', 'misha_add_something_description_tab' );
 
function misha_add_something_description_tab( $content ){
 
	if( is_product() ) { // I recommend to always use this condition
		$content .= '<p>Your custom text or HTML.</p>';
	}
 
	return $content;
 
}1
Add custom text to description product tab in WooCommerce

By the way, if you’re wondering, what is “About Misha” tab, we learnt how to add it in the previous tutorial.

It is also possible to use global $product to add conditions for some specific products. Like this:

	global $product;
 
	if( is_product() && 10 == $product->get_id()) {

And of course, you can completely change this tab template which is /single-product/tabs/description.php

Change Product Tab Callback Function

There is one more tricky way to change any product tab content – just to replace its callback function.

Please note, that changing the function doesn’t change the tab behavior, for example if the main content area of the product is empty, the tab won’t be displayed no matter what you set as a callback function.

Here is the example of the code.

add_filter( 'woocommerce_product_tabs', 'misha_customize_description_tab' );
function misha_customize_description_tab( $tabs ) {
 
	$tabs['description']['callback'] = 'misha_custom_description_callback';
	return $tabs;
 
}
 
function misha_custom_description_callback() {
 
	echo '<h2>Custom Description Tab Title</h2>';
	echo '<p>Custom description tab content</p>';
 
}

Additional Information tab

This tab allows to add your custom content before or after the default tab content with woocommerce_product_additional_information action hook.

First of all I would like to remind you that the default content of this tab is the product attributes table. If no attributes over there, the tab won’t be displayed. Even if you add something to the hook.

add_filter( 'woocommerce_product_additional_information', 'misha_add_something_add_information_tab', 9 );
 
function misha_add_something_add_information_tab( $product ){
 
	echo '<p>Your custom text or HTML.</p>';
 
}
Add custom content to the additional information WooCommerce product tab

You can also use conditions based on a product object like if( 10 == $product->get_id() ) etc .

In case you would like to completely remove product attributes, you can use this filter hook:

remove_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );

It seems like you don’t need to edit the template of this tab, but just in a case you can find it in: /single-product/tabs/additional-information.php

Review tab

The last but least, the Reviews tab. You can find this tab template single-product-reviews.php directly in woocommerce/templates directory.

That’s all 😁

Would like to add some custom text or HTML to the Reviews tab? You have to rewrite the template in this case or change this tab callback function. No other ways. If you know another way, please let me know in comments below.

More about WooCommerce product tabs:

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 10 yrs of experience.

Need some custom developer help? Let me know

Follow Misha

Need some help with WooCommerce?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Leave a comment

php js HTML CSS Code

I will only use your personal information to contact you. Privacy Policy