WooCommerce 3.0 completely revolutionized the single product page featured and product gallery images, including their PHP. If, in the past, a simple filter from WooCommerce was enough to change the number of thumbnails per row (https://docs.woocommerce.com/document/change-number-of-thumbnails-per-row-in-product-galleries/), this does not exists anymore 🙁
So, let’s see how we can achieve this in WooCommerce 3.0 and above. For this example we’ll use two themes – in fact some theme-specific CSS is also needed together with the PHP.
PHP Snippet: Change No. of Thumbnails per Row @ Product Gallery | WooCommerce
/**
* @snippet Change No. of Thumbnails per Row @ Product Gallery
* @how-to Get tutoraspire.com FREE
* @author Tutor Aspire
* @testedwith WooCommerce 5.0
* @donate $9 https://www.tutoraspire.com
*/
add_filter( 'woocommerce_single_product_image_gallery_classes', 'tutoraspire_5_columns_product_gallery' );
function tutoraspire_5_columns_product_gallery( $wrapper_classes ) {
$columns = 5; // change this to 2, 3, 5, etc. Default is 4.
$wrapper_classes[2] = 'woocommerce-product-gallery--columns-' . absint( $columns );
return $wrapper_classes;
}
Unfortunately this filter is usually not sufficient as WordPress themes apply their own CSS to the new Product Gallery. So, let’s see what else is needed to make it all work.
CSS to be added for TwentySeventeen Theme (Change No. of Thumbnails per Row @ Product Gallery)
Please note: this blog’s featured image is the result of PHP + CSS on the TwentySeventeen Theme.
/* Remove default "clear" at position 5, 9, etc. This is for 4 columns */
.woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n+1) {
clear: none;
}
/* Add new "clear" at position 6, 11, etc. This is for 5 columns */
.woocommerce-product-gallery .flex-control-thumbs li:nth-child(5n+1) {
clear: left;
}
CSS to be added for Storefront Theme (Change No. of Thumbnails per Row @ Product Gallery)
/* Add new CSS for 5 columns */
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 11.1%;
margin-right: 11.1%;
float: left;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
margin-right: 0;
}
Final result:
