Layouts + HTML + CSS : some elements require F5 refreshing of a page to load

Hello

I have a problem that some CSS settings are not appearing on the first load of a page that is composed from HTML blocks .. It happens only when these blocks are within a WOODMART_LAYOUTS. Otherwise everything works perefctly.

I will show you now samples of my issue:

1 . HTML BLOCK having 4 icons (inside circles), being a part of a short description , for example
https://www.woolsome.shop/product/hand-woven-woolen-blanket-white-grey-kocr-06c/
is loaded FULLY WELL here.

2. BUT, here is the same unchanged HTML BLOCK having 4 icons (inside circles), being a part of a short description
The only difference is that these sample products below , received it through a woodmart_layout :
https://www.woolsome.shop/woodmart_layout/blankets-layout-by-cezar-dec-2023/

These products below are having just mentioned layout:
https://www.woolsome.shop/product/hand-woven-woolen-blanket-grey-pink-kocr-25a/
https://www.woolsome.shop/product/hand-woven-woolen-blanket-grey-white-kocr-02b/

And the issue as you can see is that, mentioned ICONS, are loaded too big (screenshot attached) … so like not entire CSS is loaded (?)

Now .. if you refresh any of these 2 products (F5 button), you will see that everything finally is loaded, but never at the first load of a page.

3. Of course I can repair this problem by loading perefect to size pictures there.
But an issue of not fully loaded CSS is still there and then arises in other elements.

For example this entire category of products has also a woodmart_layout with the same settings, while I added there these ICONS in smaller size already (instead of reducing their size within CSS):
https://www.woolsome.shop/product-category/wool-fabrics/wool-thin-twill/

For example this product from the category:
https://www.woolsome.shop/product/wool-thin-twill-white-black-diagonal-wkt-0208-01/

As you can see there are CIRCLES LACKING at the first load , but again they will load on REFRESH of the page.

What is worth noticing .. on mobile .. refreshing never helps. And pages are loaded with these mistakes every time.

RESUME
These are just samples above.
I have many more elements on my pages , that have mentioned issue.
For example a pop-up from Image-Hotspot element (the one that shows on hover) … is normally loaded if html_block is added directly to the product page.
But when added through a woodmart_layout its is also loading with mistakes on first load… and requires refreshing a page to load its CSS settings fully.

Please help

Attachments:

You must be logged in to view attached files.

Another from many issues related to the same topic.

I have set up ZOOM option for images on product cards on entire shop .

1. products that are within woodmart_layout
NOT ZOOMING
https://www.woolsome.shop/product/linen-fabric-diamond-beige-black-ld-04-01/

2. products outside woodmart_layout
ZOOMING
https://www.woolsome.shop/product/hand-woven-woolen-blanket-white-grey-striped-kocr-04/

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the wp logins details so i will check and give you a possible solution.

Best Regards.

Hello
I tried to manage the problem as you proposed but without success

I attach below hidden info to my stagging

Please check
Thank you in advance
Cezary

Hello,

Please delete one of the product gallery widgets from the page and then check back the image zoom issue on the single product page: https://ibb.co/JKsQcpy

Unfortunately, this element can’t be used twice on the page or layout.

Best Regards.

Hello
Its not used twice.

The one that you have marked with red frame is displayed only on mobile.
While the one below only on desktop.

Hello,

Yes, I know that but, I am trying to say that this is not possible to use this product gallery widget twice on the page wheater you have hidden for desktop or mobile. You have to use only one Product gallery widget on the page for all devices.

Best Regards.

The reason I made it this way is that I desperetly need to have a bit different layout for a product page between desktop and mobile.

So how to make it different then ?
How to make different layouts for different devices ?

Hello,

You can try to create the mobile page via HTML BLock and define it in the settings of the Home page -> Mobile version HTML block (experimental): https://prnt.sc/5OuQVvHQGCQP

Thus you can define only the needed elements for mobile only.

Best Regards.

Hi
ok I have managed to setup a layuout in a way that it has expeted different version for a mobile and desktop.
And while the mentiioned widget is used only once, now ZOOM work again.

But stil the FIRST ISSUE is there.
Please check for example on any product in this category :
https://migracjawoolsome.cfolks.pl/product-category/linen-fabrics/linen-diamond-weave/

As you can see on screenshots attached.
On firs load some part of CSS information is never loaded.
And so these CIRCLES never appear on first load.
After refreshing a page with F5 they are finally poping up.

Then when you go to the next product page, the same situations .

Please check on this issue.
Note ! it never happened to products that are NOT within a woodmart layout.
Only those WITH woodmart layout has this issue.

Cezary

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the wp logins details so i will check and give you a possible solution.

Best Regards.

Hello Aizaz

I am not sure if you had read me carefully above.

The links from last message are from stagging version especially prepared for you.
Most of 3rd partyplugins there are switched of , but you can do what you need on this stagging.

And I have shared already with you in one of above message all logging info.

Cezary

Hello,

Can you please share the page url where the issue is situated. I have not seen any issue on your “LD – Linen diamond weave” category products.

Best Regards.

Try any product from Wool Fabrics category .
For example any product from this category
https://migracjawoolsome.cfolks.pl/product-category/wool-fabrics/wool-thin-twill/

Sometimes these circles appearing on first load.
But in 95 % cases the page needs to be reloaded.

This above is on desktop.
Because on mobile they never appear, and reloading /refreshing a page does not help at all.

Cezary

Hello,

I have checked your site and it is loading fine:
Screenshot for clarification:
https://ibb.co/9tpsWg7

Please check the issue after completely clearing the browser cache or check the issue in the incognito mode.

Best Regards.

Dear Aizaz

It looks like you have NOT checked my attachments on the comment #543299
The issue is on the product card, not on the category list.

And I gave you a link to the category list , so you can enter any PRODUCT from the list.

Best

Hello,

Yes, i have checked your single product page:
https://ibb.co/ZhLwn6Y

Can you please record a short video for better understanding, Please check the site after completely clearing the browser cache.

Best Regards.

[Author]

Posts