Home › Forums › WoodMart support forum › Layouts + HTML + CSS : some elements require F5 refreshing of a page to load

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

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 12, 2024 at 4:43 pm #529387

    Woolsome
    Participant

    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.
    January 12, 2024 at 11:58 pm #529473

    Woolsome
    Participant

    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/

    January 13, 2024 at 11:06 am #529514

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 10, 2024 at 8:19 pm #538769

    Woolsome
    Participant

    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

    February 12, 2024 at 11:10 am #538954

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 12, 2024 at 11:35 am #538969

    Woolsome
    Participant

    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.

    February 12, 2024 at 2:29 pm #539045

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 21, 2024 at 10:54 pm #542529

    Woolsome
    Participant

    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 ?

    February 22, 2024 at 2:11 pm #542809

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 23, 2024 at 9:59 pm #543299

    Woolsome
    Participant

    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.
    February 24, 2024 at 7:14 pm #543518

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 24, 2024 at 7:25 pm #543527

    Woolsome
    Participant

    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

    February 26, 2024 at 10:30 am #543725

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 26, 2024 at 10:51 am #543737

    Woolsome
    Participant

    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

    February 26, 2024 at 3:39 pm #543895

    Aizaz Imtiaz Awan
    Keymaster

    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.

    February 26, 2024 at 4:10 pm #543908

    Woolsome
    Participant

    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

    February 27, 2024 at 11:23 am #544173

    Aizaz Imtiaz Awan
    Keymaster

    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
Viewing 17 posts - 1 through 17 (of 17 total)