Home › Forums › WoodMart support forum › WP Rocket “Remove Unused CSS” breaks WoodMart buttons and search styling

WP Rocket “Remove Unused CSS” breaks WoodMart buttons and search styling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 12, 2026 at 3:59 am #712208

    granule.petshop
    Participant

    Hi XTemos team,

    I’d like to ask for your help with properly optimizing WP Rocket on my WoodMart-based site.

    The main problem appears when I enable:

    WP Rocket → File Optimization → Optimize CSS Delivery → Remove Unused CSS

    After a short time, some buttons and the search field on the site lose their original CSS styling. They appear broken or unstyled, which has a very negative impact on the site’s UX/UI and overall user experience.

    I already tried adding the following classes to the CSS Safelist in WP Rocket:
    .wp-block-wd-button
    .btn
    button
    .button
    .woodmart-button
    .wd-button
    .add-to-cart
    .cart-panel-btn
    .searchform

    Unfortunately, that did not solve the issue.

    Aftger that, i even tried longer CSS salefist, but that doesn’t helped, too:
    .wd-button(.*)
    .woodmart-button(.*)
    .wd-btn(.*)
    .btn(.*)
    .button(.*)
    button
    .wp-block-button(.*)
    .wp-block-wd-button(.*)
    .woocommerce a.button(.*)
    .woocommerce button.button(.*)
    .woocommerce input.button(.*)
    .woocommerce .button(.*)
    .single_add_to_cart_button(.*)
    .add_to_cart_button(.*)
    .add-to-cart(.*)
    .cart-panel-btn(.*)
    .checkout-button(.*)
    .wc-forward(.*)
    .wd-tools-element(.*)
    .wd-tool(.*)
    .wd-action-btn(.*)
    .wd-nav-btn(.*)
    .wd-header(.*)
    .wd-header-search(.*)
    .wd-search(.*)
    .wd-search-form(.*)
    .wd-search-dropdown(.*)
    .wd-search-wrapper(.*)
    .wd-search-field(.*)
    .wd-search-cat(.*)
    .wd-cat(.*)
    .searchform(.*)
    .search-form(.*)
    .search-field(.*)
    input[type=”search”]
    input.search-field
    input[role=”searchbox”]
    input[type=”text”]
    input[type=”submit”]
    button[type=”submit”]
    .form-control(.*)
    .wd-style-default(.*)
    .wd-style-bordered(.*)
    .wd-style-text(.*)
    .wd-style-solid(.*)
    .wd-style-outline(.*)
    .wd-size-small(.*)
    .wd-size-default(.*)
    .wd-size-large(.*)
    .wd-icon(.*)
    .wd-with-icon(.*)
    .wd-hover(.*)
    .opened(.*)
    .active(.*)
    .current(.*)
    :is(.wd-search,.wd-header-search,.wd-tools-element,.wd-action-btn,.wd-button,.wd-btn)

    Even the contact popup is broken – opening as a centered popup, instead it appears from the right side.

    Could you please help me identify which CSS classes, selectors, or elements should actually be added to the safelist so that the buttons and search field keep their original WoodMart styling when Remove Unused CSS is enabled?

    Disabling Remove Unused CSS is not really an option for me, and switching to Load CSS Asynchronously is also not a good solution, because in that case the site speed drops dramatically – from around 80% to about 25% – and the site becomes too slow to use properly.

    So I would really appreciate your guidance on how to configure this correctly specifically for WoodMart + WP Rocket, while keeping Remove Unused CSS enabled.

    Thank you in advance for your help.
    Dejan

    Attachments:
    You must be logged in to view attached files.
    March 12, 2026 at 4:09 am #712212

    granule.petshop
    Participant

    I tested this further, and unfortunately the issue is still not resolved.

    The problem happens when I enable:

    WP Rocket → File Optimization → Optimize CSS Delivery → Remove Unused CSS

    After some time, once WP Rocket regenerates the Used CSS, important WoodMart elements lose their styling.

    So far, I have already tried adding a large number of selectors and even theme CSS paths to the WP Rocket CSS Safelist, including button, search, WooCommerce, and WoodMart-specific selectors, but the issue still appears. I tried even this CSS safelist, too without any improvement:
    /themes/woodmart/style.css
    /themes/woodmart/css/
    /themes/woodmart/inc/integrations/woocommerce/assets/css/
    .wd-button(.*)
    .woodmart-button(.*)
    .wd-btn(.*)
    .wd-search(.*)
    .wd-header-search(.*)
    .wd-search-form(.*)
    .wd-tools-element(.*)
    .wd-action-btn(.*)
    .woocommerce .button(.*)
    .single_add_to_cart_button(.*)
    .add_to_cart_button(.*)
    .search-form(.*)
    .search-field(.*)

    This means the problem does not seem to be caused by just one or two missing classes.

    The broken elements include:
    • buttons losing their original styling
    • the search field losing its CSS styling
    • footer margines messed up
    • even the contact “page” popup is broken – it started opening properly as a centered popup, instead of appears default from the right side

    At this point, it really looks like WP Rocket Remove Unused CSS is removing or failing to preserve important WoodMart dynamic styles, and that this cannot be fixed with a simple safelist.

    Could you please advise:
    1. whether this is a known incompatibility between WoodMart and WP Rocket Remove Unused CSS
    2. whether there are any specific WoodMart assets or dynamic CSS parts that must be excluded
    3. whether you recommend a WoodMart-specific workaround for keeping Remove Unused CSS enabled without breaking the theme styling

    Disabling Remove Unused CSS is not a realistic solution for me, because site performance drops dramatically without it, and switching to Load CSS Asynchronously is also not viable for the same reason.

    So I would really appreciate a concrete recommendation on how to make this work correctly with WoodMart.

    Thank you in advance.

    March 12, 2026 at 4:11 am #712213

    granule.petshop
    Participant

    one more photo with broken element on mobile size

    Attachments:
    You must be logged in to view attached files.
    March 12, 2026 at 11:35 am #712255

    Artem Temos
    Keymaster
    Xtemos team

    Hi Dejan,

    Thanks for the detailed report and tests.

    1) Is this a known incompatibility?
    No. WP Rocket is broadly compatible with WoodMart. However, the Remove Unused CSS feature can strip dynamic and conditionally loaded styles used by WoodMart (buttons, search, popups) when its Used CSS is regenerated. For this reason, we usually don’t recommend enabling this feature on complex WooCommerce setups.

    2) Specific assets or dynamic parts to exclude?
    There isn’t a universal safelist that will fit all websites. The required exclusions vary per site depending on layout, builder, active plugins, and content. This list can only be found experimentally on each site. It doesn’t mean the feature is incompatible, but our support doesn’t cover creating a custom safelist per website.

    3) Recommended approach to keep Remove Unused CSS enabled:
    – Force regeneration and recheck:
    – Purge all caches and clear Used CSS, then test again.
    – Deactivate and reactivate WP Rocket. In similar cases this alone restored missing styles.
    – Isolate any additional conflicts:
    – Temporarily disable all third-party plugins except required ones (WoodMart Core, WooCommerce), then re-enable them one by one to see if any plugin markup changes affect the Used CSS generation.
    – If you use a child theme, switch to the parent theme to rule out customizations.

    If you must keep Remove Unused CSS enabled, the safelist needs to be built experimentally on your specific content and templates, and the Used CSS should be regenerated after each adjustment.

    Kind Regards

  • Author
    Posts

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)