Problems with buttons css when using WP Rocket

Hello,

With latest Woodmart version 8.5.0 i have got problems with LOAD MORE buttons and some text link buttons. These buttons loose all their styling when WP Rocket remove unused css option is active.

This is an typical css, which will not work:
.btn-color-primary.btn-style-link {
–btn-color: var(–color-gray-800);
–btn-color-hover: var(–color-gray-500);
}

If i change that as below it works ok:
.btn-color-primary.btn-style-link {
color: var(–color-gray-800);
–btn-color-hover: var(–color-gray-500); // This one does not work, i have to do it as below
}
.btn-color-primary.btn-style-link:hover {
color: var(–color-gray-500);
}

I am getting problems like this on every Woodmart update, and have to rebuild css. If i disable the wp rocket unused css option it works ok BUT then my site is like 10 years back in time, very slow and very bad lighthouse results. So that is not an option.

Any idea on how to solve this?

Brgds
Rune

Hello,

Currently, we can’t open your website and get 403 error https://gyazo.com/35fb57973939ece2b06ceb469e583a5f

Kind Regards

Hello,

Ok, it is probably our firewall after our latest DDOS attack.

Anyway, i have found what is going on. For some reason some Woodmart css files are not beeing minified, or atleast not changing its name as before. I have had this file excluded from unused css like this: /wp-content/themes/woodmart/css/parts/base.min.css

Now i have added in an regex like this: /wp-content/themes/woodmart/css/parts/base(.*).css, and that did the trick. So i did the same with mod-load-more-button(.*).css and el-button(.*).css, just in case.

This did the trick, all buttons back to normal.

Remove unused css is activated again and site is again loading 2-3 times faster in mobile, but still not that fast as with previous versions of Woodmart. I turned off the new option for inline css and that helped a little for loading speed.

For the last 8-10 months it has been harder and harder to keep the site optimized for 100/100 score at lighthouse/pagespeed.

Brgds
Rune

Hi there,

Thanks for the update and for sharing what you tried. Glad to hear the regex exclusions helped restore the button styles.

In many cases the “Remove Unused CSS” option isn’t necessary with WoodMart and can introduce side effects. We’d like to review your current setup and suggest a configuration that keeps performance high without breaking styles, or identify any other underlying issue.

Please provide the following via the forum’s Private Content field:
– Temporary wp‑admin access (Administrator role)
– A direct link to 1–2 pages where the issue appeared with “Remove Unused CSS” enabled

Once we can check your configuration, we’ll advise on concrete adjustments to WP Rocket and the theme performance options tailored to your site.

Kind regards,
XTemos Studio

Hello,

Well, i am not sure about that 🙂 6-8 months ago i was stable with a score of 97/100 on every single page with pagespeed/lighthouse. Tested hundreds of Woodmart sites and demo sites but none of them even getting close.

Anyway, if you want to have a look i will need your IP or maybe country to whitelist in the firewall.

Brgds
Rune

Hello,

Here is our IP to whitelist 176.98.82.135

Kind Regards

Ok, then you ip will be whitelisted by server techs in a few minutes, they are usually very fast, and login information added to private area. The frontpage is one of the pages that had issuew with LOAD MORE buttons below all product grids. And also the 2 slider buttons on top of page (in slider) and a few button text links longer down LES MER with underscore.

But as mentioned everything is OK now after i added the regex to exclude field for remove unused css. ALL ok and lighthouse score like 96/100. Almost as good as before.

Brgds
Rune

Following the PageSpeed audit, we identified several issues affecting your site’s speed performance.
You currently have the Optimize CSS delivery option enabled. Here is how it works: it gathers all the CSS used on the page, as well as the files you added to the exclude list https://take.ms/6zSxi, and embeds this code directly into the page HTML. While this is beneficial for a first-time visitor, it actually has a negative impact on loading speed if a user navigates through multiple pages of your website. Why does this happen? The reason is that CSS embedded directly in HTML cannot be cached by the browser, whereas CSS loaded via a <link> tag is successfully cached.

