Skip to main content

Make Thumbnail Images All The Same Size In The Product Loop

Introduction

Follow this step to make your Product Loop images all the same size.

Step 1: Add CSS

Use this CSS to make all your Thumbnail images in the Product Loop the same aspect ratio (size).

/* ALL DEVICES VIEW */
.woocommerce ul.products li.product .grid-item-cont .et_pb_db_shop_thumbnail img {
object-fit: cover;
height: 300px;
}
/* MOBILE VIEW ONLY */
@media only screen and (max-width: 768px) {
.woocommerce ul.products li.product .grid-item-cont .et_pb_db_shop_thumbnail img {
height: 200px;
}
}