Woocommerce Product Image Sizes

What size should they be?

I’m not sure I guess it depends on a persons screen size. I just want them to look sized correctly for everyone.

So they should all be the same size or something?

Well first I want the full image to be displayed and not a cropped version of it.

They don’t all have to be the same size.

It just looks really unprofessional when they get blown up to crazy sizes and pixelated. Like this one https://printdat.pcriot.com/wp/?product=summer-panel-by-warren-kimble

On my screen 1680×1050 huge monitor that one looks huge and pixelated.

Oh I was looking at the wrong page.

You’re using a WooCommerce template, right?

yes vantage theme is woocommerce compatible.

Well first I want the full image to be displayed and not a cropped version of it.

Are you sure this isn’t something you can control in WooCommerce? The code indicates you can.

In the woocommerce settings they have a section for “Product Image Sizes”

They have check boxes that say “Hard Crop?”. I turned all these off and the product images still get cropped.

Is it the themes CSS?

Sort of. Your theme’s CSS is stretching the image like so https://printdat.pcriot.com/wp/?product=summer-panel-by-warren-kimble

But your WooCommerce template is loading a tiny file to begin with: https://printdat.pcriot.com/wp/wp-content/uploads/2014/03/summerpanelbywarrenkimble-110×300.jpg

If you click on the product image you will notice it brings up the full image in lightbox/fancybox. Without the resizing from the theme it looks so much better because it isn’t cropped or resized.

How can I change the CSS of the theme to stop stretching the images and just show the full regular size image? Would this be the best solution? I don’t mind if the file is tiny.

..or would that be a bad idea for people with small screens or mobile phones/tablets? Maybe some images would be too big for some screens?

Without the resizing from the theme it looks so much better because it isn’t cropped or resized.

Okay you can disable the CSS causing it to resize by going to your “Edit CSS” Jetpack option and adding this:

.woocommerce div.product div.images img,
.woocommerce #content div.product div.images img,
.woocommerce-page div.product div.images img,
.woocommerce-page #content div.product div.images img {
 width: auto;
}

Thank you so much for the help! I’m gonna copy in that code to fix it soon.

Yay! That worked, thank so much. Now what should I do to stop the images from being cropped?

I turned off the “hard crop” option in woocommerce. Maybe this is a feature of wordpress that is cropping the images? or the them CSS cropping the image?

See how this image is cropped too much and you cant see the text in the image. https://printdat.pcriot.com/wp/?product=attack-of-the-50-ft-woman

But, if you click the image to load it into fancybox it shows the full image without the crop.

I found an answer but I don’t know what to edit.

After doing extensive research about the cropping issue, I have found that this is actually a WordPress issue (vs a plugin or a template).

The WP coding must be edited – in the file:
/wp-includes/media.php (around line 330 – look for $crop)

All of the “Hard Crop” checkboxes are affected by this section, as well as newly generated ‘cropped’ files.