Removing the `woocommerce-tabs wc-tabs-wrapper` Div: A Beginner’s Guide

If you’re customizing your WooCommerce store, you might have stumbled upon the `woocommerce-tabs wc-tabs-wrapper` div and wondered, “What is this, and how can I get rid of it?” Don’t worry, you’re not alone! This article will break down exactly what this div does, why you might want to remove it, and most importantly, how to do it safely and effectively. We’ll cover several methods, from simple CSS tweaks to more advanced PHP code, ensuring there’s a solution for every skill level.

This `div` acts as a container, wrapping around the default WooCommerce product tabs. It’s responsible for holding the tabs (Description, Reviews, Additional Information) and the content associated with each.

Why Remove or Modify `woocommerce-tabs wc-tabs-wrapper`?

There are several reasons why you might want to remove or modify this `div`:

• Styling Overrides: The default WooCommerce styling might conflict with your custom theme design. Removing the wrapper allows you more granular control over the look and feel. Imagine your theme uses a specific font family and size that’s being overridden by the `woocommerce-tabs` styling. Removing it gives you complete control.
• Layout Changes: You might want to rearrange the product details page significantly, moving the tabs to a different location or integrating the content directly into the main product information area. For example, you might want to display the product description directly below the product image instead of within a tab.
• Performance Optimization: In some cases, streamlining the HTML structure by removing unnecessary `div`s can contribute to slightly faster page loading times, especially if you are simplifying the DOM.
• Custom Tab Implementation: You might be implementing your own completely custom tab solution using a plugin or your own code, rendering the default WooCommerce tabs and their wrapper redundant.

Methods for Removing `woocommerce-tabs wc-tabs-wrapper`

Before we dive in, always remember to back up your website before making any code changes! This will protect you in case something goes wrong. Also, use a child theme. Modifying the parent theme directly will cause your changes to be overwritten during a theme update.

#### 1. Using CSS (Simple but Limited)

The easiest, albeit least recommended, approach is to hide the entire wrapper using CSS. This doesn’t *remove* the `div`, but it makes it invisible to the user. This is generally not recommended for SEO purposes as the content is still technically present in the DOM.

Add this CSS code to your theme’s `style.css` file (inside your child theme!) or through the WordPress Customizer (Appearance > Customize > Additional CSS):

.woocommerce-tabs.wc-tabs-wrapper {

display: none !important;

}

Why it works (and its limitations): `display: none` completely hides the element and its content. `!important` ensures that this style overrides any other conflicting styles.

Real-life example: You quickly want to hide the tabs while you work on a more permanent solution.

Important Note: While this method is quick, it *hides* the content, it does not remove it. This can impact SEO and accessibility. Screen readers won’t be able to access the information, and search engines might penalize your site for hidden content. Consider this a temporary fix, not a permanent solution.

#### 2. Removing the Tabs and Wrapper with PHP (Recommended)

This is the recommended and more robust approach. We’ll use WordPress and WooCommerce hooks to remove the tabs and their wrapper.

Step 1: Access your `functions.php` file:

Locate the `functions.php` file in your child theme directory. You can access it through your hosting provider’s file manager or via FTP.

Step 2: Add the following code to your `functions.php` file:

 <?php 

/

* Remove WooCommerce product tabs and their wrapper.

*/

function remove_woocommerce_product_tabs() {

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

}

add_action( ‘after_setup_theme’, ‘remove_woocommerce_product_tabs’ );

Explanation:

• `remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, Learn more about How To Set Up A Return Policy Message On Woocommerce 10 );` This is the heart of the code. It removes the default WooCommerce action that outputs the tabs.
• `’woocommerce_after_single_product_summary’` specifies the hook where the tabs are added.
• `’woocommerce_output_product_data_tabs’` is the function responsible for displaying the tabs and wrapper.
• `10` is the priority of the action.
• `add_action( Discover insights on How To Edit Woocommerce Product Category Template Page ‘after_setup_theme’, ‘remove_woocommerce_product_tabs’ );` This tells WordPress to run our `remove_woocommerce_product_tabs` function after the theme is set up, ensuring that WooCommerce is loaded and the action can be removed. This is very important.

Why it works: This method *completely removes* the code that generates the tabs and their wrapper. This is the best approach for SEO, accessibility, and performance.

Real-life example: You’re completely redesigning the product page and want to integrate the product description and other information directly into the main layout, without using tabs.

#### 3. Removing the Tabs and Using Your Custom Template (Advanced)

This approach is for when you want to completely control the product detail page and implement a custom layout.

Step 1: Remove the default tabs (as described in Method 2).

Step 2: Copy the `content-single-product.php` file from the WooCommerce template directory to your child theme.

The path is usually: `wp-content/plugins/woocommerce/templates/content-single-product.php`. Create a `woocommerce` folder in your child theme, and then place the file there. So the final path would be: `wp-content/themes/your-child-theme/woocommerce/content-single-product.php`.

Step 3: Edit the `content-single-product.php` file.

Now you can completely customize the product details page. Since you’ve removed the original tabs, you can add your own custom code to display the product description, reviews, and any other relevant information in the way you want. You will need to manually call each section of content:

 global $product; ?> 
  
 
 
 
 
 

get_price_html(); ?>

Description

Reviews

Additional Information

<?php

wc_display_product_attributes( $product ); // Display product attributes

?>