How to Hide the Additional Information Tab on WooCommerce Products and Checkout Pages

You are currently viewing How to Hide the Additional Information Tab on WooCommerce Products and Checkout Pages

By default, WooCommerce comes with a few additional tabs that are added to your product and checkout pages to provide extended information such as Return Policy, Shipping Rates, Delivery Times, etc.

But have you ever wanted to hide those tabs on your store? Not all products require the additional information tab, and loading it into the page can use unnecessary resources.

This article will show you how to hide the WooCommerce additional information tab in products and checkout pages in every possible way.

What is the Additional Information Tab

The default layout for a product in the WooCommerce shop is to have the description, additional information, and reviews tab (if enabled).

The WooCommerce Additional Information tab contains information not often needed by customers, such as prices in other currencies, etc. It will only be triggered and appear on the product page if you provide the product with variables and attributes.

For example, if you sell a shirt, the additional information tab can hold extra details such as colors, sizes, etc.

Additional Information tab WooCommerce Product page

Although sometimes it’s beneficial to add additional product details, in other cases it doesn’t and should be avoided.

Why Hide the Additional Information Tab

WooCommerce is a powerful tool for creating an eCommerce store with many great features. However, the additional information tab can sometimes confuse customers by displaying information that is irrelevant to them or their purchase.

If you’re using WooCommerce, you may want to hide this tab and let customers focus on the most critical details.

Many store owners prefer to display the complete information under the Description tab instead in the Additional Information tab. Otherwise, specific and essential details only presented in the additional information tab can easily be skipped by the customer and result in losing a sale.

If all the information is already provided in the description tab, it’s better not to repeat yourself and hide the additional information tab altogether.

How to Hide the Additional Information Tab in Product Pages

Multiple methods hide the WooCommerce additional information tab from the products pages. For example, we can hide it from the product’s page edit screen with a PHP function or by using CSS.

Let’s start with the most straightforward way and hide the tab inside the product’s edit page without using any functions or codes.

To hide the WooCommerce Additional Information tab, follow these steps:

  1. Navigate to the edit screen of your desired product.

  2. Scroll to the Product data section, and click on the Attributes tab.Product Attributes WooCommerce

  3. Expand each attribute and uncheck the Visible on the product page box.Visible on the Product Page Option

  4. Save all attributes.

  5. Save the product’s page.

Once finished, visit the product page and verify that you can no longer see the additional information tab.

This is a great way to hide the additional information tab if you only have minimal products. However, if you offer many products, editing the product pages individually may not be practical and will take some time.

Therefore, hiding the additional info tab on all product pages with CSS may be a better solution.

WooCommerce extensions

Hide the Product Additional Information Tab with CSS

CSS is another excellent way that we can use to hide the additional information tab.

The advantage of using this method lies in the fact that we can use it to hide the tab on all product pages or just specific ones.

To hide the additional info tab from all product pages, navigate to the Additional CSS of the Customize screen and paste this code:

#tab-title-additional_information {
display: none;
}
Hide Additional Information tab CSS

If you only want to hide it on specific products, you’ll need to add the product’s body class to the left of the code, like so:

.postid-1 #tab-title-additional_information {
display: none;
}

Make sure to replace number 1 with the actual number of your desired product. Then, learn how to get it by reading our how-to-find page ID in WordPress article.

The Additional Information tab will still be executed and called when using the CSS method but won’t be displayed.

If you prefer to leave it out and save on rendering resources, use a PHP function instead.

Hide the Product Additional Information Tab with PHP Function

WooCommerce will use functions to add and render sections into the HTML structure of the product pages.

We can use a filter hook to prevent WooCommerce from calling out the additional information tab on the page.

Paste the PHP function below inside the functions.php file of your child theme.

Please back up your website before editing core files.

You can access the functions.php file by using FTP or navigating to Appearance -> Theme File Editor and clicking on the file from the right sidebar.

Once loaded, scroll to the bottom of the file and paste this function:

/* Remove the Additional Information Tab from WooCommerce */
add_filter( 'woocommerce_product_tabs', 'p4wp_remove_additional_info_tab', 9999 );
function p4wp_remove_additional_info_tab( $tabs ) {
	unset( $tabs['additional_information'] );
	return $tabs;
}
Remove the Additional Information Tab WooCommerce PHP

Make sure to save the changes and revisit one of your product pages to ensure you removed the additional information tab.

How to Hide the Additional Information Section on the Checkout Page

Unlike the additional information tab on the product pages, the purpose of this section on the checkout page is for your customer to provide instructions during checkout.

For example, the customer can use the checkout additional information field to add an order note on how to deliver the package, what to write on the box, etc.

Additional Information field checkout page WooCommerce

While it can be helpful when selling physical products, it’s unnecessary with digital goods and it will be better to remove it.

To clean up the checkout page, and hide the additional information section, use the CSS below:

.woocommerce-checkout .woocommerce-additional-fields {
display: none;
}
Hide checkout additional information with CSS

As mentioned above, CSS will only hide it from displaying on the page. However, if you would like to remove it altogether, paste this PHP function inside the functions.php file of your theme:

add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
Remove Additional Information Box WooCommerce Checkout Page

Once saved, refresh the WooCommerce checkout page to ensure you successfully removed the additional information filed.

Conclusion

The additional information tab of the WooCommerce store provides extra details about the product or services, but it’s not always needed.

This article showed you how to hide the additional information tab from your WooCommerce products and checkout pages differently.

Leave us a comment and tell us which method you chose to achieve this task.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply