WooCommerce product image dimensions

[Raul]

Hello,

I have a problem with the WooCommerce single product image size when using the vertical image gallery based on https://generatepress.com/forums/topic/woocommerce-product-gallery-vertical/

When images are horizontal, there is a fragment on the image that gets cut out on the right side.

By default vertical images are too tall for me, so I am using this code below to control the vertical size of the image. I wish there was a way of controlling the max-height for single product images in the theme Customize options.

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

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

Is this a good way of controlling the size of the image? I would prefer them to be aligned to the right, so the magnifier icon is displayed on top of the top right corner, but I can’t find a way of making it work.

Let me know, please.

Thank you!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Raul]

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/

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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/

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Raul]

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?

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Raul]

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

[Tom]

No problem!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts