[Support request] WooCommerce Product – Image Gallery does not align with main image

Home Forums Support [Support request] WooCommerce Product – Image Gallery does not align with main image

Home Forums Support WooCommerce Product – Image Gallery does not align with main image

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1105669
    pairfum

    Dear Support,

    We have recently noticed that the WooCommerce Product image gallery does no longer display at the same width as the main / featured image.

    Here is an example:
    https://www.pairfum.com/product/pink-rose-sensuous-musk-eau-de-parfum/
    You will notice there are 4 x column of images in the gallery below the main image and there is gap where the 5th column of images should be.

    We can’t figure out where this anomaly comes from and believe that it might be related to GeneratePress.

    Can you help?

    We would like one of the following solutions:
    – a 4 x column gallery that becomes as wide as the featured image, or
    – a 5 x column gallery, or
    – any other suggestion you may have.

    Many thanks for your help.

    Kind regards,

    Pairfum London
    https://www.pairfum.com

    #1105692
    pairfum

    Dear Support,

    We have a 2nd wordpress installation on our domain, that we use for a different purpose.

    Here we also use GeneratePress and we customise it using the ‘Code Snippets’ plugin that you recommend. Even when the ‘code snippets’ are de-activated the issue persists. You can see an example here:
    https://market.pairfum.com/product/large-reed-diffuser-bell-shape-bergamot-white-tea/

    When we switch themes, e.g. from GeneratePress to Storefront, the issue disappears.

    Here are a few examples across different types of products:
    – simple product: https://www.pairfum.com/product/sea-salt-sage-amber-eau-de-parfum/
    – simple product: https://www.pairfum.com/product/new-diffuser-refill-reeds-large-long-diffuser-sticks/– variable product: https://www.pairfum.com/product/reed-diffuser-bell-large/
    – variable product: https://www.pairfum.com/product/reed-diffuser-refill/
    – grouped product: https://www.pairfum.com/product/eau-de-parfum-intense/
    – bundled product: https://www.pairfum.com/product/natural-reed-diffuser-set-oil-refill-sticks/

    In other words, the issue is systematic across different product types.

    It definitely is a theme related issue that appears to be independant from any CSS / PHP customisations but I suspect is it probably is linked to some settings we have chosen within GeneratePress but we don’t understand which.

    Many thanks for your help.

    Pairfum London

    #1105743
    David
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 20% !important;
        max-width: 100% !important;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li:nth-child(5n) {
        padding-right: 0 !important;
    }

    The issue arose after Woo changed its gallery thumbs to 100px ( down from 150px ).

    #1105893
    pairfum

    Hi David,

    Many thanks for your help & explanation.

    I will try the CSS code but I am always a little reluctant with these workarounds, as they can break the site in future.

    Instead of the CSS code, would adjusting the width of the display for WooCom Products within the GP Customizer make a difference?

    Many thanks for your help.

    Kind regards,

    Pairfum London

    #1105970
    David
    Staff
    Customer Support

    You could reduce the Product Image Area Width in the Customizer … however it would not be responsive so on some tablet devices where the gallery occupies the width of the screen you would still see the problem.

    The code i provided is pretty bullet proof, even if Woo changed the image size again for example, it would still force a 5 column display.

    #1106006
    pairfum

    Hi David,

    Many thanks for the explanation & help.

    I am glad it is bullet proof solution.

    We have implemented the CSS code on our site and it works very well, exactly as you say.

    Many thanks for your help on this.

    With kind regards,

    Pairfum London

    #1106080
    David
    Staff
    Customer Support

    You’re welcome

    #1106111
    pairfum

    Sorry David,

    Unfortunately, we are having to re-open this issue, as we just noticed a small error in the display of the thumbnails in the gallery.

    When you look at a product listing, you will notice that the images in the furthest right column of the gallery are slightly bigger:
    https://www.pairfum.com/product/pink-rose-sensuous-musk-eau-de-parfum/

    You notice is only on images with a dark or coloured background. Where there are images with a white background you don’t even see the difference.

    Can you tweak the CSS code to also to make all thumbnails the same size?

    The problem persists, if you check the listing on different screen sizes, i.e. it doesn’t matter whether it is a one or two layout.

    Many thanks for your help.

    Kind regards,

    Pairfum London

    #1106339
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS instead:

    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 20% !important;
        max-width: 100% !important;
        padding-left: 5px;
    }

    Let me know 🙂

    #1106570
    pairfum

    Hi Tom,

    Many thanks for the amended CSS snippet.

    It already looks much better.

    With this code, the images are all the same height & width, as you can see here:
    https://www.pairfum.com/product/pink-rose-sensuous-musk-eau-de-parfum/

    The are a couple of small things that I notice:
    – the image furthest right, is not aligned with the right edge of the main/featured image
    – the spaces between the images are all even but the column spaces are wider than the row spaces

    If there has to be a compromise somewhere, then we can live with the difference in the white space between the rows & columns, but I would be grateful, if the alignment issue on the right could be fixed.

    Many thanks for your help to solve this.

    Kind regards,

    Pairfum London

    #1106922
    David
    Staff
    Customer Support

    Sligtht tweak to Tom’s CSS:

    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px;
        margin-right: -5px;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 20% !important;
        max-width: 100% !important;
        padding-left: 5px;
    }

    Let us know

    #1106988
    pairfum

    Hi David,

    Many thanks for this amendment.

    It works really well.

    I made 2 x small changes (margin left 0px; padding left 0px) to equalise the width of the white space between the thumbnails.

    This is the CSS snippet we are using now on our site:

    .woocommerce div.product div.images .flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        margin-right: -5px;
    }
    
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 20% !important;
        max-width: 100% !important;
    }

    I have checked this across different product types and it works for all of them:

    – simple product: https://www.pairfum.com/product/sea-salt-sage-amber-eau-de-parfum/

    – simple product: https://www.pairfum.com/product/new-diffuser-refill-reeds-large-long-diffuser-sticks/

    – variable product: https://www.pairfum.com/product/reed-diffuser-bell-large/

    – variable product: https://www.pairfum.com/product/reed-diffuser-refill/

    – grouped product: https://www.pairfum.com/product/eau-de-parfum-intense/

    – bundled product: https://www.pairfum.com/product/natural-reed-diffuser-set-oil-refill-sticks/

    I have also checked that the gallery display remains consistent across different devices: mobile / tablet / desktop. All is working well.

    Many thanks to both of you for all your help to resolve this.

    Kind regards,

    Pairfum London

    #1107712
    David
    Staff
    Customer Support

    Glad we could be of help

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