Search code examples
phpwordpresswoocommerceflexslider

WooCommerce: Change size of gallery thumbnail


I want to change the thumbnail size of the gallery thumbnail to max. 60x60px. Without cropping them.

I found the following hook in the WooCommerce docs:

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

But it seems that the crop parameter has no effect?! WordPress also ignores this size and shows always the 150x150px version from WordPress itself in the gallery navigation. Even after regenerating the thumbnail sizes with a plugin. The 60x60 version is on the server. But it's not used by WooCommerce and it is cropped.

I also use this code to add WooCommerce support to the theme:

function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce', array(
        'thumbnail_image_width'         => 240,
        'single_image_width'            => 450,
        'gallery_thumbnail_image_width' => 60,
    ) );
    add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

When I delete that, the WooCommerce thumbnails sizes get ignored completely.

Is there anything that I'm doing wrong? It works for other image sizes like these:

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

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

These images have max. width and heights and are not cropped. But the gallery thumbnails version is always cropped.


Solution

  • I found a solution and I guess it was the wrong name in the filter.

    The name I used (woocommerce_gallery_thumbnail_size) was copied from the docs but his seems to be the correct version: woocommerce_get_image_size_gallery_thumbnail

    Hin from here: https://theme.co/forum/t/woocommerce-product-gallery-thumbnails-cropped/47367/2

    This is their code:

    // change woocommerce thumbnail image size
    add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'override_woocommerce_image_size_gallery_thumbnail' );
    function override_woocommerce_image_size_gallery_thumbnail( $size ) {
        // Gallery thumbnails: proportional, max width 200px
        return array(
            'width'  => 60,
            'height' => 60,
            'crop'   => 0,
        );
    }
    

    Unfortunately the gallery slider navigation sill uses the 150x150 version of the image. But that was not the focus of this question.