How To Remove Woocommerce Additional Information And Description Tab Divi

How to Remove WooCommerce Additional Information and Description Tabs in Divi (Beginner-Friendly Guide)

So, you’re using WooCommerce with the Divi theme and want to customize your product pages. Maybe you want a cleaner look, or perhaps the “Additional Information” tab (often displaying just weight and dimensions) feels redundant. You’ve come to the right place! This guide will walk you through how to remove those WooCommerce tabs – specifically the “Additional Information” and “Description” tabs – when using the Divi theme, in an easy-to-understand way.

Why Remove These Tabs?

Before diving in, let’s quickly understand why you might want to remove these tabs. In the real world, I’ve seen clients remove these tabs for the following reasons:

    • Simplified Product Pages: Sometimes, less is more. If you have very basic products, the Additional Information tab might just display weight and dimensions, which isn’t crucial for every customer. Removing it can declutter the page and improve the overall user experience.
    • Duplication of Information: If you already include all relevant product Explore this article on How To Add Cod In Woocommerce information in the main product description, having a separate tab for it can feel repetitive and create unnecessary friction.
    • Aesthetic Preferences: You might simply prefer the look of your product pages without these tabs. This is perfectly valid!
    • Consolidated Product Detail: If you prefer putting all product specification within the description itself.

    Method 1: Using Theme Settings (Best Option for Non-Coders)

    Divi, being a powerful theme, often provides built-in options to customize WooCommerce elements. Let’s see if this applies to our case.

    Unfortunately, Divi doesn’t offer a direct toggle to remove the “Additional Information” and “Description” tabs from its theme options panel. While it might include options to edit other WooCommerce parts, removing these tabs usually requires a bit of code. So, let’s proceed to the code-based solutions.

    Method 2: Using `functions.php` (The Recommended Approach)

    This is the most common and flexible method. It involves adding a small snippet of PHP code to your theme’s `functions.php` file.

    Important Caution: Before making any changes to your `functions.php` file, always back up your website! A small error in this file can break your site. It’s also highly recommended to use a child theme.

    Why Use a Child Theme? Updating your parent Divi theme will overwrite any changes you make to the `functions.php` file. A child theme prevents this, preserving your customizations.

    Steps:

    1. Create a Divi Child Theme: If you don’t already have one, create a child theme for your Divi theme. You can find instructions on how to do this on the Elegant Themes website or by searching online.

    2. Access Your Child Theme’s `functions.php` File: You can access this file via your WordPress dashboard by navigating to Appearance > Theme Editor. Make sure you select your child theme in the dropdown menu at the top right. Alternatively, you can use an FTP client to access your site’s files.

    3. Add the Code: Add the following code snippet to the end of your `functions.php` file:

     <?php 

    // Remove Additional Information Tab

    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

    unset( $tabs[‘description’] ); // Remove the description tab

    return $tabs;

    }

    4. Save the File: Click the “Update File” button.

    Explanation:

    • `add_filter( ‘woocommerce_product_tabs’, ‘woo_remove_product_tabs’, 98 );`: This line hooks into the `woocommerce_product_tabs` filter, which allows us to modify the product tabs. The `98` is the priority.
    • `function woo_remove_product_tabs( $tabs ) { … }`: This is the function that will be executed when the filter is applied. It takes the existing `$tabs` array 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 line returns the modified `$tabs` array, which now excludes the tabs you removed.

    Real-World Example: I recently helped a client who was selling digital art prints. They had all the necessary details (size, materials, etc.) in the product description. Removing the “Additional Information” tab gave the product pages a cleaner, more focused look, directly improving sales.

    Method 3: Using a Plugin

    If you’re uncomfortable editing code, you can use a plugin to remove the tabs. While less efficient than adding code directly, it’s a user-friendly option.

    Example Plugins:

    • WooCommerce Tab Manager: This plugin (and others like it) offers a visual interface to manage and remove product tabs.
    • Code Snippets: This plugin allows you to safely add PHP snippets without directly editing your `functions.php` file. This is a good alternative if you want the benefits of Method 2 but want a safer, more organized approach.

    How to Use a Plugin (Example using Code Snippets):

    1. Install and Activate: Install and activate the Code Snippets plugin.

    2. Add a New Snippet: Go to Snippets > Add New.

    3. Enter Title and Code: Give your snippet a title (e.g., “Remove WooCommerce Tabs”). Paste the code from Method 2 into the code area.

    4. Save and Activate: Save the snippet and activate it.

    Testing and Troubleshooting

    • Clear Your Cache: After making any changes, clear your website’s cache (including any caching plugins and your browser cache) to see the updated results.
    • Check for Conflicts: If you’re still seeing the tabs, there might be a conflict with another plugin or theme. Try temporarily deactivating other plugins (especially WooCommerce-related ones) to see if that resolves the issue.
    • Syntax Errors: Double-check the code for any syntax errors (e.g., missing semicolons). Even a small error can prevent the code from working correctly.

Conclusion

Removing the WooCommerce “Additional Information” and “Description” tabs in Divi is a straightforward process. By using the code snippets in the `functions.php` file of your child theme, or leveraging a plugin, you can customize your product pages to perfectly match your needs and aesthetic preferences. Remember to always back up your website and test thoroughly after making any changes. Good luck!

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *