Amount of Thumbnail images on Product pages
-
Hello,
I have set my Thumbnails position as ´Bottom (horizontal carousel)´.
By default it only shows 1 row of 4 images on desktop and 3 on Mobile.
I would very much like to change this to 2 rows with the possibility for 8 images on desktop and 6 on mobile.
Would it be possible to create this?
Hello,
It is not possible with CSS, such modification requires more complicated modification which is not covered by our support.
Best Regards
I would like to give this a chance with a different approach.
I have set the thumbnail images settings to: Bottom (2 columns). Now what I would like is 3 columns instead of 2.
So I was able to resize the images to 2/3 of their original size with this code:
/* Thumbnail images product pages kleiner maken*/
.attachment-woocommerce_single.size-woocommerce_single{
Max-width: 66.67%;
}
What I now need is a css code that will re-align the images next to each other without the empty space (see picture)
Would you be able to give me any suggestions for this?
Attachments:
You must be
logged in to view attached files.
Hello,
Please add this code to the Theme Settings > Custom CSS > Global:
This code would align the blocks into one row.
body .thumbs-position-bottom_combined .product-image-wrap,
body .thumbs-position-bottom_grid .product-image-wrap {
-webkit-box-flex: 1;
-ms-flex: 1 1 33%;
flex: 1 1 33%;
max-width: 33%;
}
You need to upload bigger images https://gyazo.com/d524f1af7346d5eb2e973b4d02cb311f
Best Regards
Thank you, this is working.
Would you also have a solution for this on Mobile view? The thumbnail pictures are being shown with carousel on mobile view and I can not seem to change that.
Hello,
The bottom (2 columns) layout is transformed into the carousel and we cannot change that. Here is the demo of how it works: https://woodmart.xtemos.com/shop/furniture/scelerisque-pulvinar-ligula/?opt=images_col2
Best Regards
.
