Adjust product image sizes on shop and individual product pages

[Kristin]

I use a narrower product image than is used in theme templates – on all pages that have product images. I have changed the image size in the Woocommerce display settings and regenerated thumbnails, but I can’t figure out how to adjust the css so that the full image shows on the appropriate pages. The only place that the full image shows is in the lightbox. As far as I can tell, the image size I set in the Woocommerce settings is the resulting size of the box that shows on the shop home page, including text. I need the image itself to be that size and the box made bigger (same width but taller) to accommodate that. Help?

[Anonymous]

Hi @krutten
For width following css has been used, you can put the width accordingly.
At rest of location 100% width is used

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 456px;
}

Regards
Varun Dubey

[Kristin]

Thanks @Varun … I tried your CSS but it had no effect that I could see. I’m not sure I explained my problem clearly – I use product images that are a horizontal rectangle instead of square (2:3 ratio; ie. 200px wide by 300px tall, etc.). I need the full product photos to be visible on all pages (shop, individual product page, etc.) Currently, the top and bottom of my product images is cut off.

[Kristin]

Still need help with this…

[Anonymous]

@krutten Try this code:

add_action(‘init’, ‘remove_plugin_image_sizes’);

function remove_plugin_image_sizes() {
remove_image_size(‘bm-shop_single’);
add_image_size( ‘bm-shop_single’, 200, 300, true );

}

My suggestion is to use 400×600 images will look better.

[Anonymous]

@krutten Use it in child theme functions.php

[Kristin]

Thanks @Zarko … I tried your code but it had no effect. I’ve attached a screenshot of what the product image looks like in my shop. As you’ll notice the top and bottom of the photo are cut off. The same is true on the individual product page.

[Anonymous]

@krutten Ok, I thought you were taking about large image on single product page, try this:

add_action(‘init’, ‘remove_plugin_image_sizes’);

function remove_plugin_image_sizes() {
remove_image_size(‘bm-product-archive’);
add_image_size( ‘bm-product-archive’, 200, 300, true );
}

and than regenerate thumbnails.

[Kristin]

Yes!! That did the trick, at least for the shop page. Thanks @Zarko! Now what do I need to do to make the same adjustment for the individual product pages? The code provided earlier didn’t work for that.

[Anonymous]

Great, I will close this topic
Feel free to create new topic for any further queries.
Regards
Varun Dubey