Archived topic
Gallery images in Woo are messed up
9 replies · Started by Nick on April 6, 2018
When I add images to my Product Gallery they don't display properly. It merges them together side by side, they are greyed out, the main image gets forced into the gallery. It's a mess. Can you help me sort this out? I'd also like to get rid of the magnifying effect as well. Thanks.
Hi there,
Have you resolved this? It looks normal to me:
http://www.screencast.com/t/gV1ueB6Q4
Let me know if I'm missing something or should be looking at a specific page.
Wrong page. I resent the link in my original post...
Hmm that page also looks good to me?
http://www.screencast.com/t/wrOWDRQmsc
Let me know if you are seeing something different.
The thumbnails underneath the main product image are messed up. The main image got forced down there into a thumbnail where it shouldn't be, and the other two thumbnails are cropped and pushed together. It should only have two thumbnails underneath that are side by side but not touching each other, and they shouldn't be cropped or greyed out. Also, I want to get rid of the magnifying effect.
What I'm seeing on your site is standard WooCommerce behavior. Is there an example you can link me to showing what you'd like it to look like?
Yes, here's a link to a full page of DVDs. If you click on each one you will see that the thumbnails underneath the main product image are not cropped, they are not greyed out, and they are not pushed together like mine.
That's because they're not using WooCommerce.
You can remove the opacity like this:
.woocommerce div.product div.images .flex-control-thumbs li img {
opacity: 1;
}
And you can add spacing like this:
.woocommerce div.product div.images .flex-control-thumbs li {
margin: 0 10px;
}
As for the cropping, it might be best to check with WooCommerce support. I believe you might be able to turn that off in their settings.
Oh, really? Sorry, I thought they were using Woocommerce. OK, I'll try your code. Thanks for your help!
No problem :)