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 able 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.

WooCommerce & 2017 Theme: change number of thumbs per row in the Product Gallery

PHP Snippet: Change No. of Thumbnails per Row @ Product Gallery | WooCommerce


/**
 * @snippet       Change No. of Thumbnails per Row @ Product Gallery | WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=67117
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.0.5
 */

add_filter( 'woocommerce_single_product_image_gallery_classes', 'bbloomer_5_columns_product_gallery' );

function bbloomer_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 two specific examples.

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:

Change WooCommerce Product Gallery to 5 Columns on Storefront Theme

Share:

Leave a Reply