Guide to Use Additional Information Tab in WooCommerce

Have you ever noticed an Additional Information tab on a WooCommerce website’s product page? This tab is useful when you want to display extra information about products on the frontend. It shows details, like the product’s weight, size, or any other custom attributes you’ve created.

But you may want to change how it looks or where it appears. No worries! We’re here to guide you through customizing this Additional Information tab in WooCommerce to make it work just how you want it to. If you wish to hide it, integrate it with your product description, or give it a new name, we’ll show you how to do it step by step.

In this guide, we will cover

• About WooCommerce Additional Information Tab
• Changing the Name of the Tab
• Ways to Hide the Tab
• How to add additional content in Tab
• Adjust the Tab under the Description Tab

What is a WooCommerce Additional Information Tab

The Additional Information tab in WooCommerce displays additional product details, such as weight, dimensions, and other custom product attributes, to help customers better understand what they’re buying. It’s particularly useful for products that require more information to help customers make informed decisions before making a purchase.

By default, WooCommerce displays product details like weight and dimensions under the “Additional Information” tab. You can add this information while editing a product, and it’ll appear automatically in that section.

Additionally, you can create custom attributes for your products to display extra information related to them. These attributes will be shown in the Additional Information Tab section on your product pages. You can add as many product attributes as needed to show the information about each WooCommerce product.

Example

Imagine you’re selling a laptop; the main description might cover the brand, specifications, and features. But in the “Additional Information” tab, you could include details like the processor brand, RAM size, processor name, and any other specifications that customers might want to know before purchasing. It’s all about ensuring customers have all the details they need to feel confident about their purchase.

You can easily add custom attributes or other information to products directly from the frontend of your website using our Frontend Product Editor plugin.

Benefits of Using Additional Information Tab

The Additional Information tab in WooCommerce offers a valuable space for providing customers with more details about your products. Here are some key benefits of using the WooCommerce Additional Information tab.

• Detailed Product Specifications: The Additional Information tab lets you showcase detailed specifications of your products. It could include dimensions, weight, and other details that customers may want to know before purchasing. Having this information readily available helps customers make informed decisions.

• Improved Customer Experience: Detailed product information enhances the shopping experience. Customers appreciate having all the necessary details conveniently available on the product page, saving them time and effort researching or contacting customer support for clarifications.

• Compatibility Information: If your product is compatible with other products or has specific requirements, you can communicate this information in the Additional Information tab. It is beneficial for electronic devices, accessories, or components that may need particular conditions to operate optimally.

• Usage Instructions: You can provide usage instructions or guidelines in the Additional Information tab for certain products, especially those with specific usage requirements that we talked about later in this article. It ensures that customers know how to use and maintain the product appropriately.

• Reduced Customer’s Enquiry: By providing relevant information in the Additional Information tab, sellers can reduce the need for customers to reach out with questions. It can save time for both customers and sellers and streamline the purchasing process.

Note: We’ll use the Blocksy theme for all the demonstrations discussed in this article.

Rename the Additional Information Tab in WooCommerce

You can add specific code to your website if you’d like to rename the “Additional Information” tab on your WooCommerce product pages. This code tells your website to display a different title for that tab.

Using PHP Code

To change the name of the “Additional Information” tab on your WooCommerce product pages using PHP code, follow the steps.

• In your WordPress setup, go to the wp-content/themes folder and locate the theme you’re using.
• Then, look for the functions.php file in that theme. It’s always recommended to use the functions.php file of your child theme.
• Next, open the file, insert the below code, and save your changes.

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['additional_information']['title'] = __( 'Product Information' );	 
return $tabs;
}

In this example, we’re changing the default name “Additional Information” to “Product Information” on WooCommerce product pages using PHP code. You can replace “Product Information” with any title you prefer by modifying the specified text in the code. After applying the code, the title on your product pages will display the name you entered instead of the default “Additional Information.”

Hide/Remove Additional Information Tab in WooCommerce

The WooCommerce Additional Information tab on your product page usually shows shipping, like shipping weight and dimensions. But if you’re selling digital products, having this tab visible might be unnecessary or annoying. You might hide the Additional Information tab on your WooCommerce product page in such cases.

There are three ways to hide the WooCommerce Additional Information tab without using any plugin. This action not only helps streamline the product page but also allows store owners to showcase custom information more effectively.

