Resize Product Image

How and where can I resize the product image that is displayed on my WooCommerce product page? Here is a link:

Currently the picture is way too big but I don’t know where to change the dimensions.

Here is a link to the original size:

Hi Candice, try checking the settings in the woocommerce/ settings/ products/ display/ where you will find the Product images settings… Try changing those and see if that helps :slight_smile: Note that the theme settings may overrride those… but try it anyway :slight_smile:

Picture attached where to find the settings:

Ross (from CrystalEdge)

Hi Ross,

I hope you are well today and thanks for helping out here in this forum.

Your help here is really appreciated.


Thanks for the response Ross and Movin. I tried changing the dimensions of single product image and catalog images but it did not work. Looks like the theme is overriding the changes.

Any other suggestions or is there special CSS code needed to input in the Custom CSS tab box?

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Unite Options -> Other -> Custom CSS

body.single-product div.product div.images img.attachment-shop_single.size-shop_single.wp-post-image {
    width: auto;

I gave this a try but it did not work. I even changed the dimensions in WooCommerce-- Products – Display —Single Product Image from 600x600 to 300x300 and then to 200x200. But the image did never changed.

Any other suggestions?

I visited your shared site but didn’t find the shared CSS code anywhere in the page markup.

Could you please tell me where you have added it and keep it there so that i can troubleshoot it?

Sorry when the code didn’t work I removed it from the Custom CSS input box. I added it back.

I visited your site again and found it is not working on your site because you have added the following wrong CSS code in your custom CSS option that does not contain closing bracket.

.woocommerce .woocommerce-message {
    border-top-color: #6D9DCD;

To make it work please add the closing bracket to the above CSS code or try adding the provided CSS code at the top of custom CSS added.

Ohh got it to work. As always, thanks so much!

You are most welcome here :slight_smile: