How to Fix WooCommerce Products Image Size Issue
Before add CSS code change Product Image to Uncropped
- Go to Appearance >> Customize >> WooCommerce >> Product Images >> Select Uncropped.
After change this setting now add CSS Code
Note: If you are using WOODMART Theme then no need to change code otherwise change classes from your theme using inspect tool.
/* 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 prduct 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;
}
Note: Mostly free themes also not support complete CSS.