Something is wrong with the product grid layout

Hi! This morning something went wrong with the layout of product grids. Almost all shop products are dislocated and are not in one row/column aligned. Why so and how to fix this?

CSS codes I have used with help of your team:

.woocommerce-product-gallery img {
max-height: 600px;
width: auto;
display: block;
margin: auto;
}

.product-images-inner{
max-height: 600px;
width: auto;
}

.product-grid-item .product-image-link img, .product-grid-item .hover-img img {
width: auto !important;
height: 200px;
object-fit: contain;
}

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience, can you please share valid WP-ADMIN Login details of your Site in the below listed format on which you are facing the issue so that we can proceed further and check the issue on your Site and assist you accordingly.

WP-ADMIN URL:
WP-ADMIN USERNAME:
WP-ADMIN PASSWORD:

Best Regards

Thank you. See access info in private content tab.

Hello,

Sorry for the earlier inconvenience.

Firstly, the WoodMart Core plugin wasn’t updated to the latest version on your Site which we have updated now.

Regarding the Product Images concern, we have now removed the earlier replied CSS and rectified it with a simpler one, now the Product Images are appearing fine on your Site: https://ibb.co/g3yG7TN
Some of the Product Images on your Site are oddly sized, so we have applied the following Custom CSS to adjust them:

.product-grid-item .product-image-link img {
    object-fit: cover !important;
    height: 25em !important;
    width: 15em !important;
}

Location to find Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> there you can find the CSS pasted.

Best Regards

Hi!
Thank you however I see that still product grids look odd, for example:

https://darzastudija.lv/kategorija/augsnes-substrati/substrati/
https://darzastudija.lv/kategorija/augu-aizsardziba/

Hello,

Actually, the thing is the Product Images on your Site are way too oddly sized which is why this issue is happening.

Basically the Product and Categories images are controlled by WooCommerce and our Theme doesn’t influence this. WooCommerce allows some settings that you can find under the Dashboard >> Appearance >> Customize >> WooCommerce >> Product Images (but it only provides the option to adjust Width not Height).

The other way possible in this regard was to adjust them with CSS, which might and might not look good. So, we have provided you that earlier. But your Product Images are originally not of the same dimension.

Best Regards

Everything was ok with the product grid and pictures before few days for months. I used the CSS codes I sent you earlier and all was good. Then suddenly one day all products are dislocated. I guess after update. Why there are gaps between products in rows? https://darzastudija.lv/kategorija/augu-aizsardziba/ and why pictures are cropped now? Could you please help to solve the problem till end? Please see pictures how previously product grid looked (found some old photos)

Attachments:

You must be logged in to view attached files.

Hello,

Regarding your mentioned concern, please check out the following Video to get better idea: https://www.veed.io/view/b0db1860-405f-48b4-b639-f0ca82f4b9be

Best Regards.

Hi! Please precise how to make all rows look equal? https://ibb.co/0MxFNTZ In some rows I have 5 products and in some 3 products although I marked that I need 6 pec row. It looks super odd and not good.

Hello,

Sorry for the inconvenience but the thing is the same that we mentioned you earlier in our Video too that some of the Product Images on your Site are way too much in Size. For example, one Product Image on your Site is 2000×2000 which is why this odd gap that you are seeing is arising. There isn’t any issue at the Theme-end in this regard. The options are working correctly in the way they are selected, in fact the Product even Grid option is also enabled but due to that extensive Product Image sizes that option is being compromised with the Image size.

So, we would suggest you to upload resized Images for those specific Large Images and then check back your Site, you won’t have any issues further in this regard.

Like as an example, you can check out one of the Category Pages from our Test Site: https://blackpearlspro.com/woodmart_support/product-category/cases/

Here you will see all Product Images are of standard Product Image dimension and they are appearing fine.

Hope you can understand this !

Best Regards

ok, clear. Thank you

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts