Woocommerce product gallery thumbnails cropped

[steveham]

Hey there, i’m unsure how to stop my product page gallery thumbnail images from hard cropping.
I see you can edit the thumbnails for your shop pages via -WordPress Dashboard > Appearance > Customize, but not how to change the thumbnails from an individual product gallery?

Cheers!

[thai]

Hi There,

Upon checking your website, I could see that you’ve setup a child theme.

To stop the thumbnail from hard cropping, we have to change the product thumbnail size bigger, please add this code under functions.php file locates in your child theme:

add_filter( 'woocommerce_gallery_thumbnail_size', 'x_change_product_thumbnail_size', 99 );
function x_change_product_thumbnail_size(){
	return array(99999, 99999);//width & height of thumbnail
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[steveham]

great thanks for that, i was struggling to find an answer!

In case anyone else is looking to alter the product page gallery, i ended up using some slightly different code to be able change the thumbnail sizes & gallery image sizes too.

// change woocommerce gallery image size 
add_filter( 'woocommerce_get_image_size_single', 'override_woocommerce_image_size_single' );
function override_woocommerce_image_size_single( $size ) {
    // Single product image size
    return array(
        'width'  => 1000,
        'height' => 800,
        'crop'   => 0,
    );
}

// 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'  => '',
        'height' => 150,
        'crop'   => 0,
    );
}

& changed the thumbnail size in my theme options css

.flex-control-nav.flex-control-thumbs img {
    height: 150px;
}

[ruenel]

Hey Steve,

Thanks for sharing this information. It is very detailed and informative for other users.
If you need anything else we can help you with, don’t hesitate to open another thread.

Regards.