How to limit the number of product gallery thumbnails on a Breakdance Site

This simple CSS snippet is for WordPress websites running Breakdance with the WordPress Theme System disabled.  The CSS limits the number of product gallery thumbnails displayed on single product pages by limiting the height of the thumbnail portion of the gallery.

To use the snippet, from your WordPress Dashboard, go to Appearance/Customize/Additional CSS, and add the CSS snippet below, then publish the changes.

/* Limit # of product gallery thumbs on product pages */
.breakdance-woocommerce ol.flex-control-nav {
max-height: 400px !important;
overflow: hidden !important;
/* 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)));
}

Adjust the max-height parameter to tweak the height to your preference.

This code would also work on sites not using Breakdance, but you would need to change the CSS selectors.

Here’s an example showing before and after adding the code: