Custom CSS in widgets doesn’t load correctly after latest update.
Update 1.2.13 fixed issues from 1.2.12 where custom css in the widgets weren’t loaded successfully, but in my experience this has only been partially fixed.
I run a website with a Woocommerce installation. On some pages I use a plugin to load the shopping cart directly on a landing page. The content loads correctly via the short code, but before update 1.2.12, I could override the css of the loaded content via the Widget > Advanced > Custom CSS. Now however, any code that tries to override the css of this content won’t be loaded.
If I use the DevKit to load the CSS it will be loaded correctly, but then the css will be loaded globally for the entire site instead of the couple of instances I need.
Possible Answers to Your Question:
DevKit and the CSS panel do one simple thing – they output the content of those fields via a hook into the footer of your site so they load last. They use the same place to output code, which is inside a wrapper with the ID layers-custom-styles-inline-css. Note that DevKit being active will trump whatever was in the CSS panel.
Whether the CSS overrides or not depends on where it lands in the load order, and whether the selectors you are using are correct or specific enough. In the case of WooCommerce, they change classes a lot. Things like improperly formatted comments, missing semicolons or brackets can also keep portions of your CSS from loading. Please see the following for advice on CSS and load order troubleshooting:
For support for styling WooCommerce or 3rd party products, please visit the plugin support forums.