One product image is a different height than the rest

  • Dragonstorm
    March 24, 2026 at 5:52 am

    Hello GeneratePress team,

    I recently added a product to my woocommerce store, however the thumbnail or its container is a different height from all the other products.

    I’ve not been able to narrow down where the issue is coming from in the Inspect panel. Any ideas?

    Thanks very much in advance!

    Val

  • George
    March 24, 2026 at 6:09 am

    Hi Val,

    The issue is that the “Tethers Torn” image has different dimensions from the other three. It’s 422×651, while the others are 500×667 — a different aspect ratio. When WooCommerce scales them to the same width, the height difference follows.

    Two options:

    1. Re-crop the source image to match the same aspect ratio as the others (3:4 / 500×667) and re-upload it. This is the cleanest fix.
    2. Force a uniform aspect ratio via CSS on the image containers. Something like:
    .wc-product-image .inside-wc-product-image img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

    This would crop all product thumbnails to 3:4 regardless of the source image dimensions.

    Option 1 is preferable since it avoids any cropping artifacts.

  • Dragonstorm
    March 24, 2026 at 6:19 am

    Hey George,

    I didn’t realize it was smaller than the rest and uploaded a larger image. The global 3:4 thumbnail crop then fixed it down to the right size. Thanks so much!!

  • George
    March 24, 2026 at 7:21 am

    Ok, no problem!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.