- This topic has 12 replies, 3 voices, and was last updated 4 years, 3 months ago by David.
-
AuthorPosts
-
December 16, 2019 at 4:50 am #1105669pairfum
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.comDecember 16, 2019 at 5:29 am #1105692pairfumDear 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
December 16, 2019 at 6:44 am #1105743DavidStaffCustomer SupportHi 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 ).
December 16, 2019 at 6:57 am #1105893pairfumHi 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
December 16, 2019 at 8:07 am #1105970DavidStaffCustomer SupportYou 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.
December 16, 2019 at 8:42 am #1106006pairfumHi 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
December 16, 2019 at 10:12 am #1106080DavidStaffCustomer SupportYou’re welcome
December 16, 2019 at 10:44 am #1106111pairfumSorry 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
December 16, 2019 at 6:07 pm #1106339TomLead DeveloperLead DeveloperHi 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 🙂
December 17, 2019 at 2:48 am #1106570pairfumHi 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 spacesIf 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
December 17, 2019 at 7:28 am #1106922DavidStaffCustomer SupportSligtht 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
December 17, 2019 at 8:19 am #1106988pairfumHi 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
December 18, 2019 at 6:34 am #1107712DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.