Sometimes you need to give a different style to the WooCommerce cart and checkout pages depending on some conditions such as the user who is logged in, or the products in the cart.
Unfortunately, WooCommerce doesn’t add any CSS selectors that are based on the conditions mentioned above.
However, we can use the body_class filter hook to add some CSS classes to the body depending on the conditions that we mentioned.
The following code adds different CSS classes to the body if:
- The cart is empty or not empty
- There is at least a product with a price greater than zero (payment method needed)
- The shipping methods are shown or not needed
- If the shipping address is needed or there are only digital products in the cart
- The prices are shown including or excluding taxes
- All products are sold individually
- There are specific products in the cart
- The quantity of specific products is a specific number
- The billing address of the customer has a specific country
- The customer has a specific role on the website
- The customer has already bought something
- The customer has bought a specific number of time
If for example in the cart there are only products that can be sold individually, you can take advantage of the CSS class ccfw-cart-all-sold-individually-true to hide the column “Qty” .
In this case you will write the CSS:
.ccfw-cart-all-sold-individually-true .shop_table .product-quantity {
display: none;
}So, after writing the PHP code suggested in this post, you need only to write your custom CSS taking advantage of the CSS classes added to the body.
If you want you can also install the free plugin CSS Classes For WooCommerce that you can download from the WordPress repository.