Woocommerce Product Page Gallery Image Size Issue

[frazbob]

The gallery images on my Woocommerce Product Page is sized too small (21px x 21px). Need to be at 100px x 100px. Don’t see where I can change it.

[Prasant]

Hello @frazbob,

Thanks for asking.

You can adjust image size from Appearance > Customize > WooCommerce > Product images. You can get more information on following page.

WC 3.3 Image size improvements

Thanks.

[frazbob]

The problem is with the gallery images on the single product page which shows below the main image. I can not change it from Customizer. Please go to: http://theint.staging.wpengine.com/product/classic-cut-full/ to see the problem.

[ruenel]

Hello There,

This is because it is displaying the product gallery slider. If you want a bigger thumbnails, we need to disable the product gallery feature and use the default single product image. In relation to this, you can check out this thread: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

To resolve your issue, I would suggest that you install a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After the child theme is set up, please add the following code in your child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

This code will fix your single product thumbnal issue. Please let us know if this works out for you.

[frazbob]

Great, is there a way to use the gallery slider and get the images larger than 21px?

[ruenel]

Hello There,

Do you want something like this instead?

You can make use of this code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img {
    height: 80px;
}

Feel free to adjust the height and leave the width out of it because it is set as auto. Having to set the width would get the image squeezed or distorted.

We would loved to know if this has work for you. Thank you.