[Resolved] GP & Elementor & Woocommerce – Product grid images not aligned

[Chris]

Hi,

I am loving GP with Elementor after spending far too long trying to pick the right builder and theme for my affiliate marketing project. GP and Elementor work easily and well!

I’ve hit a bit of problem though as I wish to add woocommerce products to display on the home page using Elementor’s woocommerce module, however, the products are not in row form at all. They’re randomly placed.

I have tried disabling as many plugins as possible, but still the product grid is too messy to be usable.

I use Prosociate to import Amazon products via the API . I’m just not sure where it’s going wrong.

Hopefully you can help me out!

Thanks

[Leo]

Hi there,

That’s because your product images all have different height so the thumbnails can’t be scaled to all be the same.

If we strict a height then they should all be the same:

.woocommerce ul.products li.product a img {
    height: 240px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

But as you see they aren’t scaled to ratio so the best solution is upload same size of product images.

[Chris]

Thanks for getting back to me so quickly and thanks for the reply.
This is interesting as I used a previous theme (Rehub) and it displayed wooocommerce images in correct sizes. I didn’t have to change or reformat images.I guess they found a way to ensure images presented correctly in image grids.

I’ll definitely try your recommendations. Thanks!

[Leo]

Sounds good let me know if it works out 🙂

[Chris]

OK, worked perfectly by doing as you said. I simply downloaded the image files on my server. Used GIMP to batch process resizing the images to 500×500. Uploaded them back into wordpress’s upload directory. Now they look great. Thanks!

[Leo]

No problem!

[Author]

Posts