Jose Mortellaro

<p>CSS Classes For WooCommerce adds CSS classes to the body depending on the cart and the customer.<br />
You can then use those classes to customize the checkout and cart pages with your custom CSS.</p>
<h3>CSS classes added to the body if:</h3>
<ul>
<li>The cart is empty or not empty</li>
<li>There is at least a product with a price greater than zero (payment methood needed)</li>
<li>The shipping methods are shown or not needed</li>
<li>If the shipping address is needed or there are only digital products in the cart</li>
<li>The prices are shown including or excluding taxes</li>
<li>All products are sold individually</li>
<li>There are specific products in the cart</li>
<li>The quantity of specific products is a specific number</li>
<li>The billing address of the customer has a specific country</li>
<li>The customer has a specific role on the website</li>
<li>The customer has already bought something</li>
<li>The customer has bought a specific number of time</li>
</ul>
<p>If for example in the cart there are only products that can be sold individually, you can take advantage of the CSS class added by this plugin to hide the column “Qty” .<br />
In this case you will write the CSS</p>
<pre><code>.ccfw-cart-all-sold-individually-true .shop_table .product-quantity {
    display: none;
}
</code></pre>
<h3>How customize the WooCommerce cart and checkout via CSS</h3>
<ul>
<li>The plugin doesn’t provide any option, and you will not see any settings page. Just activate it.</li>
<li>Right-click and click on Inspect on the frontend.</li>
<li>Read the value of the class attribute of the body element.</li>
<li>Use the CSS classes added to the body for your custom CSS</li>
</ul>
<h3>Requirements</h3>
<p>You can take advantage of this plugin only if you have at least basic skills with CSS and are able to add your custom CSS.<br />
In other cases, you will not know what to do with this plugin.</p>
<h3>Backend Speed Optimization</h3>
<p>Is your dashboard slow? We optimize admin performance by improving queries and reducing plugin load.<br />
Read <a href="https://josemortellaro.com/backend-speed-optimization/" rel="nofollow ugc">Backend Speed Optimization Service</a> for more information.</p>


CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS


I love my own plugin because it gives you the possibility to customize the cart and checkout pages depending on the cart situation, only via CSS without touching any line of PHP code :)


Perfect to customize the cart and checkout via CSS

CSS classes depending on the cart to customize the checkout.

ambrosite

<p>When activated, this plugin causes the body_class template tag to output five additional classes.</p>
<p>On single posts (is_single) :<br />
    postname-[permalink slug]<br />
    single-[category slug]<br />
    parent-[parent category slug] (all parent and grandparent categories in a hierarchy of any depth)</p>
<p>On pages (is_page) :<br />
    pagename-[permalink slug]</p>
<p>On category archives (is_archive and is_category) :<br />
    parent-category-[parent category slug] (all parent and grandparent categories in a hierarchy of any depth)</p>
<h4>Custom Taxonomies</h4>
<p>As of version 1.3, the plugin now supports custom hierarchical taxonomies. The new body classes take the following form:</p>
<p>On single posts (is_single) :<br />
    single-[taxonomy]-[term slug]<br />
    parent-[taxonomy]-[parent term slug] (all parent and grandparent terms in a hierarchy of any depth)</p>
<p>On taxonomy archives (is_archive and is_tax) :<br />
    parent-term-[parent term slug] (all parent and grandparent terms in a hierarchy of any depth)</p>
<p>For single posts, the taxonomy name is included in the class name, because I felt it was important to be able to distinguish between taxonomies in cases where a post is assigned to more than one custom taxonomy, and when the same term might appear in two or more taxonomies. For example, suppose you had a real estate site with property listings in New York City, and you had two custom taxonomies defined: City and State. Then the classes would look like this:</p>
<pre><code>single-city-new-york single-state-new-york
</code></pre>
<h4>Multisite Support</h4>
<p>As of version 1.3, the plugin now supports multisite installations. If a multisite install is detected, the plugin will output the follow additional body class on every page of the site:</p>
<pre><code>site-[site ID]
</code></pre>
<h4>Examples</h4>
<p>If you have a post titled “Top 10 Decorating Ideas”, in category “Christmas”, with a parent category of “Holidays” and a grandparent category of “Calendar”, the additional body classes will be as follows:</p>
<pre><code>postname-top-10-decorating-ideas single-christmas parent-holidays parent-calendar
</code></pre>
<p>Why is this useful? Because it enables you to style individual posts and pages, as well as entire categories of posts, using only CSS, without having to edit the template files or create new templates.</p>
<p>Continuing the above example, if I wanted to give all of the posts in the Christmas category a green heading (to give them some extra holiday cheer), I could use a CSS selector like this:</p>
<pre><code>body.single-christmas h1 {
    color: green;
}
</code></pre>
<p>Going further, suppose I want to attach a background image of a Christmas tree ONLY to the “Top 10 Decorating Ideas” post:</p>
<pre><code>body.postname-top-10-decorating-ideas div.post {
    background: url('images/xmas_tree.gif') no-repeat left top;
}
</code></pre>
<p>What if I want all posts categorized under Holidays (Christmas, Thanksgiving, Easter, whatever) to have a sidebar with a gold border?</p>
<pre><code>body.parent-holidays div#sidebar,  /* all posts assigned to a subcategory of Holidays */
body.single-holidays div#sidebar { /* any posts assigned directly to the Holidays category */
    border: solid 2px gold;
}
</code></pre>
<p>These are just a few examples. If you are experienced in writing CSS selectors, you will find many more uses for the new body classes. For further discussion, check this support forum thread: https://wordpress.org/support/topic/393942</p>


Ambrosite Body Class Enhanced

Still works fine. Please release an updated version so it's not flagged as obsolete.

Still great

Enhances the body_class template tag, adding some extra classes to the body (post/page slugs, post categories, and archive parent categories) useful i …

CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS vs Ambrosite Body Class Enhanced