Double images showing on product pages

[shedquarters]

Hi,

I am having the same problem as other people on this forum with double images loading for a split second when I load the page: http://shedquartersonline.co.uk/shop/, I have edited /js/functions.js line as suggested in this post http://support.swiftideas.net/knowledgebase/how-to-fix-second-image-from-showing-after-removing-shop-actions/ but still no luck, is there another way of fixing it? I have attached an image of the problem

Thanks

Ross

[Mohammad – SUPPORT]

Hi,
This will only occur when you have images that are smaller than the sizes you have set. The issue here is if you have a larger image than the rest (the rest being smaller than the size you have set in the WooCommerce settings), then they will show double as the products row needs to fit the grid, to not
break the layout.You’ll need to upload larger images to match, or reduce the image height set in the WooCommerce settings.

Thanks 🙂
With Best Regards
Swift Ideas

[shedquarters]

Hi,

Thanks for getting back to me.

I have checked and the image size I have set in woocommerce is the same as the image sizes I am using: 900px x 900px. It feels to me that when you go on the page the image size automatically comes up as a rectangle (the same size as in the original neighbourhood theme) and then changes to the 900px x 900px square. Is there anyway I can override this by editing the theme files to load the images as 900px x 900px straight away?

Thanks

Ross

[Mohammad – SUPPORT]

HI,
Please follow this article http://support.swiftideas.net/knowledgebase/product-image-quality/ and set sizes according it . You will need to use the Regenerate Images plugin.

Thanks 🙂
With Best Regards
Swift Ideas

[shedquarters]

Hi,

Thanks for the link, I have done this for every image but still getting double images, any other suggestions?

Thanks

Ross

[Mohammad – SUPPORT]

This reply has been marked as private.

[shedquarters]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

This should fix the second image from showing on page load:

.woocommerce ul.products li.product figure {
  padding-bottom: 270px;
}

– Kyle

[shedquarters]

Hi Kyle,

That seems to have done the trick, thank you so much that was really annoying me!

It is however still happening on this page http://shedquartersonline.co.uk/ on the smaller product images, this is using the ‘shop products’ element within the swift page builder. Do you know how I may be able to fix this?

Thanks again for your help

Ross

[Mohammad – SUPPORT]

Hi,
It looking perfect at my side. Please check attach screenshot and check after clear cache at your side.
Thanks 🙂
With Best Regards
Swift Ideas

[shedquarters]

Hi,

I have cleared my cache but it’s still showing double images on the homepage, I have attached a screenshot, do you have any idea how this may be fixed?

Thanks

Ross

[Swift Ideas – Ed]

The page is still loading (the products are set height via jQuery which finishes on load). You can add this custom css to set it before:

.products-mini ul.products li.product figure {
padding-bottom: 170px;
}

Hope that helps.

– Ed

[shedquarters]

It worked!

Thanks so much for all your help, looks way better,

Thanks again

Ross

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved . Thanks Ed :-).
With Best Regards
Swift Ideas