[Resolved] Some CSS not loading with Wp Rocket

[GeneratePressUser]

Hello Generatepress Team,

We have made our woocommerce notices like this using additional css: https://prnt.sc/CePeeDGXwrt9

But on using WP rocket that loads like this: https://prnt.sc/O6gCsJ48dmya

and only it shows that view cart css on hovering mouse on it.

In Wp rocket we have enabled these options:

Minify CSS Files
Minify Javascript Files
Load JavaScript deferred
Delay JavaScript execution

Also we followed this guide for Delay JavaScript execution:

https://docs.wp-rocket.me/article/1560-delay-javascript-execution-compatibility-exclusions?utm_source=wp_plugin&utm_medium=wp_rocket

We have excluded these:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
/wp-includes/js/imagesloaded.min.js
ElementorProFrontendConfig
elementorFrontendConfig
/wp-includes/js/underscore.min.js
/wp-includes/js/jquery/ui/core.min.js
/wp-includes/js/backbone.min.js
elementorAdminBarConfig
elementorCommonConfig
/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js
/elementor-pro/assets/js/preloaded-elements-handlers.min.js
/generatepress/assets/js/menu.min.js
generatepressMenu
/gp-premium/menu-plus/functions/js/offside.min.js
google-analytics.com/analytics.js
ga\( ‘
ga\(‘
/gtag/js
gtag\(
/gtm.js

Pls can you let us know what we need to do for the Generatepress premium plugin additional css? If we are using minify css and combine css then what all things we need to put in exclude?

[Ying]

Hi there,

and only it shows that view cart css on hovering mouse on it.

Can you share the CSS you added?

[GeneratePressUser]

/* Woocommerce Notices */
div.woocommerce-message a.button {
background-color: #000 !important;
padding: 2px 10px 2px 10px !important;
}

div.woocommerce-message a.button:hover {
background-color: #3F3F3F !important;
padding: 2px 10px 2px 10px !important;
}

I have a lot of custom css but It seems all that is loading fine so far didn’t notice but if you feel even that can cause issue then pls let us know, let us know the best to have all generatepress styles loading properly in wp rocket and what all settings do you guys prefer to be added in wp rocket.

[Ying]

The additional CSS in the customizer is not managed by the theme, it’s WP CSS, not GP CSS.

If the CSS added to the additional CSS field doesn’t work, first of all, check if there’s any error in this entire CSS stylesheet(you can focus on the CSS added before the CSS which doesn’t work), if you are sure the CSS is correct, then you’ll need to contact the cache plugin’s support.

[GeneratePressUser]

Hey Ying,

That CSS works, only after using WP rocket it didn’t work, I guess after enabling minify css option, could it be coz woocommerce notices dont load on the page right away? I mean it would load only if someone adds product in the cart right? Could that be the issue?

[Ying]

Does disabling WP rocket work?

[GeneratePressUser]

OK wait its weird on disabling the plugin too its not working, as far as I know it used to work fine, can u pls cross check that css which I gave you, your team I guess gave me that css and it was working fine, is there any mistake in that css?

[Ying]

The CSS you attached is correct, can you try move the CSS to the top of the CSS field?

[GeneratePressUser]

Hey Ying,

That fixed it lol, how is that possible? even with WP Rocket its working fine now.

[GeneratePressUser]

Hey Ying,

Ok got the issue, it was just 1 } extra in some css code above it, that caused all the issue.

Can you pls tell if we want to display some css for screen size more than mobile but upto tablets, then we use this code:

@media (min-width: 500px) and (max-width: 768px) {
   Our Code here
}

Is that correct way to input code for just tablets?

[Leo]

This should help:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Tablets are tricky to deal with though as they are all different sizes and orientation-wise (landscape vs portrait).

[GeneratePressUser]

Thanks a lot Leo, btw there are any settings recommendation if using Wp Rocket? like we got settings from Cloudflare and Jetpack team if using Wp rocket, so is there anything which we need to put from Generatepress end?

And 1 question off this topic does generatepress offer off site cart menu? in navigation bar as you guys have cart mini menu, so is there a menu which opens from right/left side on click?

[Fernando]

Hello there,

We only have recommendations for Autoptimize and here it is: https://docs.generatepress.com/article/configuring-autoptimize/

Perhaps you can check if there are similar settings in WP Rocket and set it up similarly.

Here’s some pointers by David as well: https://generatepress.com/forums/topic/generatepress-and-wp-rocket-what-settings-are-recommended-exclusions/#post-1963198

With regards to an off-canvas cart menu, you would need custom development for that.

Hope this clarifies!

[GeneratePressUser]

Hey Fernando,

WP Astra launched a big major update having so many amazing options for woocommerce + off canvas menu and all those things, is generatepress going to have such major update or not? coz right now we can see they are offering all those things which we need, while generatepress is lacking it right now.

[Leo]

Additional WooCommerce options are on the road map but we don’t have a timeline for it yet unfortunately.

We are very diligent when it comes to adding options in order to keep the theme/premium plugin high-performance and non-bloated.

[Author]

Posts