Christmas Celebration SALE! 50% Discount!     Buy Now

Change n numbers of thumbnail images into product gallery at single product page.

By

WooCommerce 3.0 utterly revolutionized the one product page featured and products gallery pictures, together with their PHP. If, within the past, an easy filter from WooCommerce was ready to modification the amount of thumbnails per row.

So, let’s see however we are able to win this in WooCommerce 3.0 and higher than. For this instance we’ll use 2 themes – in reality some theme-specific CSS is additionally required beside the PHP.

add this code into functions.php.,
[php]
add_filter( ‘woocommerce_single_product_image_gallery_classes’, ‘new_5_columns_product_gallery’ );

function new_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;
}
[/php]

You can place PHP snippets at the bottom of your theme functions.php file and in case of CSS, this goes at the bottom of the style.css file.

[css]
/* 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;
}

/* 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;
}
[/css]

Tagged under:

Show Buttons
Hide Buttons