- This topic has 11 replies, 2 voices, and was last updated 2 years, 9 months ago by Leo.
December 4, 2019 at 5:58 pm #1093859Adam
I didn’t find any support other than this forum so I post here.
I found CSS selectors used by Customizer settings to be too weak to override default ones provided by Woocommerce plugin, especially related to colors. It only takes change the order of CSS styles to mess up part of Customizer settings (at least for Woocommerce). To better understand what I’m saying just install one of the most popular code minimizers/optimizers like Autoptimize and check if styles you set in Customizer related to Woocommerce are still in place.
To work around this, I had to duplicate some CSS in a custom CSS file and add stronger selectors to make my setting works. This also increases the number of styles loaded…
Will the GP team plan to do something about it?
I’m using theme 2.4.1 and GP Premium 1.9.1December 4, 2019 at 6:22 pm #1093880LeoStaffCustomer Support
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/December 4, 2019 at 7:56 pm #1093944Adam
thanks for fast reply.
I like this theme, sadly I have quite a lot of examples with this issue I’m afraid…
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.
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 priceDecember 4, 2019 at 8:49 pm #1093982LeoStaffCustomer Support
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/WmymamP6vWDecember 5, 2019 at 3:41 am #1094329Adam
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.
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.December 5, 2019 at 9:03 am #1094796LeoStaffCustomer Support
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/December 5, 2019 at 10:46 am #1094904Adam
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.December 5, 2019 at 2:50 pm #1095129LeoStaffCustomer SupportDecember 5, 2019 at 3:43 pm #1095175Adam
We do but it doesn’t solve our problems with CSS. What’s the next step?December 5, 2019 at 4:07 pm #1095189LeoStaffCustomer Support
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?December 6, 2019 at 3:37 am #1095608Adam
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.December 6, 2019 at 8:55 am #1096057
- You must be logged in to reply to this topic.