Closed dsignr closed 7 years ago
mikejolley
commented
7 years ago 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.
dsignr
commented
7 years ago 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 column or row element to be the first child, but, because WooCommerce injects this div, it breaks my layout. IF I were to fix this, I would need to re-write the same definitions for .column class for .woocommerce, which defeats the purpose of me using a CSS grid system and a framework. In the very least, a hook would be nice.
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 php include/template hook, rather than letting it be where it belongs.
I hope you will take this as constructive criticism in improving the framework. Cheers.
mikejolley
commented
7 years ago 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?
dsignr
commented
7 years ago 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.
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 nesting happens because I use it as in the code above. That's the reason I wanted to check if there's a way to modify the class name (or at atleast add). If I put the template code outside my grid, it would still break my page layout. So, kind of stuck here. Your thoughts?
mikejolley
commented
7 years ago 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?
dsignr
commented
7 years ago Thanks for your quick replies!
then if you require subcolumns, make a grid inside of that
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 👍
SoLoGHoST
commented
5 years ago 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<div class="woocommerce"> div element?
Can you folks atleast provide the ability for this?
monecchi
commented
5 years ago There should be at least a method to add additional css classes to <div class="woocommerce"> without relying on jQuery or waiting for the DOM to load in order to apply a js hack. Perhaps a simple filter function which would prevent the .woocommerce css class from being stripped out but would let additional classes to be passed along with it.
anunay
commented
5 years ago 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
lennyanders
commented
4 years ago I just wrote a little filter to do this. I think it is likely to break the default WooCommerce Styles and Scripts, but I don't use any of them, so it doesn't matter to me, and to you probably too.
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);
sanjeevbeekeeper
commented
5 months ago 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>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