WooCommerce Shop Page Thumbnail Image Broken

The recent WooCommerce update has killed my product page, my thumbnails aren’t displaying the right sizes despite changing them in customiser.

Also the ratio image cropping isn’t really working.

Anyone else manage to sort their shop thumbnails out?

Thanks,

Howdy, @jonopoon!

Thanks for writing in and sorry to hear that you seem to be having an issue with your shop thumbnails. Yes, the new native WooCommerce section in the Customizer is where you need to go with the latest update to WooCommerce to alter thumbnail sizes. As this is a native WooCommerce feature, we don’t have any control over it in the theme and simply reflect these settings on the frontend. I was able to adjust my images locally with the latest update (including ratio cropping) and everything was outputting as expected. A few things I can think of that might be causing your issue:

  • Make sure you’ve cleared any caches since updating (browser, plugins, CDNs, et cetera). It could be that you’re simply not seeing revised changes due to this.
  • Make sure that your uploaded images are physically large enough to work with the sizes you’re entering (something to consider as well for the cropping feature).
  • If you have a child theme that you’re using to update any of these template views or overwrite some things from the theme, that could be a potential source of an issue.

Beyond that, for this particular situation we’d need to see your installation firsthand to get a better handle on what might be going on. If nothing mentioned above sparks any ideas or works out for you, you can provide your login information to your WordPress installation in a secure note for us to take a look, but I have a hunch it might be something caching or size related, as the large sample images I have locally are working as expected.

Hopefully that helps to point you in the right direction. Cheers!

I’ve been playing with it for a few hours on the customisers, resizing thumbnail plugin etc but have yet to come up with a solution, added secure note above.

Thanks,

@jonopoon,

I can’t login with the credentials you’ve provided above, but in taking a look at things from the frontend, I believe that on of the items I mentioned earlier is likely at play here.

Are you using some sort of CDN or caching plugin as mentioned above? Your images seemingly are being served from another source. For example, for me locally, I’ve resized my thumbnails to be output as 700x700, and I get the following results for my images: http://tco-x.localhost/wp-content/uploads/2013/06/poster_2_up-1-700x700.jpg. Notice that WooCommerce has simply cropped the image and appended it’s new size, reinforcing that the change has been made.

However, on your website I’m seeing that the src for each image itself is coming from a completely different domain (likely a CDN), and the end of each image is showing something like: ?resize=450%2C450&ssl=1. When I try to access these images directly in the browser, this is all I see on the page:

Sorry, the parameters you provided were not valid

However, once I remove the ?resize=450%2C450&ssl=1 parameters from the end of the URL, I can access the image directly.

If you’re using some sort of caching plugin or CDN, try disabling this completely and then adjusting the settings in the Customizer to see if they take effect.

Hmm, try now with the login credentials.

The images are been loaded off from it’s media library so shouldn’t be coming from a different domain…

Hey @jonopoon,

I’m sorry but I’m not sure what causes the issue yet because I see you have a lot of plugins running and I’m afraid to deactivate them because it might interrupt the operation of your live site. But, here are the potential causes that I see.

You’re using Pro 1.2.7 and WooCommerce 3.3.3. They are not compatible. It is either you update to Pro 2 which is now available through manual updates. Please see our Changelog, Release Notes and Update Guide. Or, you downgrade WooCommerce to 3.2.3 which is the compatible version for Pro 1.2.7.

Since Pro 1.1.1, WooCommerce native image size options was restored. With that, you will need to set your own image size and then regenerate all your thumbnails. See https://docs.woocommerce.com/document/fixing-blurry-product-images/#section-9

If that doesn’t help, please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

Thank, updating the theme to Pro 2 has fixed the issue.

Didn’t realise there was a new theme update.

Thanks,
Jono

You’re welcome, Jono.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.