Product Gallery only displays maximum 5 images

tomschneider

https://schmuckurnen.ch/shop/

When I have more than 5 images in a product gallery, the additional products are not shown on the Product page eg: https://schmuckurnen.ch/shop/ascheschmuck-halsketten/schmuckurne-baum-des-lebens-925-sterling-silber/

I have set the CSS overflow to auto so now the visitor can at least scroll to the additional images, but I was wondering if it was possible to via Theme settings to have the images flow onto another line of images? Or is a CSS solution suggestion?

I have the Theme Settings Shop->Single Product->Layout->Style set to Default. However I have also a Template set (Single Product) It seems settings are taken from both Theme Settings and Template Design.

Thank you in advance.

Phil

Hi,

Please go to Betheme -> Theme options -> Shop -> Single product, and change the gallery type to Default.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tomschneider

I wish to maintain the design in the "Product Single" Template and override the Default Style.

tomschneider

Thank you for your response Phil,

The fix I guess would be related to the Product Images element in the BeEditor library.

Phil

Did you activate the option I mentioned? It refers to the product gallery, not the whole template, and with it you will have images in multiple rows, not in one row.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tomschneider

My apologies Phil, first glance of the image you sent I thought it was referring to the Layout -> Template setting not the Gallery -> Image.

I made the change to Default and now all Gallery Images are displayed. Thank you.

There are 4 gallary images on each row, is there a way of setting this to 5 or 6?

Phil

Try the following CSS code:

.woocommerce div.product div.images .flex-control-thumbs li{
 width: 20%!important;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1){
 clear: unset;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(5n+1){
 clear: left;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tomschneider

perfect, thank you Phil!