[Resolved] Woocommerce thumbnail image size not working properly for 2nd image on the grid

[Francois]

Hi team,

First, thank you for you great theme. Second, I have an issue 🙂

My site is based on the e-commerce Niche template.
With the updates, it now uses the latest 7.1 Woocommerce and the latest versions of GP and GP Premium.

It seems to me something has changed with the way the theme interacts with WooCommerce thumbnails on the shop page grid.

For each product, we’ve got one main image and one additionnal gallery image. These two images used to display on the product grid of the main shop page with the woocommerce thumbnail size of 400px defined by default in the Niche settings.

sizes=”(max-width: 400px) 100vw, 400px” width=”400″ height=”400″ use to be applied for images of both classes :
– attachment-woocommerce_thumbnail size-woocommerce_thumbnail
– secondary-image attachment-shop-catalog

For more recent uploads, only the main image seems to be using the woocommerce thumbnail size of 400px.
The secondary-image attachment-shop-catalog image seems now to retain its original size as on the product page : sizes=”(max-width: 1500px) 100vw, 1500px” width=”1500″ height=”1500″.

This was brought to me during a pagespeed test telling me to properly size images even on the desktop test.

Many thanks in advance for your help.

[Fernando]

Hi Francois,

The intrinsic size of the new images seems different. They’re 1500 x 1500px intrinsically. For the older images, did you intrinsically upload them at 400 x 400 px?

[Francois]

Hi Fernando,

You’re right not all images had the same size in my examples but they’ve never been intrinsically uploaded at 400x400px.

Let’s call them :
Image 1 = main product image
Image 2 = gallery product image (used to provide an additionnal product image but also to acheive a hover effect on the shopping grid)

Image 1 was always uploaded at 1500x1500px
Image 2 was sometimes uploaded at 1000×1000 px or 1500x1500px

However both images used to show with a 400px width and height attribute on the shopping grid.
I’ll provide a private exemple with the exact same images sizes for the products but different results for the grid.

To be clear my goal here is to make sure we got the right size of images on the grid so it doesn’t take too long to load.

Thanks again

[David]

Hi there,

are you using any plugins or functions that change the way images are displayed or for example remove unused image sizes ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francois]

Hello,

No I try to keep plugins low, the website doesn’t even has a child theme.

Yesterday I installed a regenerate thumbnail plugin but this was days after discovering the issue. I didn’t even run it on the english version of the site where I provided the examples.

I’ve noticed that some woocommerce widgets used for filtering by the Niche template are now displayed as legacy widgets. My take is that Woocommerce updates might now cause some kind of bug with this GP theme?

I’d be thankfull for any kind of troubleshooting guidance of things to look at, or at least a validation that things don’t work the way they should with the secondary thumbnails size on the shopping grid.

Thanks,

[David]

What happens if you add this PHP Snippet to your site?

add_action( 'init', function() {
    add_image_size( 'shop_catalog', 400, 400, true );
});

And then run the Regenerate Thumbnails plugin ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francois]

I’ve installed Code Snippet to add the php snippet and run it to whole site, priority 10.
Then I’ve regenerated all thumbnails.

Nothing has changed for good. Except previous secondary images that were fine at 400×400 px had their width and height attributes turned into the original image size (1000x1000px or 1500x1500px).

It seems that regenerated thumbnails behaves the same as newly uploaded images products (since November).

[David]

Sorry i made a mistake in my snippet.
See above, i have edited the code:

https://generatepress.com/forums/topic/woocommerce-thumbnail-image-size-not-working-properly-for-2nd-image-on-the-grid/#post-2454582

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francois]

It works perfectly, thank you so much 🙂
I didn’t even need to regenerate the thumbnails.

[David]

Great to hear that.
Now i need to figure out why we needed to do that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francois]

If you ever find out, please let me know 😉

Have a nice day

[David]

It seems we may have an outdated attachment size in our function that displays the secondary image, so it leaves WP to make up its own mind. I have raised this as an issue in our github with a fix, so early next year we will push out a GPP update to patch that. For now the snippet does the same job 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francois]

Hi David,

Sorry for the late reply.
Glad to know you’ve found the source of the issue.

Im’ looking forward for the GPP update and thanks again for the help 🙂

[David]

You’re welcome !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts