WooCommerce and Divi: how to override !important CSS

I am a big fan of Elegant Themes, but a lot of CSS styles (mainly in Divi) contain “!important” in order to override WooCommerce styles when using the two in a combo. Now, the big problem is that we can’t override !important with another !important. Divi will win. But no matter whether Divi has been developed in a good or not so good way, there is something we can do. (NOTE: using !important is a horrible thing in CSS. Use at your own risk)

Example: the add to cart message in Divi/WooCommerce

As you can see from the screenshot, the message bar that appears in Divi once you add a single product to cart has a specific background color, which is the one you choose in Divi / theme settings.

The CSS is:

.woocommerce a.button.alt, .woocommerce-page a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce input.button.alt, .woocommerce-page input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button, .woocommerce-message, .woocommerce-error, .woocommerce-info {
background: #71b1d6 !important;
}

Sure, it’s so simple then! Let’s override Divi !important CSS…

In your child theme stylesheet or custom CSS, you would think that the following is enough:

.woocommerce-message {
background: WHITE !important;
}

…but no, it doesn’t work. Unfortunately !important doesn’t “beat” !important because the parent theme will win in this case.

Let’s change core files or override !important…

The ideal, long-term solution is: Divi should change how they apply their CSS. But in the meanwhile, let’s override its !important with a little CSS trick.

// THIS WON'T WORK

.woocommerce-message {
background: WHITE !important;
}

// BUT THIS WILL WORK!

.woocommerce .woocommerce-message {
background: WHITE !important;
}

As you can see, you can override an !important with another !important, but only if you add a more specific CSS element. In our example, we used “.woocommerce” in front of “.woocommerce-message”.

This will work!