No way to modify injected wrapper div with class 'woocommerce'. #12191
Comments
|
This isn't something we plan on allowing you to change - we use this for styling, scripts and so on. It's certainly not unnecessary if you want a working store :) I see no reason why it would break a grid layout unless you're not removing existing CSS rules applied to it. Dequeue the CSS. |
|
My grid structure is currently this way: <div class="grid">
<div class="woocommerce">
...
</div>
<div class="column-3">
...
</div>
</div>The problem is my CSS framework expects a It's awesome that WooCommerce enables anyone to run a store like Amazon in no time, but the fact that I have to fight the framework just to modify some CSS classes is frankly, appalling. This is just one of several issues I've experienced using WooCommerce where the presentational logic is buried inside some absurd I hope you will take this as constructive criticism in improving the framework. |
|
The div is the only consistent way for us to have a class we can target with CSS and Javascript. I'm sure there would be more users complaining if we applied our code across all elements on all pages, thats why it's there. Not sure why it would be nested though, unless you're using shortcodes? |
Thanks for the reply, I understand that as well. <div class="grid">
<?php the_content(); ?> //I also tried <?php woocommerce_content(); ?>
<div class="column-3">
...
</div>
</div>(Note: Code above is simplified) |
|
The_content can vary between pages/post types - would it not be best to wrap that in a column- and then if you require subcolumns, make a grid inside of that? It's not clear what you're trying to control here - product grid, cart page, regular page? |
|
Thanks for your quick replies!
I wanted to avoid nested grids as they will add more code (another wrapper, row, column, etc), but I guess this is the only solution for now. I need more coffee. Thanks for your help so far 👍 |
|
Is it atleast possible to add additional classes to the div element? For example, if I wanted to add "row" class for bootstrap capabilities. How to add an additional class to the Can you folks atleast provide the ability for this? |
|
There should be at least a method to add additional css classes to |
|
I am having the same issue, and I think we can have some filter we can apply so we can still have WooCommerce class and then append additional classes as needed. Just no need to remove WooCommerce but to append some additional classes all we want. thank you |
|
I just wrote a little filter to do this. function lenny_remove_div_class_woocommerce($content) {
libxml_use_internal_errors(true);
$html = new DOMDocument();
$html->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$container = (new DOMXpath($html))->query("//div[contains(@class,'woocommerce')]")[0];
if ($container) {
foreach ($container->childNodes as $child) {
$container->parentNode->insertBefore($child->cloneNode(true), $container);
}
$container->parentNode->removeChild($container);
}
return $html->saveHTML();
}
add_filter('the_content', 'lenny_remove_div_class_woocommerce', 100); |
Don't do this ❌page-my-account.php <div class="row">
<?php the_content(); ?>
</div>navigation.php <div class="col-6">
<nav>
...
</nav>
</div>my-account.php <div class="col-6">
<div class="woocommerce-MyAccount-content">
<?php do_action( 'woocommerce_account_content' ); ?>
</div>
</div>DOM <div class="row">
<div class="woocommerce">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>Do this ✔️You could include everything in your woocommerce / myaccount / my-account.php page my-account.php <div class="row">
<div class="col-6">
<?php do_action( 'woocommerce_account_navigation' ); ?>
</div>
<div class="col-6">
<div class="woocommerce-MyAccount-content">
<?php do_action( 'woocommerce_account_content' ); ?>
</div>
</div>
</div>DOM <div class="woocommerce">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div> |
EXPLANATION OF THE ISSUE
Using version
2.3.6, when you visit the cart page, there is a wrapperdivwith classwoocommercebeing injected. I would like to remove/customize this wrapper div. However, it seems like there is no easy way to do so and all I'm doing is just fighting the framework to get something as simple as changing the presentational logic (HTML), which for some reason is embedded into the core (woocommerce/includes).I searched all help docs.
I searched for filter action/references, found none.
I found just one StackOverflow thread about this with no answer.
There is absolutely no easy way for me to remove this unnecessary div. Using a custom WooCommerce theme, with a popular css framework and this breaks my grid layout.
Any help is much appreciated.
STEPS TO REPRODUCE THE ISSUE
Create a normal
page.phpeither using the normal wordpress loop, or using the help doc listed here.Visit the cart page. You should notice your content is wrapped around with a
<div class="woocommerce></div>.SYSTEM STATUS REPORT
The text was updated successfully, but these errors were encountered: