Overriding a woocommerce !important class - css

Question

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.

Answer 1

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

Answer 2

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

Answer 3

!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.