Woo Commerce product images resizing when switching to Pro

Support
#1

Hello,

I am switching an existing site with an outdated custom theme to Pro. I’m encountering an issue with the product image size on the Shop page. It is a custom template that I adapted to the Container Header|Footer template and added the CSS in the Global CSS area. Everything looks pretty good except the image is 100px x 100px instead of filling the 350px width in the CSS.

Existing: https://getprostorage.com/store/

Pro conversion: http://getprostorage.staging.wpengine.com/store/

My product image display settings are:

I’ve regenerated thumbnails more times than I can count.

I am using the latest Pro theme and the latest Woo Commerce (3.1.2).

I found this old thread but none of this worked: https://theme.co/apex/forums/topic/product-images-woocommerce/224057/

Any ideas how I can get the product images to look the same as on the existing site?

Thanks

#2

Hi there,

Lately, we changed how our theme is behaving regarding the product images due to the latest changes in the Woocommerce new versions.

Please kindly read this article for more detailed information:

https://theme.co/changelog/#theme-pro-1-1-1

Hope it helps.

#3

Thanks for the reply, but that doesn’t help.

I’m using Pro 1.1.1 with the latest Woo Commerce, I’ve made sure the WC image display settings are correct (see screenshot in original post) and have regenerated the thumbnails multiple times. They are still displaying at 100px x 100px rather than the 350px defined in the CSS and displayed before I switched the theme to Pro.

#4

Hi There,

In that case, would you mind switching to main X theme from child theme? Let’s just see if this is not a result of customization on the child theme. If the issue persists, please provide credentials on secure note so we can investigate, including FTP credentials too.

#5

I switched back to main Pro theme, still no difference.

Credentials attached.

#6

I can’t login to your WP admin. FTP credentials work.

Thanks.

#7

Sorry. I have deactivated IP Geo Block plug-in. It should work now.

#8

Hello There,

Thanks for deactivating the IP Geo block plugin. By the way, do you want to have something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

#product_list .product-row .product-image img {
    min-width: 100%;
}

You will need this css because Pro theme does not support the product list section as it was from your previous theme. The image is blurry because it is 100x100 pixels being expanded. To resolve the blurry image, please change the product thumbnail size from 100 to at least 350x350 pixels in dimension.

Hope this helps.

#9

Thanks for the reply.

I added the CSS and it worked to expand the image. I changed all the image settings to at least 350px and then regenerated the thumbnails. The image is still blurry.

I don’t know why that image was resized to 100px. Nowhere in any of my settings is 100px defined.

Am I missing something?

This is the code on the template:

<a href="<?php echo get_the_permalink(); ?>" class="product-image">
<?php the_post_thumbnail(); ?></a>

Should I change the_post_thumbnail() part to a different image?

#10

Hello There,

Thanks for updating. As it turns out that you are using a custom page template named as Shop. In this template there is a code as you have listed above. the_post_thumbnail() function is getting the image size from the Settings > Media in your WP dashboard. Please check or change it and see how it goes.

And if ever it still not changing, you might need to change the code in your page template. You can make use of this code instead:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->id ), 'shop_thumbnail_image_size' ); ?>

<a href="<?php echo get_the_permalink(); ?>" class="product-image">
  <img src="<?php  echo $image[0]; ?>" data-id="<?php echo $product->id; ?>">
</a>

Hope this helps. Please let us know how it goes.

1 Like
#11

Yay! Adding the code to my template worked.

Thank you so much for your help. You guys are the best.

#12

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.