Product image in the shop grid changing size when I select color

When I choose color for a product from my shop, the height of the thumbnail becomes bigger, even though both images are the same dimensions.

https://dungarees.com.pk/product-category/tees/

I want it to remain the same size like in the demo here: https://demo.xtemos.com/basel/shop/?shophover1

Hello,

Please provide the site admin access to the private area.

Best Regards

Here is the login

Hello,

Please provide the product URL with the problem. I am checking a few I cannot catch the problem.

Best Regards

The problem is not in the product page, but in the shop page. Go here: https://dungarees.com.pk/product-category/tees/

Look at all the thumbnails, they are all the same size. https://prnt.sc/t9ufit

Now select a color from any of the products. The thumbnail height of that product will increase. I have shown this height difference in the next screenshot after I clicked on the grey color for the first product: https://prnt.sc/t9ufqu

I don’t want this height difference to happen. All image dimensions I used are the same.

I have disabled all additional plugins and switched to parent theme. The problem is still there.

Hello,

Have a look at the screen: this is the main product thumbnail:https://prnt.sc/ta8s60

This is the variation image: https://prnt.sc/ta8tvx

Try to upload images of the same size and height and check again.

Best Regards

I am not sure why it’s showing the main product image as different dimensions because all images I uploaded are 740×1110. I just tried adding a new product with the same image sizes and the problem still happened. You can try it yourself by adding a new product and using all image sizes as 740×1110.

You can actually confirm this by going to the single product page and changing the color there. The preview image of both colors will show as the same size. Only in the shop page are they different.

Hello,

I cannot log in to your site, provide access with the admin rights, and deactivate the plugins not related to the theme. I will check again.

Best Regards

That’s strange. The credentials i provided are correct and I have not blocked any country from logging in. What error do you get?

Hello,

Your images are from other sources https://prnt.sc/taegse

When I try to find an image in your Media library I cannot find it.

Try to upload images to Media Library and then upload the image to the product and check.

Best Regards

Hi Elise,

All images used for that product can be found in the media library. See below screenshots.

https://prnt.sc/taew4m
https://prnt.sc/taewrn
https://prnt.sc/taex7s

I have not used images from external sources anywhere on my website.

Hello,

Please deactivate all the plugins not related to the theme as well as the must-use plugins and check. Some of the plugins influence.

Best Regards

Hi Elise,

I deactivated most plugins except the woocommerce one and the problem is still there. I am not sure how the plugins that come with the theme could interfere with the picture sizes, since it seems to be working fine in the basel demo. This is quite frustrating indeed.

Hello,

Please deactivate all the plugins not related to the theme, including must-use plugins for the checking.

Leave only these:

Contact Form 7
Mailchimp for WordPress
Recent Posts Widget Extended
Safe SVG
Slider Revolution
WooCommerce
WPBakery Page Builder
XTEMOS Post Types plugin

Best Regards

Hi Elise,

I had reactivated the plugins yesterday because I wanted to continue working on other aspects of my site. I have deactivated them again according to your instructions. The only extra plugin I have activated is the Bluehost plugin that connects my site to their hosting. I don’t think it should be a problem, or should I deactivate that too? You can peek around in the admin now. The problem is still there.

Hello,

Try to disable cropping image in Appearance > Customize > Woocommerce > Product images.

Best Regards

Well, that seems to have worked. But this solution is not ideal because I want the thumbnails to be cropped so they take less space. So it looks like the problem is that the crop setting isn’t being applied to the variant images. Any way I can force crop them? Maybe through css?

Hello,

We shall check deeper from our side this issue and get back to you soon.

Best Regards

[Author]

Posts