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!