CODEWITHSUNDEEP
csswordpressimagewoocommerce
Dafydd Thomas
Dafydd Thomas

Reputation: 17

WooCommerce Product Images not Even

I've got a WooCommerce store and when viewing the all products / categories the image sizes cause everything to not be even.

I've used hard crop and regenerate thumbnails which worked to even it out, but it shaves off the left and right edges of the images. (Most of my images are landscape so this is not favourable.)

Is it possible to set the image placeholder size and then allow the image to 'fit' in the space without cropping the initial image? So that my landscape images have added 'whitespace' above and below it to make it square?

Upvotes: 1

Views: 2787

Answers (1)

Pelmered
Pelmered

Reputation: 2892

The easiest way to do this is by removing the hard crop option and then setting the maximum allowed dimensions in the settings. The rest you can do with HTML & CSS something like this:

.thumbnail_container {
    text-align: center;
    height: 100px;
    overflow: hidden;
}
.thumbnail_container img {
    display: block;
    max-height: 100px;
    width: auto;
}

This will center the image if it is too narrow to fit the thumbnail_container box and thus adding the white space you need. If you want borders or other styling on the image you should apply those styles on the thumbnail_container class and not on the image itself. The height of 100px should of course be changed to the (maximum) height you want on the image. If you also need to center the image vertically you need to add some more markup(HTML) and CSS.

Upvotes: 1

Related Questions