Product gallery image shifts up

Hi gang,

Leto theme and Wordpress up-to-date, but when clicking on an product image in the gallery of a product page (not main image, but second image), the image shifts up about 50 pixels or so and cuts off the top of the image.

It also appears to do this on your DEMO site for Leto, but because the image backgrounds are transparent (or match the page background color), it is hard to tell.

Please see my product page here: http://chickennuggetsco.com/product/the-positive-aspect/

And below I have marked up a screen capture to show what I am seeing.

Have found the same problem checking multiple browsers and mobile.

Thanks for help!
Jeremy

Hello Jeremy,

It looks like a WooCommerce plugin issue, you can try to select the Uncropped option in the Customize → WooCommerce → Product Images section, and see if it helps. Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hello Roman,

He doesn’t works for me.

Regards

Hi Roman,

I did have the Uncropped option selected, so that didn’t fix it. I rechecked your Leto Demo site and it does has the same glitch - gallery images are being hard cropped and shifted up. You have to look closely since your Demo products have clear/white background. Maybe this is only an issue for using a Child Theme? Good news is I found a bit of code on another forum (theme.co) that fixed it!

Added this to the bottom of my Leto Child theme’s funtions.php file:

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
}

That worked!

There was more code from the same forum post, to customize the product image gallery more:

// 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,
    );
}

And finally to change the image thumbnail size in Theme CSS:

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

Just adding the extra code snippets in case they help anyone else.

Keep up the good work.

Okay Jeremy, thank you for sharing that!

Kind Regards, Roman.
aThemes Support