Where can I add another class for woocommerce wrapper?

Question

Woocommerce have a div with a class "woocommmerce" I want to add another class or remove the class. Which file is that?

   <div class="woocommerce"></div>

Answer 1

Although there isn't any supported method provided by WooCommerce for achieving that, you could "hack" on the function which builds the wrapper directly.

The problem

<div class="woocommerce"></div>

"The master wrapper". Almost all things WooCommerce lives within it.

WooCommerce plugin kind of "protects" its main wrapper as it depends on it for doing all kinds of stuff (styling, js functionality) etc. For that reason, the plugin hasn't a filter available so one could hook to and override it.

By the way, it is not recommend to remove it, one would rather add additional css classes to it, which is possible.

There's even a Github issue which seems to state that WooCommerce "Won't fix" it (at least for now).

Use cases

Amongst all possible use cases that might be out there, mine was to apply additional css classes to the wrapper <div class="woocommerce"></div> to fit my theme's CSS framework, (Bootstrap 4) specifically.

I simply wanted it to become <div class="woocommerce container-fluid container-application"></div>

BUT

How to safely change it?

Inspecting it further

Looking at WooCommerce's class-wc-shortcodes.php under the includes/ directory, let's go ahead and dissect it. If you jump to this line you can have a glimpse at the shortcode_wrapper() function, which builds that "annoying" wrapper. Jump here to see an array of woocommerce shortcode slugs, which will have their contents wrapped within the <div class="woocommerce"></div>.

Or according to my own use case, on this specific line, My Account page shortcode is returned within the shortcode_wrapper() function, which again results in all the My Account pages' contents living within the <div class="woocommerce"></div>.

That is also true for other shortcodes used by WooCommerce, so go ahead to the solution part and you might be able to change the wrapper while on other WooCommerce pages other than the My Account.

The Solution (!)

"shut that whole thing down"

We're going to hack on the function which builds the <div class="woocommerce"></div> directly.

We have to create a new shortcode by calling the WC_Shortcodes() class. It will kind of "redirect" all the contents from a specific WooCommerce shortcode to our newly created one.

Now, the following function specifically targets the My Account pages, but it could be easily adapted to conditionally target other pages containing the WooCommerce shortcodes.

So, the default WooCommerce pages as most of you might be aware of, are nothing more than ordinary WordPress pages you can manage under the Admin dashboard. However, those pages do also display the contents of the default WooCommerce shortcodes such as the [woocommerce_my_account], which is the one we'll replace later on.

Place the function bellow on your functions.php, save & upload it.

    /**
    * WooCommerce My Account
    * Returns custom html / css class for WooCommerce default wrapper on My Account pages
    * @see https://github.com/woocommerce/woocommerce/blob/857c5cbc5edc0451cf965b19788e3993804d4131/includes/class-wc-shortcodes.php#L59
    *
    **/
    if ( class_exists( 'woocommerce' ) ) {

      function wp_wc_my_account_shortcode_handler( $atts ) {

        $whichClass = new WC_Shortcodes();
        $wrapper = array(
          'class'  => 'woocommerce container-fluid container-application',
          'before' => null,
          'after'  => null
        );

        return $whichClass->shortcode_wrapper( array( 'WC_Shortcode_My_Account', 'output' ), $atts , $wrapper );

      }

      add_shortcode( 'new_woocommerce_my_account', 'wp_wc_my_account_shortcode_handler' );
    } 

------------------// ------------------

Now, let's head to the My Account Page on the browser and inspect the html, you'll notice nothing has changed. That's because we now have to go to Admin >> pages >> My Account, and then replace the default WooCommerce [woocommerce_my_account] shortcode with the [new_woocommerce_my_account].

Update/Save the My Account page under the Admin Dashboard and now all the My Account pages contents will be wrapped within our new <div class="woocommerce container-fluid container-application"></div>.

Bonus

Constructing custom html for the wrapper

In case you wanted a custom html tag for the wrapper, simply passing the tag along with your css class/classes will do the job. Change the following part of the function above to:

        $wrapper = array(
          'class'  => '',
          'before' => '<section class="woocommerce container-fluid container-application>',
          'after'  => '</section>'
        );

And now instead of a <div></div>, our wrapper will be a <section></section>.

Simply follow (enhance) the logic and you'll be able to replace the wrapper on almost all WooCommerce pages such as products, product, product categories, cart, checkout, my account and so on.