Why does Masonry grid showing images in same size?

Hello,
I want to use masonry grid with my products. It works just fine when I load the page (please find the image 1.png in the attachment), but when I load more products, all newly loaded products are the same size (please find the image 2.png in the attachment). I would like them all to be in different size as expected in masonry grid.

Any suggestions?

Thank you in advance,

Amela

Sorry,
images are 1.jpg and 2.jpg

Attachments:

You must be logged in to view attached files.

Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :)

I saw the screenshots you attached and visited your website.

It seems that you have enabled the crop to 1:1 from Appearance >> Customize >> Woocommerce >> Product Images. That’s why they are displayed equally. Please try setting the crop to no crop from there.

Screenshot for Clarification: https://ibb.co/vkCy0gJ

Regards.
Xtemos Studio.

Hi there,

I have changed the crop option as you suggested but still have the same problem. First 18 products have different size, and the rest is the same (small) size. I have 100 products in total.

Amela

Hello,

I saw the screenshot you attached.

Please deactivate all the third-party plugins and activate the parent theme. Clear cache and check back.

If the problem continues then leave the third party plugins deactivated and provide admin panel login details of the website to check it myself and help you out accordingly.

Regards.
Xtemos Studio.

This did not solve the problem. I am sending you access so you can check it out. If you manage to solve this problem, please explain it to me since this is development domain, and I will need to do the same on production site.

Thank you in advance,

Amela

Hello,

I have logged into your website.

The masonry grid works when you have different heights of the product images. But the height of products images on your website seems to be the same.

Please try adding the images of different heights and then clear cache and check back.

Regard’s.
Xtemos Studio.

Hello Aizaz,

This also didn’t solve my problem. Please find image in the attachment. While inspecting, I noticed that in your demo https://woodmart.xtemos.com/shop-masonry/ you have only 18 products, and they all have the same ratio. On my site, the first 18 products (with same ratio and height) are working just fine and the height is not the issue.

Best regards,

Amela

Attachments:

You must be logged in to view attached files.

Hello,

The masonry is working the same like on your site. You can more read about masonry layout here in the theme documentation:

https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards.

[Author]

Posts