- This topic has 3 replies, 2 voices, and was last updated 9 months ago by
.
-
Posts
-
Is there a way to further customize the single product images/thumbnails section? The gallery thumbnails is too long and is extending all the way down, is there a way to make it so that only a few is displayed and has a slider function?
Hi Jay,
I’m afraid that changing this is considered as customization work. However, we think the best practice, when having large amount of pictures, is to change the layout of the pictures. Here is a snippet that might help you:
/** * FEATURE : Woocommerce Gallery in Column with Grid */ .woocommerce.single-product div.product div.images .flex-control-thumbs{ display: grid; min-width: 100%; grid-template-columns: 1fr 1fr 1fr; grid-gap:1rem; padding:1rem 0px 0px 0px; } .woocommerce.single-product div.product div.images .flex-control-thumbs li{ margin:0px !important; width:100%; } @media (min-width: 375px) { .woocommerce.single-product div.product div.images .flex-control-thumbs{ grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: 550px) and (max-width:768.95px){ .woocommerce.single-product div.product div.images .flex-control-thumbs{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important; } } @media (min-width: 768px) { .woocommerce.single-product div.product div.images.woocommerce-product-gallery { flex-direction:column; } .woocommerce.single-product div.product div.images .flex-control-thumbs{ grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: 992px) { .woocommerce.single-product div.product div.images .flex-control-thumbs{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
Pasting your code snippet there should do the trick for you.Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.
If you want to go further with the customization of your website, we advise that you require customization work.
Regards,
I’ve added the code snippet in the Additional CSS but it didn’t work. Layout of the pictures is still the same.
Hi Jay,
It’s working on our side on a fresh demo. 🤔
It’s best if we take a quick look at this. Could you create a new website user for us please? If possible with administrator capabilities so we can make a quick check of your settings. You can post the user name and password in your next reply and mark it as private to keep this between us.
Also, are we free to deactivate plugins for our tests? In this case, I invite you to make a backup before we investigate your website further in order to make sure you don’t loose any data if something goes wrong.
Thank you.
Hi there,
This topic has been inactive for a while now so we will be closing it to keep the forum tidy. Don't hesitate to create a new topic if you still need help and we'll be glad to help you!
Best regards,
The Themosaurus team.
The topic ‘Product Images/Thumbnails Customization’ is closed to new replies.
