CSS selectors too weak for Woocommerce

Hi there,

All of our WooCommerce sites in the library are using Autopimize without any issues and I can't recall anyone else having this issue.

Can you link me to the site in question and guide me to the specific element you are referring to?

Also make sure you are using the suggested settings here in Autopimize:
https://generatepress.com/fastest-wordpress-theme/

Hi Leo,

thanks for fast reply.

I like this theme, sadly I have quite a lot of examples with this issue I'm afraid...

example 1:
https://test.warmwanted.com/product/smart-hot-insoles/

Check the Add to cart button style. As you can see in DOM-inspector, the default background-color: #a46497 comes before style with color & background-color defined in Customizer. I had to put my style with background-color: ##ff6900 with stronger selector to override default one.

example 2:
https://test.warmwanted.com/product/smart-hot-insoles/

Add 1 product to the cart then remove it. You will get woocommerce-notice with selector .woocommerce-message. Check it's style in Inspector the default one (3th from the top) wins over the one defined in Customizer - 4th from the top.

There are many more like this, just couple of more examples:
single product page upsell grid: .onsale, product name, product price

Any chance you can disable Autopimize for now so I can see the source of the CSS?

And just to confirm, you are saying that the options here don't work for you?
https://www.screencast.com/t/WmymamP6vW

When I disable Autoptimize it works, but this is not a solution. As I said the Customizer selectors for Woocommerce are just the same as used by default so it takes only to change the order to break it.

Yes I confirm when Autoptimize is on, it doesn't work as show on screencast.

EDIT:

I switched back to parent GP theme, to start from the clean slate so no any other settings than Customizer applies. (as on screencast)

With Autopmize and without, when I'm on Customizer screen, I can see dynamic changes are applied.

After I leave Customizer screen and go through the pages:
Without Autoptimize or any other such plugin, Customizer styles applies.
With Autoptimize, the Customizer styles doesn't apply.

ps. Durring the tests I found another problem with is styling of the 'Add to cart' button on single product page for Variable product. When no variation is set the button is disabled with another .disabled class. It overrides Customizer settings as well - stronger selector.

I was running Autopimize when I did the testing and all of our WooCommerce sites in the library are also running Autopimize.

Can you make sure you are testing with a parent theme for now and use our Autopimize suggested setting here?
https://generatepress.com/fastest-wordpress-theme/

Sure, I will switch to parent theme for testing purposes if necessary, but we have ongoing development process so we need this server in our development cycle as well.

We using suggested settings for Autoptimize plus: CC Generate URI for images, aggregate inline JS and all settings in Misc Options.

Can you tell how these Misc Options should be set? There is no mention about it in the article.

The misc options should be ok. Just make sure you are using all the settings suggested in the article.

We do but it doesn't solve our problems with CSS. What's the next step?

So just to make sure, you are saying that the customizer options under Colors > WooCommerce don't work at all with the parent theme and Autopimize activated?

Do you see it working in the customizer? Or it's not changing at all?

We were able to find the cause of the problem. Our Autoptimize setting "Exclude CSS from Autoptimize" was excluding native woocommerce styles. We amended it accordingly.

Now it works fine and generated selectors by Customizer are good enough.

Thanks for your help.

No problem :)