Our Recommendations:

Disable the Optimize CSS delivery option.

Set the Inline styles size limit option to 40–60 KB https://take.ms/daLnos

At first glance, it appears you aren’t using any standard WPBakery elements. Therefore, we recommend enabling the “Use simplified WPBakery styles” option https://take.ms/pyvv0
(If you do use them anywhere, it would be better to replace them with our custom elements. This is because WPBakery does not split its CSS file, making it quite large and directly degrading your FCP metric).

We also noticed that the image affecting the LCP metric was being lazy-loaded. We have added it to the exclude list: https://monosnap.ai/direct/te8C6eqJiiMsmHptryO7030ql8zN36.

Your page uses the Font Awesome font. We do not recommend loading icon fonts entirely; you are loading a whole library just for the sake of 1–5 icons. It is much more efficient to replace them with lightweight SVG icons.

Belive me, i have tested hundreds of times with remove unused css option deactivated, this because i would be happy to not use it. Also 1-2 days ago when i updated Woodmart to 8.5.0 and discovered the button issues i deactivated the remove unused css option because i had no time to fix the issue back then. The Inline styles size limit option was set to 40 kb.

But as usual my site was terrible slow, in mobile it was upto 3 sec slower loading so this morning i just had to jump into it and fix the files in the exclusion box with new names due to the .min missing in all excluded files located in css folder parts. Then i was back to normal with page loading in mobile around 0,6 sec for all pages.

I am not using much bakery element except from my customerservice page where i have in use their buttons and FAQ element. I can not find anything to replace the FAQ element with toggle option, any idea ??

Yes you have right, changed the slider background image some days ago and forgot to exclude it from lazy loading.

Also font awesome is on my todo list to get it removed. Been on the list for 2-3 years, LOL.

Brgds
Rune

Hello,

You can replace the FAQ element with an Accordion element.

Your site uses a lot of CSS from third-party plugins. The main issue is that it is loaded in the , but actually used in popups or testimonials at the bottom of the page. In our opinion, you should move the connection of these files to the bottom of the page. https://monosnap.ai/direct/Cp2Md3fO9OVcAK27ykh9MSx2hTQYH0 https://take.ms/1uuEp

Regarding the slider images, we recommend adding them using the new option: https://take.ms/kI1xh . In this case, the image will be added via an tag, which means it will support srcset and the browser’s default lazy loading. Additionally, it will be preloaded on the page if WordPress considers it an image that affects the LCP (Largest Contentful Paint).

Kind Regards

The slider images and testimonial CSS is only for the frontpage but slow loading and bad pagespeed results are for all pages, even the simplest pages that always has given me just a blink when opening and unbelivable pagespeed results.

I have used the days since my last post to test every aspect of the site, deactivated 40% of the worst plugins, used autoptimizer and combined all CSS (actually a little better) but still very, very bad for mobile. Loading speed is very unstable, one moment good and the next moment 8-10 seconds, something i never have seen before.

Before i could use different browsers, desktop or mobile and surfing for 30 minutes or so and never dropped into any slow loading pages.

I will have to activate the unused css option again and better fix the css for buttons so i can get my site stable again and all good with pagespeed, even LCP, FCP and speed index. Yes, speed index is now 4.8, i have never seen that hig numbers before – 3 months ago and before that i had for mobile 0,6 in speed index.

How is actually the CSS vars in your css declared?
.btn-color-white.btn-style-bordered {
–btn-color: #FFF;
–btn-bgcolor-hover: #FFF;
}

I have noticed that sometimes vars like –btn-color is not declared and thats why css wont work. But most of these css works with remove unused css so that is wierd.

Brgds
Rune

Hello again.. I saw you where in site this morning and had saved the remove unused css exclusion box as the option was running on site?

Then i am wondering if you changed anything?

