Hi, looking at your site it seems like you have sorted your problem. I also have a problem with resizing images. Would you mind sharing how you fixed this?
marvikand,
Here is what I did that fixed the product images on home page/featured products. Under my theme I went into custom.css file and added this piece of code:
ul.products li.product img {
height: 300px;
width: 300px;
}
However I noticed that when I went to my product category pages the height and width was the same but the image was very distorted. So I still haven’t got the issue resolved.
This worked for me:
Under WooCommerce -> Settings -> Products -> Display:
Set Catalog Images 150 × 150 px Hard Crop? No
Single Product Image 300 × 300 px Hard Crop? No
Product Thumbnails 90 × 90 px Hard Crop? No
Might be unrelated but my actual image sizes are 520×800
Under Edit CSS (change height to desired size below and leave width on auto):
/*Shop page image size*/
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
width: auto;
height: 150px;
}
/*Cross-sell image size*/
.woocommerce .related ul li.product img, .woocommerce .related ul.products li.product img, .woocommerce .upsells.products ul li.product img, .woocommerce .upsells.products ul.products li.product img, .woocommerce-page .related ul li.product img, .woocommerce-page .related ul.products li.product img, .woocommerce-page .upsells.products ul li.product img, .woocommerce-page .upsells.products ul.products li.product img {
width: auto;
height: 150px;
}
Hope that helped
devilsaces that worked great and thanks! I have another question for you. I’m noticing that on the single product page my product images on there are distorted and I’m wondering what css I would use to make the height 300px no matter what size product image I initially upload. Also I’m wanting to make the height of the images the same size when I view the site from mobile device or tablet.
I’m not an expert on codding css. The way I figured out which css code to edit was going to the actual web page and right clicking the distorted image and select inspect element (using chrome). Code pops up on the bottom and for the image, the css is on the right. change values there can show if it fixes the problem. then use that new value.
For what I found on your site the width is set to 100%. It needs to be set as auto.
.images img {
width: 100%
}
Change to
.images img {
width: auto
}
