WooCommerce: Display Product Category as “Body” Class

A Business Bloomer fan asked me an interesting question this week: how to apply CSS on the single product page based on the product category? Well, the answer is pretty simple: if we’re able to add the category name to the HTML “body”, this can then be targeted in your custom CSS. So, let’s see how this is done! Continue reading WooCommerce: Display Product Category as “Body” Class

WooCommerce: Change the “Remove this Item” Icon @ Cart

I have a very long to-write list. Possibly I have enough content for another 2 years ๐Ÿ™‚

However, the other day a premium WooCommerce student asked me for some feedback on his custom CSS – so I had to give it priority! The request was: what’s the easiest way to change the little icon/button on the Cart page that has the function of removing items from the cart (yes, that ugly white cross on a red circle)? Continue reading WooCommerce: Change the “Remove this Item” Icon @ Cart

WooCommerce: Disable Default WooCommerce CSS

There are times when you really want to do things right, when you have a high 5-figures budget and all the time in this world – and during these times you might want to override the whole WooCommerce CSS by disabling it completely, and applying your custom styles instead. Despite this is an unusual task, I’ve researched the topic and here are my findings!

woocommerce-disable-default-css-stylesheet

PHP Snippet: Disable WooCommerce Default CSS

Once there was a super handy checkbox in the WooCommerce settings for disabling CSS. Now, there is a 1-line snippet. Hurray ๐Ÿ™‚


/**
 * @snippet       WooCommerce Disable Default CSS
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=21041
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.6.4
 */

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Storefront theme: Disable WooCommerce Default CSS

Many themes such as Storefront by WooCommerce already… disable WooCommerce default styles! They want to be “free” to make their own CSS choices without being afraid WooCommerce is going to turn the buttons into purple!

If you search through the Storefront files, you will find the snippet we showed above ๐Ÿ™‚

WordPress: How to Add CSS to a Specific Page URL

This is an interesting topic. A WordPress/WooCommerce client could not add CSS via the usual way. In fact, Gravity Forms plugin (and in particular the “directory” extension), stores entries in the database BUT the directory page and the entries filtered list have the same classes, ids, and cannot be “targeted” with CSS.

Long story short, and Gravity Form or not Gravity Form, here’s the snippet you can use to add CSS to any WordPress page as long as you know its URL.

Continue reading WordPress: How to Add CSS to a Specific Page URL