Woocommerce Issue - After using a designer the image preview is cropped

[daleygraphics]

After using a woocommerce product designer, the designer populates the first product image with the new customised one. The problem is that the product previews generated aren’t square, so they become cropped in the product page. If I drag the edge of the browser it then becomes un-cropped and displayed properly. Is there a way to stop this happening?

EG. If you go to here https://printmyidea.co.uk/product/a5-greetings-cards-envelopes-add-3-photos/
Click customise then click done. When you go back to the product page the preview is cropped. Drag the edge of the browser window and it then displays properly.

[rad]

Hi @daleygraphics,

Thanks for reaching out.

Looks like it’s related to 3rd party plugin called Fancy Product Designer, unfortunately, I can’t provide or cover this issue since it’s not something we made. I recommend contacting the plugin author for this issue.

Thanks!

[daleygraphics]

Thanks for the reply. Although it is after using a 3rd party plugin, the issue is still with how the theme reacts responsively when a new product image appears. If you drag the window you can see it then reacts responsively

[ruenel]

Hello @DaleyGraphics,

When you hover and drag the single product image, you will be seeing a zoomed in version of the image. This is one of the new features of the WooCommerce introduced in 3.0. Please check out this thread that talks about resizing the images: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

And if you want to disable this new features, you might want to check out this thread: https://theme.co/apex/forum/t/cropped-pictures-in-the-woocommerce-product-gallery/3420/2

Hope this helps.

[daleygraphics]

Thanks for the reply

When I mention clicking and dragging what I meant was the browser window itself. Would you mind having a look at the link in my first post and trying so you can see the issue?

Many thanks

[ruenel]

Hello @DaleyGraphics,

You mean the width and height of the single product image changes? I am seeing a square image in my browser screen.

Please provide a screenshot so that we have an idea of how it looks like in your end.

Thanks.

[daleygraphics]

Yes - if you click on customise then click done. The image is updated with your design. The problem is the image stays square so it crops the design. If you then drag the browser window it resizes the image to be the correct dimensions. See my screenshot. Thanks

[rad]

Hi @daleygraphics,

It still 3rd party related since it needs to trigger the resize to re-render the view after clicking done. Please note that responsiveness can be related to CSS or Javascript, and when it comes to javascript, it has to be triggered for every change made.

And there is no way for the theme to predict every 3rd party plugins changes just to trigger the design’s redraw/render.

Please try contacting the plugin author, the idea is when done button is hit, it will call the jQuery(window).resize() function to initiate other scripts responsible for responsive layout. And that responsive layout of images isn’t coming from the theme, its from Woocommerce library and gallery feature (which runs in javascript).

Thanks!