[Resolved] CSS selectors too weak for Woocommerce

Home Forums Support CSS selectors too weak for Woocommerce

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1093859
    Adam

    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.1

    #1093880
    Leo
    Staff
    Customer Support

    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/

    #1093944
    Adam

    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

    #1093982
    Leo
    Staff
    Customer 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/WmymamP6vW

    #1094329
    Adam

    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.

    #1094796
    Leo
    Staff
    Customer 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/

    #1094904
    Adam

    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.

    #1095129
    Leo
    Staff
    Customer Support

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

    #1095175
    Adam

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

    #1095189
    Leo
    Staff
    Customer 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?

    #1095608
    Adam

    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.

    #1096057
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.