Product image gallery is not showing properly

Hi,

Just started adding products to this theme, and noticed that products image gallery appears properly for couple seconds and then images get resized and get large and stretch all the way down. Please see the attached screen video recording that shows the gallery appears properly when the page reloads and gets corrupted after couple seconds. Really appreciate if you can help me fix this. I am providing login information and really appreciate if you can help me fix this, thank you!

I had problem uploading the video, I have attached two screenshots, the good one is for the time page loads and the bad one is the same page after couple seconds, please login and try yourself, thanks!

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the plugins except these ones:

Slider Revolution
WPBakery Page Builder or Elementor
Woodmart Core
Contact Form 7
MailChimp for WordPress
WooCommerce
Safe SVG

If the problem has gone, activate the plugins one by one, checking the issue to detect which one causes the problem.

In case, the problem remains, even after all the plugins are deactivated, provide your site admin access (insert the site credentials into the Private content block under the message area) and confirm the permission for plugins deactivation, switching to the parent or default theme. As soon as we complete the testing we will enable all back, however, the site would be without plugins for 15-20 min. You would better make the full backup of your site.

Best Regards

Thank you for your reply, I have deactivated all the plugins except the one you mentioned, still seeing the issue. Please feel free to login using the admin info below, and check one of the product pages we have added. As you can in the attachment to our previous message, the gallery appears properly when the page reloads and gets corrupted after couple seconds. Really appreciate if you can help me fix this. I am providing login information and really appreciate if you can help me fix this, thank you!

For example please check these product pages:

https://reviewmeview.ca/product/garmin-vivofit-2-activity-tracker-navy/
https://reviewmeview.ca/product/garmin-forerunner-15-gps-running-watch-large/
https://reviewmeview.ca/product/garmin-vivofit-activity-tracker-black/
https://reviewmeview.ca/product/oral-b-pro-1000-electric-toothbrush-black-rechargeable-power-toothbrush-with-1-brush-head/

Hello,

Please try to upload the images sizes specified in our manual: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

You uploaded images with big heights. You need to test one product by uploading the proper sizes.

If you have any questions please feel free to contact us.

Best Regards

Hello Elise Noromit,

Thank you for your reply. Unfortunately I don’t think that is something that is required from our side to do as mentioned in your link as well:

NOTE: there is no required or recommended image size for product or other purposes. Image should be big enough to have a nice view. Just for information we provide images sizes applied in our demo.

The link you provided are mostly for product gallery. As I mentioned before, and you can see in my screenshot attached those thumbnail images appears good for couple seconds and then gets large. We were able to fix this issue by below custom CSS for now which might not be the best solution:

.thumbs-position-left .thumbnails .product-image-thumbnail {
max-height: 150px;
}

I am forwarding this conversation to the support manager, and see how they feel about our solution, hopefully it gets fixed in your future updates as I don’t belive in custom css as much.
Thank you!

Hi,

The behavior that you have described, it’s not a bug. When you choose one of these “2/3/4/5/6” (https://prnt.sc/3Mo4I-uQ11qs) parameters in the “Thumbnails per slide” option, your product thumbnails will proportionally fill the space relative to the height of the main carousel of the product. Your main carousel height is so high because the second image is very different from other images in terms of their aspect ratio (https://prnt.sc/YYXNFWSCRif_). The jump that you described is caused by image loading time, when vertical thumbnails’ height is depending on the first main carousel image until all images of the carousel are loaded and its height starts to depend on the tallest image carousel.

Unfortunately, issues related to the image carousel loading time can’t be fixed via WordPress theme, also “Thumbnails per slide” option parameters that you choose (https://prnt.sc/3Mo4I-uQ11qs) are mainly designed for main product carousel images that have the same aspect ratio. If you want to use your main product carousel with different aspect ratio images, you need to change some options related to the product gallery.

– You can choose “Default” parameter of the “Thumbnail per slide” (https://prnt.sc/dpZn0V7S-jjj) options, which is disabling proportional fill of the thumbnails to the height of the carousel.

OR

– You can enable “Main carousel auto height” (https://prnt.sc/z8VUdPahNWgn) option. It will make your vertical thumbnails’ carousel gain height only from first image of your main product carousel.

OR

– You can use the bottom thumbnail carousel rather than the vertical (https://prnt.sc/5cmvXTGu1SDK). In this case, your thumbnails will be placed under the main product carousel and will not be dependent on its height.

It is important to disable all your custom code related to the product gallery before you try to switch between the following options to make sure they are working right.

Kind Regards

[Author]

Posts