When WooCommerce product images disappear, the original file is not always the problem. An image can be visible in the Media Library but fail on the shop page because its thumbnail is missing, its URL is incorrect, or a theme, CDN, or optimization plugin is rewriting the request.
The quickest way to find the cause is to test the problem in a private browser window, inspect the failed image request, and then work through the likely causes in order. This guide covers thumbnail regeneration, media URLs, theme templates, lazy loading, image optimization, caching, permissions, and plugin conflicts. If the issue affects a live store and needs careful diagnosis, you can also hire me for WordPress maintenance and troubleshooting.
Identify the Type of Image Failure
Start with an affected product page. Check the shop archive, product category pages, and single-product page on both desktop and mobile. Use a private or incognito window so that you are not relying on an administrator-only cache or session.
Next, right-click the missing image, select Inspect, and review the image element, Network panel, and browser Console. The result often points directly to the source:
- 404 error: The requested file or thumbnail does not exist at that URL.
- 403 error: A permission setting, firewall, hotlink rule, or CDN policy may be blocking access.
- No image request: A theme template, page builder, or JavaScript error may be preventing the image markup from being rendered.
- Image appears after scrolling: Lazy loading or JavaScript optimization is a likely suspect.
- Images fail only in grids: The shop thumbnail size may be missing or the archive template may be overriding WooCommerce output.
Regenerate WooCommerce Thumbnail Sizes
WooCommerce uses multiple image sizes for shop grids, category archives, product galleries, widgets, and related products. If you changed themes, imported products, or altered image settings, older uploads may not have the sizes your current layout requests.
Before making changes, create a current backup. Then open WooCommerce > Status > Tools and look for the thumbnail regeneration tool. Depending on your WooCommerce version, it may be called Regenerate shop thumbnails or use similar wording. Start the process and allow it to finish.
If the built-in tool is not available, use a reputable thumbnail regeneration plugin from the WordPress Plugin Directory. Check available hosting storage first: regeneration can create several additional files for every product image.
Once the process is complete, clear your WordPress page cache, browser cache, CDN cache, and image-optimization cache. Test an older product and a recently added product. If newer images work but older ones do not, missing thumbnail files or an earlier migration issue is a reasonable place to focus.
Verify the Media Library and Image URLs
Open Media > Library and select an affected image. Use the file link to confirm that the original image opens directly. If it does not, the file may have been deleted, moved, or blocked by the server. Upload a replacement and assign it to the product if necessary.
Compare a working image URL with a broken one. Check for:
- An old staging domain, subdomain, or development URL
- An
http://image URL on an HTTPS website - Different filename capitalization on case-sensitive hosting
- Outdated upload paths after a site migration
- A CDN URL for a file that was never synchronized
If the site was migrated, use a migration-aware tool or a carefully tested database search-and-replace process to update old URLs. Do not run an untested SQL replacement: WordPress data can include serialized values, and a mistake may damage settings or content. For HTTPS-related failures, see this guide to fixing WordPress mixed content warnings.
Check Theme Templates and WooCommerce Overrides
The active theme, child theme, or page-builder template may be replacing WooCommerce’s normal product image markup. Visit WooCommerce > Status and review the template section for outdated overrides. An outdated file may not produce a visible error, but it can still conflict with the current WooCommerce output.
On a staging site, temporarily switch to a standard WooCommerce-compatible theme, such as a default WordPress theme. If the images reappear, the original theme, child theme, or a custom archive template is probably involved.
Review custom product archive, single-product, and content-product files. Do not edit WooCommerce plugin files directly, because those changes will be lost during an update. Instead, update the child-theme override or have a developer compare it with the current WooCommerce template structure. AI can help organize plugin-conflict testing, but proposed code changes still need human review and testing.
Test Lazy Loading and JavaScript Optimization
Lazy loading can improve page performance, but an optimization plugin, CDN, or theme script may delay an image incorrectly. Problems are especially likely when a system moves the real URL into a custom data-src attribute or combines and defers the JavaScript responsible for loading it.
Temporarily disable lazy loading and JavaScript optimization in your caching or performance plugin. Purge every relevant cache, then test the page in a private browser window. If the images return, restore features one at a time until the conflicting setting becomes clear.
Inspect the page source and Network panel as well. If the image URL exists in the HTML but the image appears only when JavaScript runs, the lazy-loading script or its configuration needs attention. Rather than disabling every performance feature permanently, exclude WooCommerce product-gallery and shop-grid images from the specific setting that causes the failure.
For related performance issues, review how to fix slow WordPress front-end loading.
Review Image Optimization and WebP Settings
Image optimization plugins may replace original files, generate WebP or AVIF versions, rewrite URLs, or serve files through a CDN. If conversion or synchronization fails, the browser may request an optimized file that is not available.
Open the optimization plugin’s settings and check the processing status of an affected image. Reprocess one test image instead of the entire Media Library. If WebP or AVIF delivery is enabled, temporarily serve the original JPEG or PNG and test again.
Also confirm that the server supports the selected format and that the optimization plugin can write to the uploads directory. Keep original images until the optimized versions have been tested on product pages, archives, mobile layouts, and relevant browsers. A recent backup is important before any bulk optimization or cleanup operation.
Rule Out Plugin Conflicts Without Disrupting Shoppers
On staging, deactivate nonessential plugins and test the affected product page. If the images return, reactivate plugins one at a time. Pay particular attention to caching, CDN, image optimization, security, page-builder, product-filter, and gallery plugins.
When staging is unavailable, use a troubleshooting-mode plugin that changes activation only for your logged-in session. That lets you test combinations without showing visitors a broken storefront. Keep a written record of each change so the original configuration can be restored accurately.
Check File Permissions, CDN Rules, and Server Blocks
Image files in the uploads directory must be readable by the web server. Incorrect permissions, hotlink protection, firewall rules, or a restrictive CDN access policy can all prevent product images from loading.
Ask your hosting provider to check the uploads directory, recent server errors, and CDN logs. Avoid changing permissions broadly or making the uploads directory executable or world-writable as a quick fix. Those changes can introduce security problems without resolving the underlying issue.
If the diagnosis involves PHP, custom WooCommerce templates, CDN configuration, or a custom diagnostic plugin, hire me as a full-stack WordPress developer to investigate the problem with a documented process.
A Practical Troubleshooting Order
For most stores, this sequence keeps the investigation focused:
- Test the page while logged out and inspect the browser error.
- Confirm that the original image opens from the Media Library.
- Regenerate WooCommerce thumbnails and clear all caches.
- Compare working and broken image URLs.
- Test a default theme on staging.
- Disable lazy loading, image rewriting, and JavaScript optimization temporarily.
- Test image optimization and CDN delivery with one product image.
- Deactivate plugins individually and review server permissions or logs.
Frequently Asked Questions
Why do product images show in the Media Library but not on the shop page?
The original file may be healthy while the required thumbnail is missing, the theme template is broken, or an optimization layer is rewriting the shop-grid URL. Regenerate thumbnails and test with a default theme on staging.
Will regenerating thumbnails delete the original images?
A standard regeneration process creates image sizes from the existing originals. Make a backup first, and avoid tools that automatically delete files unless you understand exactly what they remove.
Why do images appear only after I scroll?
This commonly indicates a lazy-loading or JavaScript optimization problem. Disable those features temporarily, clear caches, and exclude WooCommerce product images from the setting that conflicts.
Should every product image be converted to WebP or AVIF?
Not necessarily. These formats can reduce file size, but delivery must work with your theme, CDN, optimization plugin, and intended browser support. Keep reliable originals and change one delivery setting at a time.
Conclusion
Missing WooCommerce product images are easier to fix when you separate the possible layers: the original file, generated thumbnails, image URL, theme markup, JavaScript, optimization service, cache, and server access. Start with the browser error, make one controlled change at a time, and test on staging whenever possible. Keep backups before changing database URLs, regenerating files, or running bulk optimization. If the store is revenue-critical, hire me to troubleshoot and maintain your WordPress site with a documented, low-risk process.