After i had finished my job yesterday i had everything working and pagespeed 99/100 on mobile, even LCP was perfect:
https://pagespeed.web.dev/analysis/https-www-arctic-fritid-as-butikken/5xhnhj88z4?form_factor=mobile
https://pagespeed.web.dev/analysis/https-www-arctic-fritid-as/uztzx7djr9?form_factor=mobile

But today i get only 95/100 on several tests and LSP is very bad. Also i noticed today that background colors was missing in the mobile menu tabs and the CSS looks like below, with multiple ,, and does not work:

.wd-nav-mob-tab {
–nav-gap: 0;
–nav-pd: 18px 15px;
–nav-color: rgba(var(–wd-navigation-color),,.5);
–nav-color-hover: rgba(var(–wd-navigation-color),,1);
–nav-bg: rgba(var(–color-black-rgba),,.04);
–nav-bg-active: rgba(var(–color-black-rgba),,.09);
–nav-radius: 0;
display: flex;
margin: 0;
border-bottom: 1px solid var(–brdcolor-gray-300);
}

After everything set yesterday it was all perfect, also mobile tabs. So just wondering if any settings has been changed.

Brgds
Rune

All we did was disable the option here: https://take.ms/zlkht to check whether CSS files from third-party plugins are loaded on all pages. We discovered that even if you use reviews only on the homepage, its CSS file — as well as all other CSS files — is still loaded across all pages.

Button styles are defined in four places:

When configuring the color for all buttons via Theme Settings > Style > Buttons > Advanced button styles > All buttons, a CSS variable is set like this: https://take.ms/3FxFB

The theme includes “Default” and “Accent” button groups that can be customized separately: https://take.ms/Dj4xP and https://take.ms/ADy0r

There is a button element with color presets. The corresponding CSS file is enqueued/loaded only when you select that specific preset in the element settings: https://monosnap.ai/direct/5QFiDMhIIHHWwdHwAyPPZ9WHMZ1P24

This option is for setting a custom button color: https://take.ms/Aj3eP

[metuza]

Ok, good 🙂 I tested with reviews plugin and lots of other plugins disabled but with no success, still slow and very unstable.

It seems like WP Rocket has problems when CSS combines like this:
–nav-bg-active: rgba(var(–color-black-rgba), .09);

When wp rocket has run the remove unused css function then the above css looks like this:
–nav-bg-active: rgba(var(–color-black-rgba),,.09);

As you can see a second comma “,” is placed into the css making it not working.

I have been in contact with wp rocket and they will look into it why it happens.

I forgot to mention in my previous message that the issue caused me to open this ticket was because many of the CSS files in folder /wp-content/themes/woodmart/css/parts/ does no longer survive wp rocket css file minification. When i excluded all these files from minification all buttons was back to normal and i was able to move my site and all its pages upto 95-99/100 at pagespeed.

So my site is now almost back to what it was 3-4 months ago, fast and stable.

So now i just hope that wp rocket will find a fix for the problematic css so i can remove LOTS of custom css and getting all pages back to old standards at 100/100 at pagespeed.

Brgds
Rune

• This reply was modified 3 weeks, 6 days ago by metuza.
• This reply was modified 3 weeks, 6 days ago by metuza.

Hello,
Thanks for the detailed follow-up.

Apologies for the delayed response. We have been looking into alternative ways to write the CSS selector to avoid conflicts with WP Rocket. Unfortunately, it is currently impossible to fix this on our end, as the variables used in the color function are required to optimize the CSS for color schemes.

Also, all WoodMart CSS files (including /wp-content/themes/woodmart/css/parts/) are already minified by default. There’s no need to minify them again via WP Rocket; please keep WP Rocket’s CSS minification disabled for theme files and use it only for third‑party plugins that ship non‑minified CSS. Your current workaround with excluding those parts files from WP Rocket processing is correct and the right approach until WP Rocket updates their parser.

Kind regards,
XTemos Studio

[Author]

Posts