When activating a new theme with pre-existing content, you may notice images not appearing like the demo.

The Solution

eCommerce Themes with Fuzzy Images

Verify your WooCommerce Image settings under the Product tab. Visit your Theme Documentation’s “Configure WooCommerce” article for the correct dimensions to put there. In general, hard crop can be unchecked and the Catalog image should be at least 700 unless specified otherwise. For eCommerce themes, upload the highest quality images possible, at least 980-1024px wide. Woocommerce takes care of scaling or cropping it depending on the view.

See also WooCommerce Documentation: Using appropriate image dimensions to avoid distortion / pixellation

New Theme, Pre-existing Content

This issue is due to your old images not being resized or cropped to your current theme’s image specifications, which occurs when the post is created. See the following article for how to install and use the Regenerate Thumbnails plugin to resize your original uploads to fix the new settings and theme specifications.

How to Regenerate Images to Fit Theme Templates

General Sizing Issues

Your theme has a minimum image dimension requirement forfeatured  images to properly fill out widgets and post areas. View your Theme Documentation “Create Your Content” article for recommended image sizes. In general, your images should be at least 600px wide for posts in most themes, or 980px wide if destined for full-width layouts or sliders.  Also ensure your WordPress Media settings are not set to crop thumbs to 150 square.

  1. Click on SettingsMedia
  2. Change the Thumbnail size to match the smallest dimension of your WooCommerce catalog settings
  3. Uncheck the Crop option and click Save