How to Remove the “Additional Information” and “Description” Tabs in WooCommerce (Beginner-Friendly Guide)
So you’ve got your WooCommerce store up and running, great! You’re probably already diving into product descriptions, categories, and all sorts of other settings. But you might be looking at your product page and thinking, “Hmm, that ‘Additional Information’ tab and even the ‘Description’ tab aren’t really necessary for *my* products.” You’re not alone! Many store owners find that these tabs don’t fit their product presentation.
This guide will walk you through how to easily remove those tabs, making your product pages cleaner and more focused. We’ll cover a few methods, so you can choose the one that best suits your comfort level.
Why Remove These Tabs?
Let’s consider some reasons why you might want to remove these tabs:
* Simplified Product Presentation: For some products, especially simpler ones, the “Additional Information” tab (which typically displays attributes like size and weight) might be redundant. If you’re selling downloadable ebooks or simple digital art, attributes are irrelevant. Think about selling t-shirts. If you put the size in the title and the description already mentions “100% cotton,” the additional information tab might just be clutter.
* Improved User Experience: Too much information can overwhelm customers. A cleaner layout can guide them toward making a purchase. A customer searching for a quick gift might be turned off by overwhelming details if there are many complex tabs,
* Consistency: If most of your products don’t use attributes, having an empty “Additional Information” tab on some pages looks unprofessional.
* Redundant Information: If all the crucial product details are already within the main description (the “Description” tab), you might not need the dedicated “Description” tab. Especially if you style the main description with custom CSS to make it more visually appealing, using its own tab doesn’t do much.
Method 1: Using Theme’s WooCommerce Options (If Available)
The easiest way to remove these tabs is through your theme’s options if it supports this. Many modern WooCommerce themes provide built-in settings to control the display of product page elements, including these tabs.
1. Navigate to your Theme Options: The location of these options varies depending on your theme. Look for something like “Theme Options,” “Theme Settings,” “Customizer,” or a section specifically labeled for “WooCommerce.”
2. Look for WooCommerce Settings: Within the Theme Options, find a section dedicated to WooCommerce product page settings.
3. Disable the Tabs: You’ll hopefully find checkboxes or toggles to disable the “Additional Information” and/or “Description” tabs.
Example: Some themes have a WooCommerce customization area and might include a setting that has a checkbox to disable those tabs on product pages.
Reasoning: Using theme options is the *safest* and *most straightforward* method because it utilizes the features already provided by your theme developer. It’s also often the most visually intuitive.
Method 2: Using a Code Snippet (functions.php or a Code Snippet Plugin)
If your theme doesn’t offer built-in options, you can use a code snippet to remove the tabs. This involves adding a small piece of code to your theme’s `functions.php` file or using a dedicated code snippet plugin (recommended for beginners to avoid directly editing theme files).
Important: Before editing `functions.php`, always back up your website. An error in this file can break your site. Using a code snippet plugin isolates the code. If it breaks the site, you can simply disable the plugin to revert the changes.
Here’s the code snippet to remove the tabs:
<?php add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 );
function remove_additional_information_tab( $tabs ) {
unset( $tabs[‘additional_information’] ); // Remove the additional information tab
unset( $tabs[‘description’] ); // Remove the description tab
return $tabs;
}
?>
Steps:
1. Choose a Method: Either edit your `functions.php` file (Appearance > Theme Editor > functions.php) or install a code snippet plugin like “Code Snippets.”
2. Add the Code: Paste the code snippet into the `functions.php` file (at the bottom, before the closing `?>` if it exists) or add a new snippet in your chosen plugin.
3. Save Changes: Save the `functions.php` file or activate the code snippet.
4. Clear Cache: Clear any caching plugins you are using.
5. Test: Visit a product page on your site to confirm the tabs are gone.
Explanation:
* `add_filter( ‘woocommerce_product_tabs’, ‘remove_additional_information_tab’, 98 );` This line tells WordPress to run the `remove_additional_information_tab` function when the `woocommerce_product_tabs` filter is called (which happens when WooCommerce is displaying the product tabs). The `98` is the priority which determines how many times this function is called, and with what priority.
* `function remove_additional_information_tab( $tabs ) { … }` This defines the function that actually removes the tabs. It takes the `$tabs` array (which contains all the tabs) as an argument.
* `unset( $tabs[‘additional_information’] );` This line removes the “Additional Information” tab from the `$tabs` array.
* `unset( $tabs[‘description’] );` This line removes the “Description” tab from the `$tabs` array.
* `return $tabs;` This returns the modified `$tabs` array (without the tabs you removed).
Reasoning: This method uses a filter hook provided by WooCommerce to modify the array of product tabs. It’s a *relatively clean* and *efficient* way to remove them. Using a code snippet plugin isolates the code and make for easier changes if needed.
Method 3: Using CSS (Less Recommended but Simple for Hiding)
While not the *ideal* solution, you can *hide* the tabs using CSS. This doesn’t actually remove the tabs from the code, but it prevents them from being displayed. This can be useful if you just want a quick visual fix, or are unsure about the other methods.
Note: CSS is best used for visual changes, and doesn’t modify the actual code of WooCommerce. It is not as efficient as other methods.
1. Inspect Element: Using your browser’s developer tools (usually by right-clicking on the tab and selecting “Inspect”), identify the CSS class or ID of the tabs you want to hide. Typically, WooCommerce uses classes like `.additional_information_tab` and `.description_tab` within the `ul.tabs` element.
2. Add Custom CSS: Add the following CSS code to your theme’s `style.css` file (Appearance > Theme Editor > style.css) or through the WordPress Customizer (Appearance > Customize > Additional CSS):
.woocommerce-tabs ul.tabs li a[href=”#tab-additional_information”] {
display: none !important;
}
.woocommerce-tabs ul.tabs li a[href=”#tab-description”] {
display: none !important;
}
#tab-additional_information, #tab-description{
display: none !important;
}
3. Save Changes: Save the `style.css` file or publish the Customizer changes.
4. Clear Cache: Clear any caching plugins you are using.
Explanation:
* `display: none !important;` This CSS property hides the element. The `!important` flag ensures that this rule overrides any other conflicting CSS rules.
* The code targets the tab titles (`.woocommerce-tabs ul.tabs li a[href=”#tab-additional_information”]`) and also the tab content `#tab-additional_information, #tab-description`.
* The first rule is to ensure the Tab link is hidden.
* The second rule is to ensure the Tab content is hidden.
Reasoning: This method is *easy to implement*, but it’s not the best practice. The tabs are still present in the code, which can slightly affect page loading speed. Also if there is other existing CSS that shows the tab, this change might fail.
Which Method Should You Choose?
* Theme Options: Use this if your theme provides the option to disable tabs directly.
* Code Snippet: This is the preferred method if your theme doesn’t have built-in options. It’s clean, efficient, and doesn’t rely on visual hacks.
* CSS: Use this as a quick visual fix, but be aware of the potential downsides.
Important Considerations:
* Child Theme: If you’re using the `functions.php` method, it’s highly recommended to use a child theme. When you update your parent theme, any changes made to the `functions.php` file will be lost. A child theme protects your customizations.
* Caching: After making any changes (especially with code snippets or CSS), be sure to clear your website’s cache (if you’re using a caching plugin). Cached versions of your pages might show the old layout.
* Testing: Always test your website after making changes to ensure everything is working as expected.
By following these methods, you can easily remove the “Additional Information” and “Description” tabs in WooCommerce and create a cleaner, more focused product page experience for your customers. Good luck!
