WooCommerce product image dimensions

Hi there,

It looks ok to me :)
To align the images to the side adjust your auto margins in this CSS:

/*Control image height*/
.woocommerce div.product div.images img {
    max-height: 700px;
    width: auto;
    margin: 0 auto;
}

For example: margin: 0 0 0 auto; would force the image to right hand side.

Thanks David,

I tried that option before but the image is cut even more on the right. Please take a look (you can see the full image with the magnifier to compare).

To correct it, I added

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    margin: 0 -60px;
}

and works well when the image gallery exists, but if there is only one featured image and no extra gallery, the single featured image appears aligned all the way to the left.

I didn't find a way of differentiating classes when the gallery exist and not.

Let me know if you find any solution, please.

Hi there,

Can you link us to a product without a gallery? Might be possible to change the CSS a bit if they provide the necessary classes.

Hi!

Sure, most products don't have gallery, here is one example:
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/la-chaux-de-fonds/

Products with a gallery have the flex-viewport so you can use this CSS selector to target them:

.woocommerce div.product div.images .flex-viewport img

Thanks David,

I was able to make it work, but I feel vertical images look better when they are aligned to the center of the available space. Is it possible to make that happen and move the magnifier icon as well so it has always the same margin from the top right o the image?

http://35.232.201.230/~suzanne2/tdp/obra-de-arte/sin-titulo-249/

Unless those products are in a specific category or have a specific tag - there is no way to identify a portrait/vertical image.

OK, I didn't mean to have styles based on orientation, but to center all images and get the magnifier repositioned so it is always aligned to the top right.

Product feature images are now aligned to the center:
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/sin-titulo-249/
http://35.232.201.230/~suzanne2/tdp/obra-de-arte/urbana-ano-1989/

But the icon is always floating on the right.

Any suggestion?

As of right now, the images are always centered in the WooCommerce image container.

It's not possible to tell the icon to position itself on the image itself, unfortunately.

Oh, good to know. Thanks guys for your help and excellent support.

No problem!

Hello guys,

I am still having some issues with this topic. On single product, when using Chrome and Safari, I see the product featured image and part of the 1st pic in image gallery. If I resize the window it works fine, otherwise I always see part of a second image.

Do you mind taking a look to the URL below?

Thanks a lot!

Hmmm.... not sure how to get around that - I assume the issue goes away if you remove the CSS that is changing the layout of the Carousel/Lightbox?

Hey David!

Yes, it works fine without my CSS. The gallery gets move to the default horizontal layout.
I will give it another try to see if I can find the problem.