Broken Product Images in WooCommerce: Fixes

You upload a product photo, hit Update, and the product page shows a gray box. Or the shop page loads with half the thumbnails missing. Or the gallery spins forever. Product images failing in WooCommerce is one of the most common store problems, and it almost always has a clear cause once you test in the right order.

This guide walks through the causes and fixes in the order that saves the most time: start with the quick checks, then move to thumbnails, broken URLs, file permissions, caching, and finally theme and plugin conflicts.

Identify exactly what is broken

"Images not showing" can mean five different problems. Answer these questions first, because each answer points to a different fix.

• All products or only some? All products points to theme, cache or server settings. Only some points to the product data, the image file or an import.
• Shop page, product page, or both? Shop-only problems usually come from thumbnail sizes or lazy loading. Product-page-only problems often come from the gallery script.
• Blank space, gray placeholder or broken-image icon? A placeholder means no image is assigned. A broken icon means the file or its URL is wrong. A blank space often means a script or CSS is hiding the gallery.
• Desktop, mobile or both? Mobile-only issues point to caching, lazy loading or responsive image settings.
• Did it start after something changed? A theme update, a plugin update, a migration, a new CDN or a cache plugin change is usually the trigger.

The most common causes at a glance

Fix 1: Clear every cache layer

This costs nothing and fixes more cases than any other step. Caches stack on top of each other, so clearing only one often looks like it did nothing.

1. Hard refresh the page in your browser, or test in a private window.
2. Clear your WordPress cache plugin.
3. Clear your host's server cache from the hosting panel.
4. Clear your CDN cache (Cloudflare, BunnyCDN or similar).
5. Clear any object cache such as Redis or Memcached if your host provides it.

If the images return, find out why the cache served stale files. A common reason is an image optimization setting that rewrites image URLs. We cover that in Fix 8.

Fix 2: Open the image URL directly

Right-click the broken image area and open the image in a new tab, or inspect the page and copy the image address. Paste it into the browser. The result tells you where the problem is.

• The image opens: the file is fine. The problem is in the page, the theme, a script or an optimization plugin. Continue to Fix 7 to Fix 9.
• 404 Not Found: the file is missing or the URL points to the wrong place. Check the Media Library (Fix 3) and wrong URLs (Fix 5).
• 403 Forbidden: the server is blocking access. Check file permissions, security plugin rules and hotlink protection (Fix 6).
• Redirects to a different domain or to http: a leftover URL from a migration or SSL change (Fix 5).

Fix 3: Check the image is really assigned

Open the product in the admin and look at the right-hand column. The product image (featured image) and the product gallery are two separate boxes. If only gallery images are set and no product image exists, many themes show a placeholder on the shop page.

1. Edit the product and confirm a product image is set.
2. Go to Media → Library and search for the file. If it is not there, the upload failed or the file was deleted. Upload it again.
3. Click Update after assigning the image. Selecting an image without saving is a frequent reason it does not appear.

Fix 4: Regenerate thumbnails and check sizes

WordPress creates several sizes for every upload. WooCommerce and your theme request specific sizes for the shop grid, the product page and the gallery. If those sizes were never generated, for example because you changed themes or changed image dimensions, images can look blurry, stretched or missing.

1. Check the size settings. In classic themes go to Appearance → Customize → WooCommerce → Product Images. In block themes, check the product image settings in the Site Editor and your theme options.
2. Install a thumbnail regeneration plugin and run it for all images, or at least for product images.
3. Clear caches again (Fix 1) and reload.

If the original upload is very small, regeneration cannot make it larger. Upload product photos that are at least as large as your biggest displayed size. As a rule, 1000 to 1500 pixels on the long side works for most stores.

Fix 5: Repair wrong URLs after a move

After moving to a new domain, switching from http to https, or restoring a backup, product images may still point to the old address. The page loads, but images request files from a URL that no longer works, or that browsers block as mixed content.

1. Go to Settings → General and confirm both the WordPress Address and Site Address use the correct domain and https.
2. Run a database search-and-replace for the old URL to the new one. Use a tool that handles serialized data safely. A plain SQL replace can corrupt serialized settings.
3. Open the browser console. Red "mixed content" messages confirm http images on an https page.
4. Clear caches again.

If you are planning a move, the WordPress website migration guide explains what a clean migration includes so this does not happen.

Fix 6: File permissions and disk space

If the direct URL returns 403, or uploads fail silently, check the server side.

• Permissions: folders in wp-content/uploads are normally 755 and files 644. Wrong ownership after a migration is common.
• Hotlink protection or firewall rules: a rule meant to stop other sites from using your images can block your own pages if the domain list is wrong.
• Security plugin or WAF: it may block requests to the uploads folder. Check its logs.
• Disk space and quotas: if the server is full, new uploads can fail while existing images still show. Check your hosting dashboard.
• Memory or PHP limits: large uploads can fail partway. See how to fix the memory exhausted error if you see it in your logs.

Fix 7: Gallery stuck, invisible or not loading

