WooCommerce product images not showing is a common issue that can be caused by missing thumbnails, broken image URLs, caching, CDN problems, theme conflicts, or variation settings. The fastest way to fix it is to first check whether the browser can actually load the image request.
Start by copying the image URL and opening it in a new browser tab. If the image loads there, the file is fine and your problem is in your theme, a plugin, or your cache. If it does not load, the file, its path, or your server permissions are the problem.
An empty product page is worse than a slow one. A shopper who cannot see what they are buying does not wait around. The good news is that this problem looks far more mysterious than it is, and there is one simple test that cuts the possible causes in half before you touch a single setting. Let us start there.
Start With the Fastest Test: Is the Image Request Actually Failing?
If you have WooCommerce product images not showing across multiple products, start by checking the failed image requests in Chrome DevTools.
First determine whether the browser cannot retrieve the image or whether the page is failing to display an image that exists.
Right-click the broken image and open it in a new tab if possible. If it loads, the original file probably exists. If it does not load, the problem is more likely to involve the file path, permissions, CDN, or a missing generated image size.
Then open:
Chrome DevTools → Network → Img
Reload the product page and look at the actual image request WooCommerce is making.
Common responses include:
- 404 Not Found: The requested image or generated thumbnail does not exist.
- 403 Forbidden: The server, CDN, hotlink protection, or security rule is refusing the request.
- 200 OK but no visible image: The problem is more likely to be CSS, JavaScript, lazy loading, a theme, or another front-end script.
- A long pending request: Your CDN, image optimization service, or origin server may be slow or timing out.
Also inspect the image element and check both src and srcset. A full-size image can work while one of the smaller responsive image files requested by the browser is missing.
This test is more reliable than clearing caches or disabling plugins at random because it tells you whether you are dealing with an image-delivery problem or a display problem.
Also: where exactly is it broken?
Worth thirty seconds, because these three situations rarely share a cause.
| Where images are broken | What it usually means |
| On the live product page only | A path, permission, or cache problem |
| In the Media Library grid in wp-admin | Usually a JavaScript issue or a blocked admin request |
| Only inside the block editor | A script conflict or a browser extension |
One more useful signal: if every image on your site is broken, look at server-level causes such as permissions or URLs. If one stubborn thumbnail is broken while everything else is fine, it is a file-level problem with that specific image.
Part 1: The image does NOT load in a new tab
The file or its address is the problem. Work through these in order.
Your Site Moved and Some Image References Still Point to the Old URL
Migrations are a common reason WooCommerce images break, but the old URL may not live in only one database table.
WordPress stores media as attachments, while themes, page builders, product content, widgets, plugin settings, and custom fields may also store image URLs or related data. After changing domains, moving from staging, or switching from HTTP to HTTPS, some of those references can continue pointing to the previous site.
First check:
Settings → General
Confirm that both the WordPress Address and Site Address use the correct domain and HTTPS.
Then inspect the broken image request in Chrome DevTools. If it still contains your previous domain, staging URL, or HTTP address, run a database-aware search and replace.
For developer-managed sites, WP-CLI provides a wp search-replace command that understands serialized WordPress data. A trusted migration or search-and-replace plugin can also be used when WP-CLI is not available.
Do not manually run a simple SQL replacement across random database tables. WordPress and plugin settings may contain serialized data that can be damaged by an unsafe replacement.
Always create a complete database backup first, run a dry test when your tool supports it, and verify product pages, galleries, page-builder layouts, and media URLs after the replacement.
Your server cannot read the files
If the files are there but the server refuses to serve them, permissions are usually the reason. This happens after migrations, restores, and some host changes.
On many WordPress hosting setups, directories commonly use 755 permissions and files use 644, but the correct permissions depend on your server ownership and hosting configuration. Do not recursively change permissions across a production site unless you know what your host expects. If images started returning 403 errors after a migration or restore, ask your hosting provider to verify ownership and permissions for wp-content/uploads/.
A Required WooCommerce Image Size Is Missing
WordPress stores the original image and generates additional image sizes for different parts of the site. WooCommerce registers its own image sizes for product grids, single-product images, and gallery thumbnails.
That means the original image can exist while the specific WooCommerce image size requested by your shop or theme is missing.
For a classic theme, image settings are typically available under:
Appearance → Customize → WooCommerce → Product Images
If you use a block theme, check:
Appearance → Editor
Your theme may also define its own WooCommerce image dimensions.
After changing themes or image-size settings, go to:
WooCommerce → Status → Tools → Regenerate shop thumbnails
WooCommerce provides this tool specifically to rebuild its shop thumbnails. Generic thumbnail-regeneration tools may also regenerate registered WordPress image sizes, but WooCommerce’s built-in tool is the most direct place to start for WooCommerce product-image issues.
On a large catalog, regeneration can consume significant server resources and may continue in the background. Run it during a lower-traffic period when possible, then clear your page cache and CDN before checking the results.
You can also review the official WooCommerce product image settings documentation for details on image dimensions and thumbnail regeneration.
Your server ran out of memory while making thumbnails
This one explains a genuinely confusing symptom: the image looks perfectly fine in your Media Library, but breaks on the product page.
When you upload an image, WordPress generates all those extra sizes right then. If your PHP memory limit runs out mid-process, it stops. The original saves fine, so everything looks normal in the admin, but the sizes were never created. Any template asking for a missing size shows nothing.
Go to WooCommerce → Status → System Status and check both the PHP memory limit and WP memory limit. If either is below 256 MB, your store may benefit from a higher limit.
Changing WP_MEMORY_LIMIT cannot override a lower server-level PHP limit. If the value does not increase in WooCommerce System Status, contact your host.
The fix: raise your memory limit by adding this line to wp-config.php, above the line that says “That’s all, stop editing”:
define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
Then re-upload the affected images or run the regeneration tool above. If the limit will not rise, your host caps it and can raise it for you.
Your .htaccess or hotlink protection is blocking your own images
Two quieter causes worth checking if nothing above fixed it.
If image requests return 403 or 404 after a server or permalink change, check your web-server rules. On Apache-based hosting, you can first go to Settings → Permalinks and click Save Changes to refresh WordPress rewrite rules. Do not rename or delete .htaccess on a live store without a backup. If your host uses Nginx, .htaccess is not used, so ask the host to inspect the Nginx configuration instead.
Hotlink protection stops other sites embedding your images, which is useful, but set too aggressively can block your own site or your CDN from loading them. If you turned this on recently, turn it off temporarily and see if your images come back.
Check Whether WordPress Can Process the Image Format
Modern WordPress supports the common JPEG, PNG, WebP, and other standard web image formats. Since WordPress 6.7, HEIC images can also be uploaded and automatically converted to JPEG when the server’s image-processing library supports HEIC.
If an iPhone HEIC image fails to upload or generate thumbnails, the problem may be your server’s image-processing support rather than WooCommerce itself.
Check Tools → Site Health → Info → Media Handling or ask your host whether Imagick/your current media processor supports HEIC.
If conversion is unavailable, convert the file to JPEG or WebP before uploading.
SVG remains a different case. WordPress does not allow unrestricted SVG uploads by default because SVG files can contain executable content. Only enable SVG support through a security-conscious solution that sanitizes uploaded files.
Part 2: The image DOES load in a new tab
The file is fine. Something on your page is stopping it from appearing.
Mixed content after switching to HTTPS
If your store moved from HTTP to HTTPS, old HTTP image references can still cause failures. Modern browsers automatically upgrade many ordinary image requests to HTTPS, but responsive images loaded through srcset or picture can be treated differently, and an upgraded request still fails if the image is not available over HTTPS.
Press F12, open the Console tab, and reload the page. Mixed content warnings appear in the console and name the exact files being blocked.
Where the old addresses hide is the part people underestimate. Check all of these:
- WordPress Address and Site Address under Settings, then General
- Post and product content, including custom HTML blocks
- Page builder data. Elementor, Divi and similar tools store image URLs inside their saved layouts and generated CSS, so a builder-heavy store often keeps HTTP addresses long after everything else is fixed
- Theme and plugin settings that store image paths
- Your CDN or proxy, which may be misreporting whether the connection is secure
Fix these with the same search and replace method as above, changing http://yourdomain.com to https://yourdomain.com.
Cache and CDN are serving an old broken copy
This wastes more time than almost anything else on the list, so the order matters.
Clearing your cache does not fix a bad URL, and fixing a bad URL does not clear your cache. You need both, in this order:
- Fix the actual cause (URLs, permissions, thumbnails)
- Clear your caching plugin
- Purge your CDN separately, such as Cloudflare
- Hard refresh your browser with Ctrl+Shift+R, or check in a private window
A cached broken page can outlive the fix by days, which makes a working fix look like a failure. Always verify in a private window before deciding something did not work.
The Image Loads but CSS Is Hiding It
If the image request returns 200 OK but nothing appears on the product page, inspect the image in Chrome DevTools.
Check the Computed styles for:
display: nonevisibility: hiddenopacity: 0- zero width or height
- an overflowing parent container
- another element covering the gallery with a higher
z-index
Also disable any animation or gallery-loading effects temporarily. Some themes hide the product gallery until a JavaScript initialization event fires. If that script fails, the image loads successfully but remains invisible.
If switching temporarily to a default WooCommerce-compatible theme makes the image appear, the issue is in your theme’s styles, templates, or gallery JavaScript rather than the image file itself.
An image plugin is the problem
WooCommerce 10.6+ note: WooCommerce now lazy-loads images from the Product Image block by default. If your theme, performance plugin, CDN, or image optimizer adds another lazy-loading layer, test whether the same image is being processed more than once before installing or enabling another lazy-load feature.
Image optimization and lazy loading plugins are common causes, and one scenario deserves a real warning.
Two lazy loading plugins fighting is a frequent cause of images that load sometimes, or only after scrolling oddly. Many themes and caching plugins include lazy loading built in, and WordPress has it natively too, so you may be running three without realising. Keep one.
An optimization plugin that deleted your originals is the serious one. Some plugins offer to delete original files after converting or compressing them, to save space. If that conversion went wrong, or the plugin is later removed, the originals may be gone for good. This is a real data loss risk, not a display bug.
Before running any bulk image optimization, take a full backup, and ideally test the plugin on a staging copy first. That is a ten-minute precaution against losing an entire product photo library.
To find which plugin is responsible, deactivate them one at a time and reload the product page after each. The full method is in our guide to finding the plugin that is breaking your site.
Your theme is overriding WooCommerce templates
Themes can replace WooCommerce’s own product templates with their own versions. If the theme is old, or was built for a much earlier version of WooCommerce, those templates can use functions that no longer work, so images never get output at all even though everything else is fine.
Test it: switch temporarily to a default theme such as Storefront and reload a product page. If your images appear, your theme is the cause, and you need either a theme update or a developer to correct the outdated template. If your store uses a page builder for product layouts, builder-specific issues can produce the same result.
Part 3: Variation images (the WooCommerce-only headache)
If WooCommerce product images are not showing only after selecting a variation, check the image assigned to that specific variation.
Variable products have three separate image systems, and it helps enormously to know which one is misbehaving:
- The featured image (the main product image)
- The product gallery (extra photos on the product page)
- Variation images (the photo that swaps when a shopper picks red instead of blue)
They fail independently, so “images not showing” on a variable product needs one more question: which of the three?
WooCommerce 10.9+ note: newer WooCommerce versions also include native Variation Gallery functionality that can assign multiple images to an individual variation. If you use this feature, check both the variation’s primary image and its variation gallery when diagnosing missing images.
The variation image was never assigned
The simplest cause, and worth ruling out before anything technical. Open the product, click the Variations tab, expand a variation, and look at the Image field. Each variation needs its own image assigned individually. Setting up variations does not automatically give each one a picture.
If most variations have images and one does not, that is your answer for that variation.
The image is assigned but does not swap
The shopper selects an option and the main image just sits there. This is a different problem: the image exists, but the front-end script that swaps it cannot match the selection.
Things to check:
Regenerate shop thumbnails (WooCommerce, then Status, then Tools). Variation swapping relies on the correct sizes existing.
Check for a JavaScript error. Press F12, open Console, and click through your variation options. A red error tells you a script is failing, and often names the plugin responsible.
If the Problem Only Happens on a Translated Product
Local attributes are supported by WooCommerce and do not normally prevent variation images from changing.
However, multilingual plugins can introduce an additional synchronization problem. If variation images work in the original language but not in a translated version, inspect whether the translated variation attribute keys and values still match the parent product.
This has been reported in multilingual setups where translated local-attribute names become out of sync with variation metadata.
Before rebuilding the product, test the original-language version, review your multilingual plugin’s WooCommerce compatibility tools, and resynchronize the product variations. Converting to global attributes may help some multilingual workflows, but it should not be treated as a universal fix for WooCommerce variation-image problems.
The gallery shows a placeholder on a variable product
If a variable product shows the placeholder image instead of your gallery, check whether your variations have images assigned at all. WooCommerce’s handling of gallery display on variable products with imageless variations has caused this in the past. Assign images to your variations, or remove the empty variations you are not using, and reload.
“It worked yesterday” versus “it never worked”
This one question narrows things down fast.
If it worked yesterday, something changed. The usual suspects: a plugin or WooCommerce update, an SSL certificate activation that changed URLs, a CDN or caching change, or something your host changed on the server. Start with whatever changed, then check the URL and cache sections above.
If it never worked on a new store or a newly moved one, start at the file level: permissions, memory limits, thumbnail regeneration, and file paths.
Your quick checklist
- Copy the image URL and open it in a new tab
- Note where it is broken: live site, media library, or editor
- Check the browser console (F12) for errors
- Confirm your site URLs under Settings, then General
- Run a search and replace if you moved site or domain
- Check uploads folder permissions (755 folders, 644 files)
- Run WooCommerce, then Status, then Tools, then Regenerate shop thumbnails
- Raise the PHP memory limit if thumbnails are missing
- Clear caching plugin, then CDN, then browser, in that order
- Deactivate image plugins one at a time
- Test with a default theme
- For variations, confirm each has an image assigned
Stopping it happening again
A few habits prevent most of this.
Take a backup before any bulk image operation. Optimization plugins working across thousands of product photos is exactly when things go wrong, and it is the one scenario where recovery may not be possible.
Test image plugins on staging first. A plugin that mishandles your library is far cheaper to discover on a copy.
Run one lazy loader, not three. Check whether your theme and caching plugin already include it before adding another.
Check your images after every migration, SSL change, and CDN change. Load a few product pages and a category page. Two minutes now beats a customer telling you later.
Upload images in supported formats at sensible sizes. Our image guide for WordPress covers what to use and why, which also keeps your store loading quickly.
Key takeaways
Start with the new-tab test, because whether the image loads there tells you immediately whether you are dealing with a file problem or a page problem, and stops you working through fixes that cannot possibly apply. File-level causes are usually old URLs after a move, wrong permissions, missing thumbnail sizes, or a memory limit that quietly stopped thumbnails being generated at upload.
Page-level causes are usually mixed content after an SSL change, a stale cache, an image plugin, or a theme overriding WooCommerce templates. Use WooCommerce’s own Regenerate shop thumbnails tool rather than a generic plugin, since it handles the sizes your store actually uses. And treat variation images as their own system, because they are, and check first whether the image was ever assigned before assuming something is broken.
Frequently Asked Questions
Why are my WooCommerce product images not showing?
Usually either the file cannot be found, or the page cannot display it. Copy the image URL into a new browser tab: if it loads, the file is fine and your theme, a plugin or your cache is the cause. If it does not load, the problem is the file path, permissions, or a missing thumbnail size.
Why do images show in my Media Library but not on the product page?
The original image uploaded fine, but the smaller sizes your store needs were never generated, often because the server ran out of memory mid-upload. Raise your PHP memory limit to 256M in wp-config.php, then run WooCommerce, Status, Tools, Regenerate shop thumbnails.
How do I regenerate WooCommerce thumbnails?
Go to WooCommerce, then Status, then Tools, and run Regenerate shop thumbnails. This is different from the generic Regenerate Thumbnails plugin, and it handles the image sizes WooCommerce actually registers. On a large catalog it is resource-intensive, so run it during a quiet period.
Why did my images break after moving my site?
Your database still references the old domain, so every image URL points somewhere that no longer exists. Use a search and replace plugin to update the old URL to the new one across wp_posts and wp_postmeta, and confirm your site URLs under Settings, then General. Back up before running it.
Why is my variation image not changing when I select an option?
The image exists but the front-end script cannot match your selection. Regenerate shop thumbnails first, then check the browser console for JavaScript errors while clicking options. In some cases, products using local attributes rather than global ones break the matching, and converting to global attributes resolves it.
Can I get back images and an optimization plugin deleted?
Only from a backup. Some optimization plugins offer to delete original files after converting them, and if that goes wrong the originals are gone. This is why a full backup before any bulk image operation matters, and why testing such plugins on a staging copy first is worth the ten minutes.
Why are my images broken only on some pages?
Different templates request different image sizes, so a missing size breaks some layouts and not others. It can also be caching, where some pages are serving an older copy. Regenerate your shop thumbnails, then clear your caching plugin, CDN and browser in that order before retesting.
Why do WooCommerce product images return a 404 error?
A 404 means the browser requested an image file that does not exist at that URL. This commonly happens after migrations, image-size changes, deleted thumbnails, or incomplete CDN synchronization. Inspect the exact failed URL in DevTools, regenerate WooCommerce shop thumbnails if it is a missing generated size, and verify old domain references after migrations.
Why do WooCommerce images return 403 Forbidden?
A 403 means the file may exist but the request is being refused. Check wp-content/uploads ownership and permissions, hotlink-protection settings, CDN rules, security plugins, and firewall policies. If the issue started after a migration, ask your host to verify file ownership before recursively changing permissions yourself.
WooCommerce Product Images Still Not Showing?
If you have checked the image URLs, thumbnails, cache, plugins, theme, and server settings but product images are still missing, Survyc can trace the issue across WooCommerce, WordPress, your theme, CDN, image optimization setup, and hosting environment.
We can identify whether the failure is coming from missing files, broken responsive image sizes, server permissions, JavaScript, a theme override, or a third-party service and recommend the safest fix without making unnecessary changes to your live store.
Button: Fix My WooCommerce Images
