Reply To: disproportionate pictures

problem solved
I used this code

.woocommerce ul.products li.product .woocommerce-LoopProduct-link > :not(:first-child) {
margin-top: 0;
}

.product-grid-item{
background:#fff;
border-radius:5px;
margin:10px;
box-shadow:0 0 5px rgba(0,0,0,0.1);
padding-bottom:15px;
padding-top:15px;
}
.product-image-link{
position: relative;
padding-top: 100%;
overflow: hidden;
border:1px solid #eee;
}
.product-grid-item .hover-img img, .product-grid-item .product-image-link img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
max-width: 100%;
max-height: 100%;
object-fit:contain;
}
.woodmart-tab-content .product-grid-item.col-md-3{
flex: 0 1 calc(20% – 20px);
}
.product-grid-item.col-md-3{
flex: 0 1 calc(25% – 20px);
}
.product-grid-item.col-md-4{
flex: 0 1 calc(33% – 20px);
}

@media (max-width:600px){
.product-grid-item.col-md-4,
.woodmart-tab-content .product-grid-item.col-md-3,
.product-grid-item.col-md-3{
flex: 0 1 calc(50% – 20px);
}
}