Archived topic

Woocommerce product image(s)

6 replies · Started by Marin on January 18, 2020

Viewing posts 1–7 of 7

January 18, 2020 at 2:45 am #1135815

Is there any way to make next:
1. have fixed thumbnail sizes with uncropped images? (for example 150x150, scaled, uncropped image)
2. have fixed size of main gallery image container? In case we have "tall" picture, it will be contained within some fixed size.

January 18, 2020 at 9:59 am #1136243

Hi there,

1. You would have to upload an image that is that size already. If not that size, it would need to be perfectly square and sized down with CSS. So if your image is 300x300, you can size it down to 150x150 with CSS.

2. Not too sure what you mean here - do you have any examples?

January 22, 2020 at 11:59 am #1140660

Please see photo here: https://ibb.co/23kHg5g

Is it possible to have red area fixed? For example 600x600px, and have images shown there contained but uncropped?

January 22, 2020 at 4:20 pm #1140816

Hmm, I'm not sure if it's possible without cropping the image. I'll ping David (he's a wizard with CSS). If it's possible, he should know.

January 23, 2020 at 3:27 am #1141191

Hi there,

give this CSS a shot:

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    display: flex;
    align-items: center;
}

.woocommerce .flex-viewport {
    height: 100% !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    overflow: visible !important;
}

January 23, 2020 at 3:54 am #1141215

Wow!! Works like a charm :) THANKS!!!

January 23, 2020 at 10:19 am #1141754

You're welcome

This archived topic is closed to new replies.

Start building better websites today.