Missing product images in WooCommerce look like one problem but have many causes. Testing in the right order is what saves time. Here is the order I use.
1. Narrow the scope first
- All products or some?
- Shop page, product page, or both?
- Gray placeholder, broken icon or blank space?
- Desktop, mobile or both?
- Did it start after an update, migration or CDN change?
A placeholder means no image is assigned. A broken icon means a wrong file or URL. A blank space usually means a script or CSS is hiding the gallery.
2. Clear every cache layer
Browser, cache plugin, host cache, CDN and object cache. Clearing only one often looks like it did nothing.
3. Open the image URL directly
This one test splits the problem in half:
- Opens fine: the file is healthy. Look at the page, theme, scripts or optimization plugins.
- 404: missing file or wrong URL.
- 403: permissions, hotlink rules or a security plugin.
- Redirect to another domain or http: leftover URL from a migration.
4. Check assignment and thumbnails
Confirm the product image (not just the gallery) is set and the product was saved. If you changed themes or image sizes, regenerate thumbnails with a regeneration plugin and clear caches again.
5. Fix URLs after a move
After a domain change or an http to https switch, images can still point to the old address. Confirm Settings > General, then run a serialization-safe search-and-replace. Mixed content errors in the browser console confirm the issue.
6. Debug the gallery script
Many themes hide the gallery until JavaScript reveals it. A script error leaves it invisible even when the file is fine. As a temporary diagnostic only:
.woocommerce-product-gallery { opacity: 1 !important; }
If images appear, fix the script that normally reveals the gallery and remove the override.
7. Check optimization settings
Lazy loading, WebP conversion, image CDNs and delay-JavaScript options all change image output. Exclude product images from lazy loading rather than turning it off site-wide.
8. Test conflicts last
On a staging copy, switch to a default theme, then deactivate all plugins except WooCommerce and reactivate them one by one.
FAQ
Why do images show in the admin but not on the site? The admin uses the original file. The front end requests resized versions and runs extra scripts, so thumbnails, caching and script errors can break only the front end.
Why do images disappear after an update? An update can change script loading or template output. A conflict test on staging finds the cause.
Why are images blurry or cropped? The original is too small, or saved thumbnail sizes do not match the theme layout. Upload larger originals and regenerate thumbnails.
Why only on mobile? Usually caching rules, lazy loading or responsive image settings.
Full guide with all ten fixes, a causes table and more FAQs: WooCommerce product images not showing
Top comments (0)