[Resolved] WooCommerce product image dimensions

Home Forums Support WooCommerce product image dimensions

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1314661
    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!

    #1315223
    David
    Staff
    Customer Support

    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.

    #1316302
    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.

    #1317066
    Tom
    Lead Developer
    Lead Developer

    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.

    #1319974
    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/

    #1320270
    David
    Staff
    Customer Support

    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

    #1320587
    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/

    #1320629
    David
    Staff
    Customer Support

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

    #1320647
    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?

    #1321331
    Tom
    Lead Developer
    Lead Developer

    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.

    #1321459
    Raul

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

    #1322430
    Tom
    Lead Developer
    Lead Developer
    #1485555
    Raul

    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!

    #1486648
    David
    Staff
    Customer Support

    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?

    #1487573
    Raul

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.