Question 205240 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to fit different size images to "box" in Woocommerce single product page image slider

I stumbled upon one problem with WooCommerce single product page image sizes.
Product images are not the same size, that’s why some of them crops.

I added this css trying to fix this:

.woocommerce.single-product #content div.product div.images, .woocommerce.single-product div.product div.images, .woocommerce-page.single-product #content div.product div.images, .woocommerce-page.single-product div.product div.images {
    min-height: 500px;
    min-width: 650px;
    max-height: 500px;
    max-width: 650px;
    }

 div.woocommerce-product-gallery__image.flex-active-slide{
height: 400px;
object-fit: cover;
}

It puts the location and size of the photos slider and the active photo where I want them to be, but when I go through the photos, some of the photos get cropped. I need all the photos to fit to height (400px). The width should be automatically set so that the image is fully visible at 400px height. Maybe someone knows how to do it?

Using WordPress + Elementor + Shoptimizer theme

Link to single product page: https://bonideco.com/product/lawa-design-modernus-laikrodis-delta-azuolo-spalvos-su-juodomis-rodyklemis/

Thanks a lot!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After many hours of research I finally found the code that meet my needs.

    .woocommerce div.product div.images a img {
height: 400px;
object-fit: contain;
object-position: top;
}

  2. 0

    Enter in custom CSS:

    .woocommerce div.images a img {
height: 400px! important;
object-fit: contain ;
object-position: top;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search