Featured image double on product page

[creativerunway]

Hi all,

On my products pages (i.e. http://www.teresacollinsdesigns.com/products/), the featured image seems to be duplicated to fill up space when needed. So some of the product thumbnail images and the ‘related products’ images (i.e. http://www.teresacollinsdesigns.com/product/be1010-album-kit/) seem to be doubled up so the image begins to repeat the top portion of the image…

I’ve read this post: http://support.swiftideas.net/knowledgebase/how-to-fix-second-image-from-showing-after-removing-shop-actions/, and tried to implement that and have changed

productImageHeight = productImageHeight + 20;
to:
productImageHeight = productImageHeight;

on both lines 576 and 573, but that hasn’t fixed it.

Any ideas on how to fix this? And should I “undo” the changes I made to the /js/functions.js file?

(If helpful, I’ve enabled catalogue mode, I’m using version 1.73 of the theme, and these are my Woocommerce Product Image Sizes:

Catalog Images 540 × 1000 px Hard Crop? [Y]
Single Product Image 540 × 1000 px Hard Crop? [Y]
Product Thumbnails 270 × 600 px Hard Crop? [Y])

Thanks

[3dshilp]

I am also facing same issue with latest articles on homepage and when website is viewed on mobile. But couple of pictures are coming ok, can this be issue since I am not using all images of same size.Please comment. You can check it out at http://www.3dshilp.com

[Swift Ideas – Ed]

Hey guys,

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.

– Ed

[creativerunway]

Hi Ed. Thanks for your response.

I’m still working to resolve this – and I’m still a bit confused.

Take this product, for example: http://www.teresacollinsdesigns.com/product/fam104-numbers/

Listed here: http://www.teresacollinsdesigns.com/products/page/4/

The dimensions of the image are 864 × 864. I used to have my Woocommerce settings as what I listed previously, so I just barely changed them to:

Catalog Images 540 × 540 px Hard Crop? [ ]
Single Product Image 540 × 540 px Hard Crop? [ ]
Product Thumbnails 270 × 270 px Hard Crop? [ ])

(changed the heights and removed “hard crop”. Yet the image still appears stacked…

Yet, the same thing doesn’t happen to the images on page 1 of the product page…

I’ve regenerated the images for the “fam104-numbers” product, but the thumbnail is still the same (I don’t think I need to regenerate *all* thumbnails to test in this case…but perhaps I do?)

Anyways, still struggling to figure out how to resolve this. Any help or ideas would be much appreciated. Thanks

[creativerunway]

One other thing I’ve noticed, related to all this, is that many of the images seem to initially load “double”, but when the page fully loads, they are fixed. (You can see it when you first load the products page: http://www.teresacollinsdesigns.com/products
Can I fix that?

[Mohammad – SUPPORT]

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

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

Thanks 🙂
With Best Regards
Swift Ideas

[creativerunway]

Mohammed – thanks for the code. That seems to have helped stop the second image from showing…but when I “inspect element”, the dimensions list the full height…will this cause a problem with slow page load since the images are bigger, though not shown?

Also – how can I do the same for the smaller images in the “Related Products” section? (ie: http://www.teresacollinsdesigns.com/product/sw1021-decorative-stickers-build/)

Still working through the other issues…

[kevinmwatts]

I am also having this issue. For example, I only have one image uploaded for this product (there is no gallery, or additional images uploaded):
http://www.directwares.com/product/le-creuset-signature-enameled-cast-iron-1-quart-round-french-dutch-oven-cherry/

But, when I go the category page it duplicates the Featured Image to “fill the space”:
http://www.directwares.com/product-category/kitchen-dining/cookware/

Ideally I would like to adjust the code to work so that it doesn’t repeat the Featured Image.

[Mohammad – SUPPORT]

Hi,

@creativerunway – It will not effect page speed and use this code for related products-:

.related ul.products li.product figure {
  padding-bottom: 270px !important;
}

——————————————————————————————–

@kevinmwatts – please use this custom css code-:

.woocommerce ul.products li.product figure {
  padding-bottom: 186px !important;
}

.related ul.products li.product figure {
  padding-bottom: 186px !important;
}

Thanks 🙂
With Best Regards
Swift Ideas

[creativerunway]

Thanks Mohammad. I tried that code, and unfortunately it didn’t work properly. I also used Chrome Developer tools via “inspect element” to try and apply the same code to other classes, and it moved the second image down appropriately, but the shadow remained at the bottom of the 270px height…so not quite right. Anything else I could try?
Thanks a lot for your help.

[kevinmwatts]

Thank you as well Mohammad. This solutions works on desktops, but when viewed on mobile the images are 75% covered up by the additional padding.

[Mohammad – SUPPORT]

Hi,

@creativerunway – Please remove that one code and use this one.

.woocommerce .related ul.products li.product figure{
padding-bottom:170px !important
}

@kevinmwatts – Please create another topic.
Thanks 🙂
With Best Regards
Swift Ideas

[creativerunway]

Thanks Mohammad, that worked and the desktop site is looking great 🙂
Do you know of a solution for applying that type of adjustment across devices (i.e. in a responsive scenario)?

[Mohammad – SUPPORT]

Hi,
Please use custom css code for small devices-:

@media only screen and (max-width: 1024px) {
.woocommerce ul.products li.product figure {
padding-bottom: 240px !important;
}
.woocommerce .related ul.products li.product figure {
padding-bottom: 140px !important;
}
}

Thanks 🙂
With Best Regards
Swift Ideas