css code to stop cropping but limit height on thumbnails

Hello @karenelated,

Thank you for reaching out!

I took a quick tour in your website and didn’t notice any cropped images. Is this happening to a specific product?

As for the tall images, the simplest solution is to scale them down by 25%.

To do this, simply add the following CSS code in Appearance > Customize > Additional CSS:

.woocommerce div.product div.images img{ 

scale: 75%;

}

Look forward to hearing back from you.

Hi Saif

Thanks for reviewing the site.

If you look at this merchant’s products, 99% of them are cropped and some are not center aligned.
https://elatedvegan.health/shop/?filter_merchant=vitacost&query_type_merchant=or

Here is another merchant with correctly formatted images where you can see the whole products.
https://elatedvegan.health/shop/?filter_merchant=macrolife-naturals-inc&query_type_merchant=or

But I guess the most important factor is to have them center aligned as this is very obvious on mobile.

Could WooCommerce not make that a standard setting, that products are center aligned in the block?

If you know code that will work that’d be great, but I’ve tried many variations of code to center align them and none of it works.

Regards

Karen

Thank you for sharing the links!

The easiest solution I can think of is just reducing the image height. As for the images aligning to the left on mobile, this is because of the fixed height value.

Try this:

.woocommerce ul.products li.product a img {
  object-fit: contain !important;
  height: 90% !important;
}

.primary .attachment-woocommerce_thumbnail.size-woocommerce_thumbnail{
  height: auto !important;
}

Here’s a quick screencast to show the before and after: https://d.pr/v/R9bl0x

If you need to customize this further, it would be better to contact your theme author directly. ??

Let us know if you have any other questions!

Hi Saif

Thanks for taking the time. Unfortunately that doesn’t work. You actually chose to use the product images from the merchants that do provide square images with aspect ratio 1:1, so while the margins improved for those products, the products that are causing the issue with all different aspect ratios like 1:2 cannot have auto height.

This is why: https://www.loom.com/share/d7329fcdf3124d6d8adc214679c520e0?sid=2f2f27ef-97f3-4322-aad0-ada7f8c07245

The developers already added object fit code to the fixed height so it should have fixed the issue. When you removed the fixed height from the code the image didn’t fit the container, rather, the container got bigger to fit the image and it’s even more apparent that the image aspect ratios are not the same because they are all different sizes now.

So, the container needs to stay at 240px and the image needs to fit that container, so some images will be 90% and some need to be much more because their aspect ratio is not square.

Thanks

Karen

Hi Saif

I fixed it!

https://www.loom.com/share/87d10989e4474e299cb8daf62031052f?sid=e5abee61-b03f-4aa0-ae6b-2db4ad353329

.primary .attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
width: auto !important;
max-width: 240px;
margin: 0 auto !important;
object-fit: contain !important;
display: block;
}

.woocommerce ul.products li.product a img {
width: auto;
height: 270px;
object-fit: contain;
}

thanks for your help!

Karen

• This reply was modified 1 year, 6 months ago by karenelated.
• This reply was modified 1 year, 6 months ago by karenelated.
• This reply was modified 1 year, 6 months ago by karenelated.
• This reply was modified 1 year, 6 months ago by karenelated.

still not centered, but I give up on that.

Hi @karenelated

I’ve taken a look at your site and noticed that you’re using the Astra theme. My suggestion would be to reach out to them directly, as they’re the experts when it comes to styling using their theme.

Since you’re satisfied with the current style, I will mark this thread as resolved for now.

Feel free to create a new topic if you need further help with WooCommerce core.

Thanks!