Writing Clean WooCommerce Styles

by

So I’m building my first custom WooCommerce store and I’m finding that my styles class names are becoming a over the top and lengthy, or is this how it is. I use the inspector tool in Chrome to get the class names.

Here is an example of what I’m working with at the moment:

.woocommerce 
ul.products 
li.product a {
   ...
}

.woocommerce 
ul.products
li.product 
.price del {
   ...
}

Is this normal practice to when building a custom store or is there a better way?

Thanks in advance

Stu 🙂

2 Answers
2

What i do is, disable Woocommerce default styles depending on what i want to customize, instead of overwriting the css.

Woocommerce loads 3 styles by default:
woocommerce-general.css
woocommerce-layout.css
woocommerce-smallscreen.css

If you want to fully customize you can disable all styles or, just the ones that you dont want by adding:

// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );     // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
}

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Check the Woocommerce documentation for more detail Disable the default stylesheet

Leave a Comment