Product Gallery only displays maximum 5 images


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.

Comments

  • Hi,

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

    Best regards

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

  • Thank you for your response Phil,

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



  • 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

  • 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?

  • 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

  • perfect, thank you Phil!

Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.