How to Customize WooCommerce Additional Information Tab Without Plugins?

When you add shipping information to a product page in WooCommerce, they are default shown in the Additional Information tab. This article covers the overview of WooCommerce Additional Information tab and presents 4 ways to customize the Additional Information tab in WooCommerce.

Keep reading if you are looking for a way to make custom changes with such a tab on the WooCommerce product page.

What is WooCommerce Additional Information?

WooCommerce additional information is the extra attributes such as weight, color, dimension, and other information that you want to add to a product description in WooCommerce.

The WooCommerce Additional Information tab in Product Pages is used to display product additional in WooCommerce. When you add information like weight, dimension, and other shipping details, they are automatically shown in the WooCommerce additional information tab on the product page.

In this article, we are sharing with you 4 ways you can do to customize WooCommerce additional information tab on your WooCommerce product page.

All of these methods require you to add custom code to the theme Functions.php file, so it is highly recommended that you create a child theme to avoid any issues that may occur to your main theme.

After creating a child theme and activate it in your store, you can get access to the Functions.php theme file by navigating to Appearance > Theme Editor. Then, follow the step below to do your custom adjustments with your child theme.

How To Rename Additional Information Tab in WooCommerce?

The default title of the WooComemrce product additional tab on the product page is “Additional Information”. You can easily rename the WooCommerce additional information tab by copying the following code under the functions.php file locates in your child theme.

/**
 * Rename product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {

	$tabs['additional_information']['title'] = __( 'Product Data' );	// Rename the additional information tab

	return $tabs;

}

In this example, I am going to change “Additional Information” to “Product Data”. You can replace it with the title you wish by changing the text “Product Data” to the text you want.

To access the theme Functions.php file, from the WordPress dashboard, go to Appearance > Theme Editor, then paste the code you have copied before at the end of the file.

After that, click the Update File button to save your changes. Then visit the page frontend to see how it looks.

How to add text to the WooCommerce Additional Information tab content?

In case, you have a lot of product attributes and would like to add a link text like “Click here for more information on product attributes” either above or below the list of attributes, you can use this code to add custom text to your Additional Information tab.

 add_action( 'woocommerce_product_additional_information', 'print_custom_html' );
 function
 print_custom_html
 (){ ?> <a href="#">Click here
 for
 more information on product attributes</a> <?php } 

You can change the text to your preference by replacing the text “Click here for more information on product attributes” in the code snippets with the text you want.

Achieve the theme Functions.php file, copy and paste the code above at the bottom of the file editing page, and then Update the file.

Now, take a look to see how it works on the WooCommerce product page.

As you can see, a new link text has been included below the additional information table.

How to Hide/ Remove Additional Information Tab In WooCommerce?

The Additional Information tab often includes shipping information like weight and dimension. So it is quite irritating and, frankly, very pointless in some cases, for example, you are selling downloadable products in your store.

In such situations, you can consider hiding the additional information tab in your WooCommerce product page.

There are 2 methods for you to hide WooCommerce additional information tab:

Method 1: Using PHP code

To hide product additional information, you can copy the code below and paste it under the Functions.php file of your child theme.

/**  
* Remove product data tabs  
*/ add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); 
function woo_remove_product_tabs( $tabs ) 
{     unset( $tabs['additional_information'] );   
// Remove the additional information tab     return $tabs; }

As you can see, there is no Additional Information tab on the product page anymore.

Method 2: Using CSS code

The second way to remove WooCommerce additional information tab is by using CSS code. First, copy the code below.

/* To hide the additional information tab */
 li.additional_information_tab {
 display: none !important;
 } 

Just navigate to Appearance > Customize > Additional CSS to get access to the CSS code editor page. Then you put the CSS snippets that you have copied in there:

Here, you can have a live preview while you are customizing the CSS code. Finally, click the Publish button to save your change.

That is the process to remove WooCommerce additional information tab on your single product page. Now, let’s move to another way to customize product additional tab in WooCommerce.

How to move WooCommerce Additional Information tab to Description Tab?

Another customization you can do is moving the Additional Information. You can do that with the code snippets below.

This snippet will help you move the additional information tab to the product description tab. So that all content of the additional tab will be displayed under the “description” tab on WooCommerce product page.

// Remove additional information tab
add_filter( 'woocommerce_product_tabs', function( $tabs ) {
	unset( $tabs['additional_information'] );
	return $tabs;
}, 98 );

// Insert additional information into description tab
add_filter( 'woocommerce_product_tabs', function( $tabs ) {
	$tabs['description']['callback'] = function() {
		global $product;
		wc_get_template( 'single-product/tabs/description.php' );
		if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
			wc_get_template( 'single-product/tabs/additional-information.php' );
		}
	};
	return $tabs;
}, 98 );

All you need to do is copying the code, then paste it into the Functions.php theme file.

Remember to Update File and visit the product page to see the result.

The Additional Information tab now is removed and the content is included in the Description tab.

Final Words

Above are some practicable methods for you to make further changes while customizing WooCommerce single product page. With these ways, you can change, remove the additional information tab, or move the additional information to the product description tab, which helps you optimize your shop page and make it fit your requirements. That will partly have a positive effect on customers’ buying decisions.