Title: Product image resize
Last modified: August 22, 2016

---

# Product image resize

 *  [VCdev2015](https://wordpress.org/support/users/vcdev2015/)
 * (@vcdev2015)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/product-image-resize/)
 * Hello I’m having issues with my product images. If I set my product display settings
   in woocommerce to hard crop it cuts of parts of the image but the image box is
   the same size. However if I uncheck hard crop the images vary in height even 
   though I have resized the images to be the same height. I would like the product
   image box to be the same height for all product images. Here is the url [http://www.framesplusmore.com](http://www.framesplusmore.com)
   any help is greatly appreciated!
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [marvikand](https://wordpress.org/support/users/marvikand/)
 * (@marvikand)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/product-image-resize/#post-5866784)
 * 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?
 *  Thread Starter [VCdev2015](https://wordpress.org/support/users/vcdev2015/)
 * (@vcdev2015)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/product-image-resize/#post-5866843)
 * 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.
 *  [devilsaces](https://wordpress.org/support/users/devilsaces/)
 * (@devilsaces)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/product-image-resize/#post-5866859)
 * 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
 *  Thread Starter [VCdev2015](https://wordpress.org/support/users/vcdev2015/)
 * (@vcdev2015)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/product-image-resize/#post-5866882)
 * 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.
 *  [devilsaces](https://wordpress.org/support/users/devilsaces/)
 * (@devilsaces)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/product-image-resize/#post-5866894)
 * 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 }

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Product image resize’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)

 * 5 replies
 * 3 participants
 * Last reply from: [devilsaces](https://wordpress.org/support/users/devilsaces/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/product-image-resize/#post-5866894)
 * Status: not resolved