Woocommerce 3.3+ thumbnail issues

Hi there,

I'm not sure I understand? GP itself doesn't alter the WooCommerce images in any way - all of that is handled by WooCommerce itself.

On which page is your site using 100x100 images?

Sorry Tom, it looks like I need to research my issue some more. The Woocommerce docs don't seem to match what I'm seeing.

Okay, I've identified the problem and fixed it using a child theme.

My issue is that the gallery images thumbnails (the little thumbnails that show extra images in a strip below the main image on a single product page) appear to default to 100 x 100 pixels, UNLESS the theme declares a different value, which Generatepress doesn't do.

Using Generatepress theme, I can see in Chrome Inspector that the container for these images is an ordered list:

<ol class="flex-control-nav flex-control-thumbs"><li><img src="https://kidsinthekitchen.nz/wp-content/uploads/2018/11/KN5B0W511_zoom-100x100.jpg" class="flex-active" draggable="false" scale="0"></li><li><img src="https://kidsinthekitchen.nz/wp-content/uploads/2018/11/UK091-2T-100x100.jpg" draggable="false" scale="0"></li><li><img src="https://kidsinthekitchen.nz/wp-content/uploads/2018/11/UK091-3T-100x100.jpg" draggable="false" scale="0"></li><li><img src="https://kidsinthekitchen.nz/wp-content/uploads/2018/11/UK091-6T-100x100.jpg" draggable="false" scale="0"></li></ol>

The height of this list element (on my high dpi screen at least) is shown in Chrome inspector as 115.438px which means that the default 100x100 thumbnail size is too small; therefore the image is being scaled up to fit and hence looks awful.

This is something I noticed when creating the site a year ago. Back then I simply edited the gallery thumbnail size in Woocommerce settings to a larger value until it looked sharp. This control was removed in Woocommerce 3.3+ (it seems to be their position its now up to the theme developer to choose a size which fits their theme).

As stated above, according to Woocommerce docs a theme author can declare a size for the gallery thumbnail which best suits their theme.

However, this doesn't return control of the thumbnail size to me, the shop owner, without editing the theme, as Customiser won't allow me to change that setting.

So instead I created a child theme and added just this to functions.php:

add_filter( 'woocommerce_gallery_thumbnail_size', 'custom_woocommerce_gallery_thumbnail_size' );

function custom_woocommerce_gallery_thumbnail_size() {
return 'thumbnail';
}

This makes the theme use the "thumbnail" picture size for "woocommerce_gallery_thumbnail_size" - "thumbnail" being the default Wordpress thumbnail size set in Settings - Media.

This means I can tweak the thumbnail size larger myself there until it looks nice.

I'd be interested to see if this is specific to my browser/screen/shop or the same for all Woocommerce sites using this theme?

Interesting - thanks so much for reporting this.

GPP 1.8 will be centered around WooCommerce, so we'll absolutely look at applying this by default.

Hi guys, did you ever fix this, I have the exact same issue with thumbs showing as 100px. I tried the snippet from Vanessa but it did not work for me. However, if I use the following snippet it shows the images at 300px.

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 300,
'height' => 300,
'crop' => 0,
);
} );

The really strange thing is that it does not matter what image I set for width/height, it straight away displays images as 300px. If I regen thumbs, it will regen the new size if I set a custom size with the above.

When I test Storefront or 2022 theme, they both display thumbs at 150px, so looks like GP could be setting it somewhere? Any thoughts?

If I use the following snippet, I can use the "medium" image size set in the wordpress media settings, which is what I am doing for now.

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return 'medium';
} );

thanks

Hi Sam,

Please open a new topic for your question.

This topic is from 2018 so I'd assume it's not the theme issue.

Thanks!