- This topic has 9 replies, 4 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hi
I have tried troubleshooting this for quite some time now and i didnt find anything (i have verified that no 3rd party plugin is responsible for this).
Also if i use a different theme, the way that the gallery works changes and thus the problem isnt there.The problem:
In product pages where i have more than on image (aka i have a product gallery), sometimes the main image is not displayed at all!I found some differences in the values between some css classes when this problem happens versus when the main image is loaded properly!
When product page has a gallery and main image is not displayed:
The following element<div data-thumb="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-100x100.jpg" data-thumb-alt="Σαμπό Αντιστατικό Birki Air Blue" class="woocommerce-product-gallery__image flex-active-slide" style="width: 0px;margin-right: 0px;float: left;display: block;"><a href="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg"><img width="400" height="400" src="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg" class="wp-post-image loaded" alt="Σαμπό Αντιστατικό Birki Air Blue" title="Σαμπό Αντιστατικό Birki Air Blue" data-caption="" data-src="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg" data-large_image="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg" data-large_image_width="400" data-large_image_height="400" srcset="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-800x800.jpg 800w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-200x200.jpg 200w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-100x100.jpg 100w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-64x64.jpg 64w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-150x150.jpg 150w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-300x300.jpg 300w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-768x768.jpg 768w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg 1024w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-600x600.jpg 600w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-90x90.jpg 90w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-1200x1200.jpg 1200w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-1000x1000.jpg 1000w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-180x180.jpg 180w" sizes="(max-width: 800px) 100vw, 800px" draggable="false" data-was-processed="true"></a></div>
Has this csselement.style { width: 0px; margin-right: 0px; float: left; display: block; }When product page has a gallery and main image is loaded properly:
The same element
<div data-thumb="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-100x100.jpg" data-thumb-alt="Σαμπό Αντιστατικό Birki Air Blue" class="woocommerce-product-gallery__image flex-active-slide" style="width: 0px;margin-right: 0px;float: left;display: block;"><a href="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg"><img width="400" height="400" src="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg" class="wp-post-image loaded" alt="Σαμπό Αντιστατικό Birki Air Blue" title="Σαμπό Αντιστατικό Birki Air Blue" data-caption="" data-src="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg" data-large_image="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg" data-large_image_width="400" data-large_image_height="400" srcset="https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-800x800.jpg 800w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-200x200.jpg 200w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-100x100.jpg 100w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-64x64.jpg 64w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-150x150.jpg 150w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-300x300.jpg 300w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-768x768.jpg 768w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5.jpg 1024w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-600x600.jpg 600w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-90x90.jpg 90w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-1200x1200.jpg 1200w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-1000x1000.jpg 1000w, https://sofianos-orthopedika.gr/wp-content/uploads/2018/10/σαμπό-αντιστατικό-birki-air-blue-5-180x180.jpg 180w" sizes="(max-width: 800px) 100vw, 800px" draggable="false" data-was-processed="true"></a></div>
Has this csselement.style { width: 490.594px; margin-right: 0px; float: left; display: block; }i think this difference in css when image is visible and not visible maybe give you a clue where the problem actually comes from!
P.S. I am not using any 3rd party plugin lazyloading for my images!
Example link: https://sofianos-orthopedika.gr/%CF%83%CE%B1%CE%BC%CF%80%CF%8C/sampo-antistatiko-birki-air-green/
To actually see the problem live, you may need many tries and maybe it is easier if you are logged in so u will bypass cache, and it will be easier if you navigate to various products from the “related products” (Σχετικά Προϊόντα) section, which will navigate you to products from that category which many of them have gallery images, until you stamble upon it!
Customer Support
Hi there,
I think the product gallery behavior is controlled by JS from Woocommerce.
Can you disable your cache plugin or any performance plugins for us to inspect?
Thanks!
i disabled all performance plugins, but i cant turn off kinsta’s native caching!
So i will give you an account to visit the site logged in (so you will bypass cache)I made a replica of my site in a new test site look for credentials bellow.
I tested every related product shown in the example link, and the issue doesn’t appear anymore.
My guess is one of your cache plugins is somehow blocking Woocommerce’s JS from loading properly.
I would suggest activate cache plugins one at a time to find out which one is causing the issue, then go through the settings or contact its support.
Hope that’s helpful 🙂
Truth is that on my test site the problem is harded to appear, but after a lot of testing the problem still appeared even after having disabled all performance plugins (wp-rocket, perfmatters, assetcleanup)…
With that in mind i continued my test’s on the live site, cause the problem appears more easily!
I also reenabled woocommerce core lightbox & zoom functionality in the offchance that this was the problem…
Still no luck though!What i am trying right now is regenerating my thumbnails after setting a more correct width for my product images in the customizer!
I will test after it is finished, i really hope this will solve the problem although i dont think this will be it!
If this doesnt work i will really need your help to pinpoint this, maybe by looking the css that makes the product gallery work!
Maybe there is a problem!The css i am using for my product gallery is provided by GP team from older threads, so maybe something needs updating cause a lot of time has passed!
Please stay on hold!
Thank you
As i feared thumbnail regeneration didnt work!
Please proceed in re-taking a look at my problem…***Note: the problem appears sometimes only in products that have more than 1 image! (main image not loading, and gallery images on the side appearing larger)
Customer Support
Hi there,
the Theme has no control over that function. The carousel which uses Flexslider is part of the Woocommerce plugin.
On Load the Flexslider JS calculates the width of the image containers (<div data-thumb) and outputs the inline styles ( element.style ) which specifies its width and position. Those element.styles are updated when selecting a different thumb or resizing the browser. If the element.style width = 0 then it means that the JS could not calculate the containers width.If the thumbnail images are appearing larger on load then they may be filling the entire container which leaves no space for the data-thumb div and its given a width of
0which would lead to no image being displayed.Checking the HTML, all of the Thumbs are 100px and theres no CSS changing its size so i can’t see what would cause that other than some optimizing/caching on the site.
If the resized thumbs are the issue then you can try adding some CSS to give them a max-width:
@media (min-width: 420px) { .flex-control-nav.flex-control-thumbs { max-width: 60px !important; } }TO NOTE: I believe the CSS provided on this site to place the thumbs to the right of the image; it was stated that it may cause issues with the flexslider, so you may want to remove that and leave them in their default position.
Max-width dint work unfortunately!
But now that you confirmed that the way vertical gallery was implemented may caused the problem as i suspected i tried a different approach of creating the vertical gallery and so far the problem seems to have went away!
Here is a different approach for future use:
@media (min-width: 420px) { .single-product div.product .woocommerce-product-gallery .flex-viewport { width: calc(100% - 53px); /*change this accordingly to the used width bellow*/ float: right; } /* Make Gallery x width (as much as my gallery thumbnail is) and place it beside the image */ .single-product div.product .woocommerce-product-gallery .flex-control-thumbs { float: left; display: flex; flex-direction: column; width: 53px; /*change this accordingly*/ } /* Style each Thumbnail with width and margins (i am not sure this is needed) */ .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { width: 90%; float: none; margin: 0 0 10% 10%; } /* this is needed though */ .woocommerce div.product div.images .flex-control-thumbs li { width: 55px; /*play with this accordingly*/ } }Thank you for the clue!!
Glad to hear that – and thanks for sharing your updated CSS.
Hi
This work for me:
div.woocommerce-product-gallery.woocommerce-product-gallery--with-images.images > div > figure > div.woocommerce-product-gallery__image.flex-active-slide{ height:400px }
- You must be logged in to reply to this topic.
