Make product images square on mobile

Hi, my product images are originnaly 2000 x 1500 px files. This 4×3 format is great for single product page product images on desktop because square image doesn’t fit the browser window on smaller laptop screens but it’s too small for mobile. Therefore I want to have 4:3 product images for desktop and 1:1 product images for mobile. I tried to achieve this with following code:

if( wp_is_mobile() ) {
	add_filter( 'woocommerce_gallery_image_size', function( $size ) {
return 'Thumbnail';
} );
	}

but it didn’t work although thumbnail size is set and there are images of that size.
Can you please provide any suggestion on the above code or another solution?

Actually ‘woocommerce_gallery_image_size’ filter does not work even alone without wp_is_mobile() function.

Hi,

Sorry, but there is no such option in our theme and WooCommerce by default. It may require additional code customization or extra plugin but we don’t have an instruction for this. It is out of our theme support scope.

Regards

OK, another way to solve the issue would be to use 1:1 images everywhere but adjust single product page columns – make right column with product details little bit wider and left column with image little bit narrower.

Hi, just a kindly reminder about my problem.

Hello,

You can change the width of the block with image in Theme Settings -> Product page -> Images -> Product image width.

Kind Regards

Thank you. I forgot about this settings. unfortunately medium image size seems to small for my needs. Something inbetween medium and big would be ideal for my site, how I can achieve this?

Sorry, but there is no such kind of layout for the single product page. You can select between available in Theme Settings only.

OK, can you please at least give me some direction to where it can be customised?

You can try to do this with CSS code and adjust the width of the images and summary blocks.

[Author]

Posts