CODEWITHSUNDEEP
wordpressimagewoocommerce
Pat Gilmour
Pat Gilmour

Reputation: 701

Limit Number of Displayed Thumbnails on WooCommerce Single Product Page

On WooCommerce Single Product pages, the gallery thumbnails appear underneath the main featured image. We have a problem in that we often include 30+ images and so the number of thumbnails displayed becomes very long and creates a large amount of white space on the pages (see image below).

So, I'm looking for a hook or a hack (CSS?) that will allow me to limit the number of visible thumbnails to 6 or 9 but will include them all when the Lightbox is launched.

I took a look in the WooCommerce Hook Reference but don't see an option to do this.


WooCommerce Single Product Page - too much white space beside thumbnails

Upvotes: 0

Views: 3252

Answers (1)

Pat Gilmour
Pat Gilmour

Reputation: 701

There's a simple way to do this using CSS. Rather than trying to limit the number of thumbnails that are output in the loop, you can simply hide the images below a certain point on the page using some CSS like this in your theme's styles.css file:

body.single-product div.images div.thumbnails {
    max-height: 380px;
    overflow: hidden;
/* Optional - create a gradient fade at bottom for webkit browsers */
    -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Upvotes: 1

Related Questions