Product Images Not Showing Until I begin To Scroll Down Page On Mobile

  • Resolved mfghost

    (@mfghost)


    1 year, 4 months ago

    On my site whenever I click to go to a single product page, once the page loads the image doesn’t show until I begin to scroll the page downwards. This is on mobile only. There is no image placeholder, just a white box. All of my products for the most part have an all white background…I do have lazy load image turned on on LiteSpeed cache but this has never happened before. A few days ago I had a plugin that was blocking all product images on the single product pages but I immediately removed the plugin and everything went back to normal. Now whenever I visit the site on mobile, to make sure everything is working correctly, I noticed this white box, which is not the placeholder image. Am I missing something here?? I know on AutoOptimize there was a setting that let you select the number of images to show before lazy load began to load images as you scroll down the page, but I am not using that right now. I can’t figure this out and it looks kinda bad for the customers. Before I go all out and possibly screwing up anything else by playing with the settings, I wanted to see if anyone else had this issue & knew of a fix.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Saif

    (@babylon1999)

    Hello @mfghost,

    Thank you for reaching out!

    If I understand correctly, you wish for the product image to be immediately visible upon page load, rather than appearing only when the customer scrolls down.

    It appears that your theme intentionally hides the image upon visiting the page, presumably as part of its design.

    You can change this by adding the following snippet into Appearance → Customize → Additional CSS.

    /* Remove transition on mobile  */ 

@media only screen and (max-width: 600px) {
  .product .woocommerce-product-gallery{
  opacity: unset !important;
  transition: unset !important;
}
}

    If you have any other questions about this, please get in touch with the theme author. :?)

    Cheers!

    Thread Starter mfghost

    (@mfghost)

    @babylon1999 that worked for Chrome browser perfectly, thank you. I need to see if it works for Safari as well but I’m on vacation and the internet/WiFi is the absolute worst ever so I’ll see when I get home in a few days. Thank you for your help!

    Any idea why sometimes these little bugs just pop up out of nowhere? Like I have everything the same then out of nowhere something starts acting up…without me changing any settings or adding plugins or anything…drives me crazy.

    Plugin Support Beauty of Code (woo-hc)

    (@beautyofcode)

    Hi @mfghost ,

    I’m glad to hear that the CSS snippet worked for Chrome!

    Any idea why sometimes these little bugs just pop up out of nowhere? Like I have everything the same then out of nowhere something starts acting up…without me changing any settings or adding plugins or anything…drives me crazy.

    I understand how frustrating it can be when unexpected issues like this arise on your site without any apparent changes being made.

    Technology and software can be complex, and sometimes even minor updates or changes in the environment can have unintended effects. Various factors can contribute to these occasional glitches.

    For example, browser updates, changes to the theme or plugin code (which may be the case here as the theme seems to be intentionally hiding the image), server configurations, or even conflicts between different components can cause these type of issue.

    Enjoy the rest of your vacation, and I do hope the Safari browser also behaves as expected.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product Images Not Showing Until I begin To Scroll Down Page On Mobile’ is closed to new replies.