Auto Crop Setting of Main Image

Try this - but first i would suggest moving the site to staging site and performing this as this will require regenerating thumbnails to convert the woo images.

1. Add this PHP function to your sites:

add_filter( 'woocommerce_get_image_size_single', 'woo_cropped_single_product_image' );
add_filter( 'woocommerce_get_image_size_shop_single', 'woo_cropped_single_product_image' );
add_filter( 'woocommerce_get_image_size_woocommerce_single', 'woo_cropped_single_product_image' );
function woo_cropped_single_product_image()
{
    $size = array(
        'width'  => 600,
        'height' => 600,
        'crop'   => 1,
    );
    return $size;
}

Adjust the width and height of 600 to match whatever size you have set in Customizer > Woocommerce.

This doc explains adding PHP: https://docs.generatepress.com/article/adding-php/

2. Test to see if works by uploading a new large landscape image to a product. View the product - if its cropped then we're good to go.

3. If you have lots of images that need fixing then now run the Regenerate Thumbnails plugin:

https://en-gb.wordpress.org/plugins/regenerate-thumbnails/

Hi David,

This is great, thank you. The image is now viewable in a cropped, square area, but the actual image seems to be the same size, so when you hoover and use the zoom function, you ca still pan on all the white space to the left and right sides of the image.

Ideally, the actual image would be cropped equally on both sides too.

You can see what I mean on the same link as before.

Thanks,
Helen

https://www.watsonwolfe.com/shop/vegan-belts/cork-belt-in-black/

Link above David.

I am trying to think if this even really matters. What is your user experience like for this first image now?

Helen

Hi Helen,

Woo uses the Full size image for the zoom panel by default.
You could try adding this to crop that two - this time to a larger image size:

add_filter( 'woocommerce_gallery_full_size', 'woo_cropped_single_product_zoom_image' );
function woo_cropped_single_product_zoom_image()
{
    $size = array(
        'width'  => 1200,
        'height' => 1200,
        'crop'   => 1,
    );
    return $size;
}

I have added the new section of php under the first and the zoom function doesn't seem to be working at all now for some reason....

https://www.watsonwolfe.com/shop/vegan-belts/cork-belt-in-black/

H

Did you regenerate the thumbnails ?

Hi David,

Yes I have, but there is an error on there somewhere.

Helen

Hi there,

The zoom seems to be working for me - can you check again?

Hi guys,

I have added this code and the images on single product pages looks great, but this is not working for mobile images. There are showing off to the right hand side.

add_filter( 'woocommerce_get_image_size_single', 'woo_cropped_single_product_image' );
add_filter( 'woocommerce_get_image_size_shop_single', 'woo_cropped_single_product_image' );
add_filter( 'woocommerce_get_image_size_woocommerce_single', 'woo_cropped_single_product_image' );
function woo_cropped_single_product_image()
{
$size = array(
'width' => 600,
'height' => 600,
'crop' => 1,
);
return $size;
}

Can you assist with any adjustment in this code to help centre and apply cropping for mobile?

Thanks,
Helen

Hi there,

I'm not sure I'm seeing the issue on my end - can you show us a screenshot maybe?