How to modify the number of gallery columns in a Themer Woo Single product image

I’m using Themer > Woocommerce > Product Images. The module is really, really limited with option settings.

I want to change the number of gallery columns displayed below the image. I have found the CSS settings that I think need to be changed, but there is no way to access a ‘gallery columns’ setting in the module config so the setting seems to be hard coded. How can I change the gallery number of columns?

Shared with Zight

Thanks,
-Norm

It is only possible via CSS. Adjust the column width via CSS as per your requirement.

Or you can try this code. Add the code into the functions.php file

add_filter( 'woocommerce_product_thumbnails_columns', 'paulc_change_product_thumbnails_columns' );
function paulc_change_product_thumbnails_columns() {
	return 3; // change the value as per your need
}
1 Like

Thanks for the reply. I did adjust the column width and img via CSS, but it doesn’t work for changing the actual number of columns. It only makes the thumbnails smaller. The only way to change the actual number of columns (that I can find) is to change the values for “woocommerce-product-gallery–columns-XX” and “data-columns”

Awesome…! I think this is what I need. I’ll test it out but will mark it as a solution for now.

1 Like

Yeah. try the PHP code. CSS will not help.

Ok the filter codes works to change the number of columns, but it also requires a bit of css to change the width of the columns. So if I have the number of columns set to 5 (return value in your filter code) then I need to set the li container width to 20% to get them to fit in the space and not wrap. My CSS with a bit of additional styling is:

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 20%;
  padding-bottom: unset;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  padding: 5%;
  border-color: rgba(158, 158, 158, 0.2);
}
2 Likes