2

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 :)

1
  • Yes this is normal practice to update woocommerce-specific styles. Of course your theme styling will carry over and be used like link styles etc. May 8, 2017 at 5:44

2 Answers 2

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

1

It is always a good practice to use maximum number of classes, because using more classes gives more weight-age and it will always consider your css first.

But try not to use div or p tag while styling for price. Because different product types use different elements (Eg. simple uses p, variable uses span). So it wont be a common code for all price tags.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.