On many themes the product gallery starts hidden and is shown by JavaScript once it loads. If a script fails, the image area stays invisible or keeps spinning even though the image file is fine. This matches the "direct URL works but the page shows nothing" case.

1. Open the browser console (F12) on the product page and look for red errors.
2. Errors that mention jQuery, a slider or zoom script point to a conflict, a missing script or a combined and minified file that broke.
3. Temporarily disable JavaScript minify, combine and delay options in your optimization plugin and test again.
4. Check that your theme still declares WooCommerce gallery support. Custom themes or heavily edited child themes sometimes lose it.

As a temporary test only, you can force the gallery to show with CSS:

.woocommerce-product-gallery { opacity: 1 !important; }

If this makes the images appear, the root cause is the script that normally reveals the gallery. Fix that script instead of leaving the override in place permanently.

Fix 8: Lazy load, WebP and CDN settings

Image optimization is a frequent hidden cause. Lazy loading, automatic WebP conversion, image CDNs and responsive image rewriting all change how image tags are output.

• Turn off lazy loading for product images and test. If they appear, add the gallery images to the exclusion list rather than disabling lazy loading site-wide.
• Disable WebP or AVIF conversion temporarily. If your server rules for those formats are wrong, browsers get broken files.
• Pause the CDN and test from the origin. Misconfigured CDN rules can serve the wrong path.
• Check "delay JavaScript" features. They can postpone the gallery script until a user interacts.

Slow pages and missing images are often caused by the same plugin settings. The WordPress speed optimization guide shows how to tune them without breaking the layout.

Fix 9: Theme and plugin conflicts

If the problem started after an update, run a clean conflict test on a staging copy.

1. Switch to a default theme such as Storefront or a standard WordPress theme. If images return, the theme is the cause.
2. Switch back and deactivate all plugins except WooCommerce.
3. Reactivate plugins one at a time and test the product page after each.
4. The plugin that makes images disappear again is the culprit. Check for an update, a setting, or an alternative.

Our guide on diagnosing a WordPress plugin conflict covers this process in more detail. Common offenders are image optimization plugins, page builders that override WooCommerce templates, security plugins and caching plugins.

Fix 10: Images missing after a product import

If you imported products from a CSV and the images are blank, the importer could not download the files.

• Confirm every image URL in the CSV opens in a browser and is publicly accessible.
• Check that your server is allowed to fetch remote files. Some hosts block it.
• Make sure URLs are complete and use the right protocol.
• Import a small batch first. A single bad URL or timeout can fail an entire large import.
• If images are already in the Media Library, match them by file name instead of downloading again.

Planning a new catalog? The guide to adding your first products shows a clean way to prepare images before upload.

How to stop it from happening again

• Use a staging site for theme and plugin updates, and test a product page before going live.
• Exclude product images from aggressive lazy loading and delay rules.
• Standardize image sizes and upload at a consistent, adequate resolution.
• Keep backups of both files and database so a bad update can be reversed quickly.
• Keep your store maintained. Regular updates and monitoring catch problems early. See what WordPress maintenance costs and what each plan covers.

If the image file opens when you visit its URL directly, the problem is almost never the image. It is the page, a script, or a setting between your server and the visitor.

Need it fixed for you?

If your product images are still not showing after these steps, or you would rather not touch the database yourself, I can diagnose and fix it. I have worked on WooCommerce stores for 14+ years and handle image, gallery, theme conflict and migration issues regularly. You can hire me as your WooCommerce developer and send the store link plus a screenshot of the problem.

Frequently asked questions

Why are my WooCommerce product images not showing?

The most common reasons are cached files, thumbnails that were never generated, wrong image URLs after a migration, file permission problems, a hidden gallery caused by a JavaScript error, or a plugin or theme conflict. Opening the image URL directly tells you which group you are in.

Why do images show in the admin but not on the website?

The admin loads the original file, while the website requests resized versions and runs extra scripts. Missing thumbnails, caching, lazy loading and gallery script errors can all break the front end while the Media Library looks normal.

How do I regenerate WooCommerce thumbnails?

Install a thumbnail regeneration plugin, run it for all images or only product images, then clear every cache. Make sure your image size settings match what your theme displays before you regenerate.

Why do product images disappear after an update?

Updates can change how scripts load or how templates output images. A theme update may drop WooCommerce gallery support, or a plugin update may change lazy loading behavior. A conflict test on a staging copy finds the cause.

Why are WooCommerce images blurry or cropped?

Blurry or cropped images usually mean the uploaded file is too small, or the saved thumbnail sizes do not match the theme layout. Upload larger originals, fix the size settings and regenerate thumbnails.

Why do images show on desktop but not on mobile?

Mobile-only problems usually come from caching rules, lazy loading, responsive image settings, or a separate mobile cache. Test with caching and optimization turned off, then re-enable one feature at a time.

Can slow hosting cause missing product images?

Yes. A slow or overloaded server can time out while loading images, and a full disk can block new uploads. If problems appear under traffic, review your plan. Our guide to WooCommerce hosting costs explains what a store really needs.