CODEWITHSUNDEEP
csswordpresswoocommerce
user2538833
user2538833

Reputation: 197

Overriding a woocommerce !important class

I'm trying to override woocommerce css class which by default is set to !important. How can I override this?

The Default is:

.woocommerce-error, .woocommerce-info, .woocommerce-message{
 padding: 1em 2em 1em 3.5em!important;}

I have tried the following but does not want to know:

main .post .entry .woocommerce-error, .woocommerce-info, .woocommerce-message{padding: 0 0 10px 0 !important;}

Not sure if I can change the original woocommerce stylesheet as I assume the changes I make will be overridden when plugin is updated.

Many thanks.

Upvotes: 2

Views: 964

Answers (3)

Imam Assidiqqi
Imam Assidiqqi

Reputation: 514

!important is amazingly evil and should be avoided unless you really 10000% sure you won't regret it (or maybe you want to do a simple utility class, which is okay). I never use Woo-commerce but it is such a shame for them to use !important rule in the css, which will be amazingly hard to make any other style that will beat that specificity.

Anyway, the best way I know is to add an ID to element that you want to override if possible, and add a new selector to improve specificity, and add !important rule to that selector (example below). But if not, wellllllll, I don't know.

#newselector{
    padding: 1em 2em 1em 3.5em!important;
}

!important is evil, I hope you won't afraid if it's suddenly eating you alive.

Upvotes: -1

Neelam Khan
Neelam Khan

Reputation: 1121

In order to over ride default Woocommerce styles it is best to disable the stylesheets by entering the below in your functions.php file:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

This way you can avoid using !important as this is bad practise and customise the shop to look as you wish.

By default Woocommerce enqueues 3 stylesheets and the above snippet will disable all of them, if you wish to disable just each one individually you can add:

// 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;
}

Please see here for more info: Woomerce Docs

Upvotes: -1

roberrrt-s
roberrrt-s

Reputation: 8210

That's because you're overlooking the comma, there are actually 3 rules inside that line of yours, and you will have to specify it for every one of them. This should work:

main .post .entry .woocommerce-error, 
main .post .entry .woocommerce-info, 
main .post .entry .woocommerce-message { 
    padding: 0 0 10px 0 !important; 
}

Upvotes: 2

Related Questions