What is the hook to change the product gallery image size from 300*300 to actual image?

Question

I am learning Woocommerce. I am on single product page and I am getting issue in product image.

My image size is 1000*1000 but I am getting 300*300.

but when I hover on image then zoom is working perfectly and it's going end to end.

What hook I have to use to display the actual image for the product in single page gallery slider?

I tied below code but still I am not getting full image.

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

Answer 1

Here’s an example of how you can override the woocommerce-single image:

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

In this example, we’re setting the width to 400, the height to “automatic”, and we are not cropping the image by default.

If you wanted to set the image to a specific size and crop it to fit, you would do this:

<?php

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

This snippet will change the woocommerce_thumbnail image to 500 x 500 pixels and crop the image.

<?php

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

The snippet above will make the single product gallery images 400 x 400 pixels.

<?php
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array(
        'width'  => 400,
        'height' => 400,
        'crop'   => 1,
    );
} );