HELP WITH AN ERROR IN WOODMART AND WITH CRITICAL CSS GENERATION

Dear friends, how are you?

I have a major problem with woodmart and wp-rocket when I generate the critical CSS which is essential for speed.

When I do this in woodmart of generating the critical css with wp-rocket, the page generates a display error, because a screenshot or flash happens, and the woodmart search form appears in that flash, every time I press to open One page.

Check this out in this video:
https://www.youtube.com/watch?v=pIzlPTN2nXg

The website is this: https://fitpronatural.com/ but Please, I need that you see the video for understand this.

I believe that there must be a CSS and JS code that is responsible for correctly first hiding the search form when the page loads and I think that this code must be loaded in the header of the page as the first thing so that the search form flash does not appear in each page load.

Can you tell me what CSS and JS code should I add and in what position of the header or footer to avoid this display error?

Thank you very much, you are the best.

Hello,

This search is hidden off the screen with a CSS transform property. And the CSS for this is located in our style.css file. Check the screenshot https://prnt.sc/xp1uzv

Kind Regards

Thanks for the answer but this does not help me because I am not that expert.

Actually I asked about this for help to give me the steps to follow to solve the search form appearance flash that happens when loading any page, which is generated by the critical CSS that wp-rocket creates.
Could you see my video with the error? Check this out in this video:
https://www.youtube.com/watch?v=pIzlPTN2nXg

I ask again:

What codes and where would I have to insert them to eliminate this flash of appearance of the search form that happens when loading any page of my website, for having installed WP-rocket and generating the critical CSS?
Yo can see it in this permalink for example: https://fitpronatural.com/sobre-mi or in the home: https://fitpronatural.com/

This is vital to correct for me because otherwise your theme is not compatible with wp-rocket and wp-rocket is used by millions of users.

Thank you very much

Hello,

Sorry, but it is not possible to fix this since WP Rocket doesn’t provide an option to add any additional CSS code to resolve such kind of problems. And it doesn’t mean that our theme is not compatible with WP Rocket. It means that generated critical CSS is not correct and it is more related to WP Rocket than to our theme.
We sent you a code that should be inside the critical CSS to avoid this flash so you need to consult with plugin developers on this matter now. It is a known problem of the WP Rocket and you can read on such kind of problems in plugin’s documentation as well https://docs.wp-rocket.me/article/1321-critical-css-issues-fouc

Kind Regards

Dear Friends,
I do not have to modify wp-rocket critical CSS,
Didn’t you know that I can re-include the CSS code of the element that causes the flash (which is only to hide the search form), put it in a preferential place so that it loads first and with an “!Important”, and Would I solve this flash that is caused by a delay in loading the CSS of the search form?

This is very easy to solve, but in the previous message, you give me a screenshot that does not work for me and I need the complete and pure CSS code that manages to hide the search form in time.
So I add this to the main header, with a “!Important” on all lines, and this should avoid this flash or momentary appearance of the search form.

Please friends !!!
You are the best programmers in the world and the smartest because your theme is fantastic,
You know that this solution that I propose is feasible and very simple so that it has not occurred to you.

But I only need your help to get it implemented and I need you to give me the complete CSS code that hides the form, and not a screenshot, as well as the JS CODE if it is responsible for hiding the form also to load it in the header and not asynchronously.

Do you understand my request better?

Thank you very much with all my heart

Hello,

Try to use the following CSS code to hide the search before loading the base CSS.

.woodmart-search-full-screen {
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

If it doesn’t help, send us a page where you add it so we can test it.

Kind Regards

[Author]

Posts