Using PHP Code

To hide the product additional information tab without using a plugin, copy the provided PHP code and paste it into the “functions.php” file of your child theme. This customization allows you to hide the tab efficiently, ensuring a cleaner and more tailored appearance for your WooCommerce product pages.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); 
function woo_remove_product_tabs( $tabs ) 
{     unset( $tabs['additional_information'] ); 
      return $tabs;
}

Once you’ve added the code, save the changes and look at the product page, and you’ll notice that there isn’t an Additional Information tab anymore.

Using CSS code

Another method to hide the WooCommerce Additional Information tab involves using CSS code. Copy the provided code below and apply it to your website. This CSS code works to hide the tab from the product pages. It’s a straightforward approach that doesn’t require plugins or complex PHP coding.

In your WordPress setup, go to the wp-content/themes folder. Open up your theme folder, and Inside that folder, locate the “style.css” file. Open this file, then copy and paste the above code. It’s always recommended to use the style.css file of your child theme. Once you’re done with the changes, save the file.

li.additional_information_tab {
 display: none !important;
 } 

This process ensures that the Additional Information tab is no longer displayed on your single product page. Now, let’s explore another method to personalize and customize the product’s additional tab in WooCommerce.

There is another way to hide the Additional Information Tab in WooCommerce. This method works when you haven’t added any specific details to show in the tab. So, if you’re not using any custom attributes or not providing information like weight or dimensions for the product, the tab won’t show up automatically on the website.

Please check our detailed article on How to add Products in WooCommerce?

Add Additional Content in Additional Information Tab

As we discussed above, if you need to show the usage instructions of the product, you can put those instructions in the “Additional Information” tab. This helps customers understand how to use it properly. Alternatively, if you have a lot of details about a product but don’t want to clutter up the page, you can also add a link to a text with more details. This link could lead to a separate page where customers can find all the extra information they need.

One of the static ways to do this is by adding the provided code to the bottom of the “functions.php” file of your child theme and then saving the file. This code lets you add your custom text above or below the list of details. You can also change the text to fit your preferences.

add_action( 'woocommerce_product_additional_information', 'print_custom_html' );
 function
 print_custom_html
 (){ ?> <a href="#">Check out
 more Usage Instruction of the product </a> <?php } 

If you check on the frontend, you’ll find text along with a clickable link. When you click on that text, you’ll be taken to another page to learn more about the product’s usage instructions.

Furthermore, you have the option to showcase custom product information within the Additional Information tab. To accomplish this, you’ll need to use some additional plugins to display the product data.

FAQs on WooCommerce Additional Information Tab

Adjust the Additional Information Tab to the Description Tab

Another customization you can do is to merge the ‘Additional Information’ tab with the ‘Description’ tab using some code snippets. By applying the provided code, you can shift the content of the Additional Information tab under the “Description” tab. It means that all the details usually found in the Additional Information tab will now be displayed alongside the product description.

Insert the below code into the “functions.php” file of your child theme, and you’ll see the Additional Information content seamlessly integrated under the product description tab.

add_filter( 'woocommerce_product_tabs', function( $tabs ) {
	unset( $tabs['additional_information'] );
	return $tabs;
}, 98 );

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 );

Once done, go to the product page to see the changes. You’ll notice that the Additional Information tab has been removed, and its content is now integrated into the Description tab.

Key Takeaways

Here are the main points you’ll learn from this article. You’ll find valuable insights that make understanding the content easier.

• Learned to customize the Additional Information tab in WooCommerce to match your store’s style.
• Used PHP or CSS code to adjust the tab as needed, including renaming, hiding, or merging it with the product description.
• Displayed the usage information of products or any other custom details under the ‘Additional Information’ tab, along with a link.
• Discovered what shows up in the Additional Information tab by default, and also learned how to easily add custom attributes info to that tab.

Make Your WooCommerce Additional Information Tab Advanced

Optimizing the Additional Information tab in WooCommerce can significantly enhance the user experience of your online store. By renaming the tab using PHP code, you personalize it to suit your product details better.

Also, hiding or removing the tab, achieved through PHP and CSS code, and adding text links that take up less space and make the page cleaner and more user-friendly product page.

Go through these simple steps; you can efficiently customize the Additional Information tab to showcase your product information better and improve the shopping experience for your customers.