How to Fix WooCommerce Products Image Size Issue

Here’s the step-by-step process for fixing the product image size in WooCommerce, including the required CSS code:

1. Change Product Image to Uncropped:
   • Go to Appearance > Customize.
   • Navigate to WooCommerce > Product Images.
   • Select Uncropped for the image settings.
2. Add CSS Code: Once the image setting is changed to uncropped, you can now add the following CSS code. This code will apply the changes to the product image size.

/* Product image size fix (Paste In Global CSS WoodMart Theme) */

.product-grid-item .product-image-link img, .product-grid-item .hover-img img {
    width: auto !important;
    height: 200px; /* Height of grid or slider product image */
    display: block;
    margin: auto;
}
.product-images-inner {
    height: 500px; /* Height of single product box */
}
.woocommerce-product-gallery__image img {
    height: 450px; /* Height of single product active image */
    width: auto;
    display: block;
    margin: auto;
}
.slick-slide img {
    height: 150px; /* Height of single product side image */
    width: auto;
    margin: auto;
}

/* Single Product Side padding (Paste In Mobile CSS In WoodMart Theme) */
.single-product .main-page-wrapper {
    padding-left: 0px;
    padding-right: 0px;
}

.woocommerce-product-attributes-item__value {
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
}

.product-images-inner {
    height: 450px;
    overflow: hidden;
}

Additional Notes:

• If you are using the WOODMART theme, the CSS code above should work without any further modification.
• For other themes, you may need to inspect and modify the theme’s classes to match the ones used in your specific theme.
• Free themes might not fully support all CSS functionalities, and some adjustments might be necessary.