How to Remove WooCommerce Additional Information on the Product Page (Beginner’s Guide)
So, you’ve got your awesome WooCommerce store up and running, but there’s this pesky “Additional Information” tab on your product page. Maybe you’re not using attributes like weight and dimensions, or you simply want a cleaner look. Don’t worry! Removing it is easier than you think. This guide will walk you through several methods, from simple to slightly more advanced, so you can choose what works best for you.
Why Remove the “Additional Information” Tab?
The “Additional Information” tab in WooCommerce typically displays product attributes like weight, dimensions, and any other custom attributes you’ve assigned. While helpful in some cases (think shipping calculations or specific product requirements), it’s often unnecessary. Here are a few reasons you might want to remove it:
- Clutter: If you’re not using attributes, it just adds unnecessary clutter to your product page. A cleaner, more focused page often leads to better conversions.
- Simplification: Especially for digital products or items where weight and dimensions aren’t relevant (like software downloads or services), the tab is simply irrelevant.
- Design Consistency: You might want to remove it to better align with your overall website design and branding.
- `.woocommerce-product-attributes` is the CSS class that targets the table containing the “Additional Information” data.
- `display: none;` hides the element completely.
Think of it like a garage. If it’s filled with tools you use regularly, it’s useful. If it’s filled with junk you never touch, it’s just taking up space and making it harder to find what you need. The “Additional Information” tab is the same; use it if it’s helpful, remove it if it’s not!
Method 1: Using CSS (The Quickest and Easiest Method)
This is the simplest approach and involves adding a small snippet of CSS code to your WordPress theme. It hides the tab using CSS, meaning the code is still there, but it’s not visible to your users. This is a great option if you’re not comfortable editing PHP files.
Here’s how:
1. Go to Appearance > Customize in your WordPress dashboard.
2. Click on “Additional CSS” (or a similar option depending on your theme).
3. Paste the following CSS code:
.woocommerce-product-attributes {
display: none;
}
4. Click “Publish” to save your changes.
Explanation:
Reasoning:
This method is quick, easy, and reversible. If you decide you want the tab back, simply remove the CSS code. However, it doesn’t actually *remove* the underlying code, it just hides it from view. For most cases, this is perfectly acceptable.
Method 2: Removing the Tab with a Code Snippet (The Recommended Method)
This method involves adding a PHP snippet to your theme’s `functions.php` file (or using a code snippets plugin). This is a more robust approach as it actually removes the tab from the product page structure. Important: Make sure you create a child theme before editing your theme’s files.
Here’s the code:
<?php 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;
}
How to implement it:
1. Install and activate a Code Snippets plugin (recommended for beginners) or create a child theme. Editing your parent theme directly can lead to lost changes when the theme is updated.
2. Go to Snippets > Add New in your WordPress dashboard (if using the Code Snippets plugin).
3. Paste the code into the code editor.
4. Give the snippet a title (e.g., “Remove WooCommerce Additional Information Tab”).
5. Choose “Run snippet everywhere” from the dropdown menu.
6. Activate the snippet.
If you’re using a Child Theme:
1. Open your child theme’s `functions.php` file. (Appearance > Theme File Editor. Select your child theme.)
2. Paste the code at the end of the file.
3. Save the file.
Explanation:
- `add_filter( ‘woocommerce_product_tabs’, ‘woo_remove_product_tabs’, 98 );` This line tells WordPress to use our custom function `woo_remove_product_tabs` to modify the product tabs. The ’98’ sets the priority of the function to run before other functions that might affect the tabs.
- `function woo_remove_product_tabs( $tabs ) { … }` This defines our custom function. It takes the `$tabs` array (containing all the product tabs) as input.
- `unset( $tabs[‘additional_information’] );` This is the key line. It removes the ‘additional_information’ element from the `$tabs` array, effectively deleting the tab.
- `return $tabs;` This returns the modified `$tabs` array back to WooCommerce.
Reasoning:
This method is generally preferred over CSS because it completely removes the tab from the product page structure, resulting in cleaner code. It’s also a bit more resilient to theme updates. Using a code snippets plugin or a child theme ensures that your changes won’t be overwritten when your theme is updated.
Method 3: Conditional Removal Based on Product Attributes (Advanced)
This method allows you to remove the “Additional Information” tab only if a product doesn’t have any attributes assigned. This is useful if you only want to hide the tab on products where it’s empty.
<?php add_filter( 'woocommerce_product_tabs', 'woo_conditionally_remove_product_tabs', 98 );
function woo_conditionally_remove_product_tabs( $tabs ) {
global $product;
if ( empty( wc_get_product_attributes( $product ) ) ) {
unset( $tabs[‘additional_information’] );
}
return $tabs;
}
How to implement it:
Follow the same instructions as Method 2 for adding the code to your `functions.php` file or using a code snippets plugin.
Explanation:
- `global $product;` This line makes the `$product` object available within the function, allowing us to access the product’s data.
- `if ( empty( wc_get_product_attributes( $product ) ) ) { … }` This condition checks if the product has any attributes assigned. `wc_get_product_attributes( $product )` returns an array of attributes. `empty()` checks if that array is empty.
- If the product *does* have attributes, the tab will remain. If it *doesn’t* have attributes, the `unset` function removes the “Additional Information” tab.
Reasoning:
This is the most dynamic and intelligent approach. It ensures that the tab is only removed when it’s truly unnecessary, providing the best user experience. Use it if you need the tab only for certain types of products.
Important Considerations:
- Backup your website! Before making any changes to your theme’s files, always back up your website. This way, you can easily restore your site if something goes wrong.
- Use a child theme or code snippets plugin. Modifying your parent theme directly is generally not recommended, as your changes will be overwritten when the theme is updated.
- Test your changes thoroughly. After implementing any of these methods, be sure to test your product pages to ensure that the “Additional Information” tab has been removed correctly.
- Cache! After applying any changes, clear your website cache, your browser cache, and WooCommerce transients (WooCommerce > Status > Tools).
By following these simple steps, you can easily remove the “Additional Information” tab from your WooCommerce product pages and create a cleaner, more focused shopping experience for your customers. Choose the method that best suits your technical skills and the specific needs of your online store. Good luck!
