A missing product image can make a good store look unfinished in seconds. If your WooCommerce product images won’t display, the problem is usually fixable without rebuilding your product pages or installing a pile of plugins.
Start with the symptom, then fix the right layer. A blank gallery, blurry shop thumbnail, missing mobile image, and broken image link don’t have the same cause. Let’s get your storefront looking sharp again.
Key Takeaways
- WooCommerce uses different image sizes for product pages, shop grids, and gallery thumbnails.
- Check that each product has a featured image, then confirm its gallery images are attached correctly.
- Change image dimensions before regenerating thumbnails, not after.
- Classic themes use the WooCommerce Customizer. Block themes often use the Site Editor and Product Gallery block instead.
- Upload square source images of at least 800 by 800 pixels for a reliable starting point.
- If pages remain slow after image fixes, your hosting environment may be the bottleneck.
Identify Where the Image Disappears First
Don’t troubleshoot blind. Open the affected product in an incognito browser window, then test it in a second browser or on another device.
Compare the product page, shop page, category page, cart, and mobile view. Check whether the gallery remains visible and usable in a mobile friendly layout.
If an image appears after a delay, note that separately from a missing file, wrong crop, or blank space. These symptoms point to different causes.
For more detail, open your browser’s developer tools and select the Network tab. Look for image requests returning 404, 403, or mixed-content errors. Check the Console for blocked resources or JavaScript errors. Record the failing image URL before changing any settings.
WooCommerce creates and uses different image versions in different places. One version can fail while the original image still looks fine elsewhere.
Product pages, shop grids, and thumbnail strips
WooCommerce has three main image contexts:
| Image type | Where you see it | Default WooCommerce behavior |
|---|---|---|
| Single product image | Main image on an individual product page | Uncropped, 600 pixels wide by default |
| Catalog images | Shop and category grids | Cropped square image, 300 pixels wide by default |
| Gallery thumbnails | Small gallery navigation images | Square cropped, 100 by 100 pixels by default |
The developer documentation identifies these registered sizes as woocommerce_single, woocommerce_thumbnail, and woocommerce_gallery_thumbnail. Shop and category grids request generated product thumbnail images instead of the original upload.
Your theme can apply a different thumbnail style, including square, cropped, or uncropped displays. That difference explains why a clean source photo may still look wrong on the front end.
If the main image displays but the shop grid shows blank spaces, focus on the catalog thumbnails. If the product gallery thumbnails are missing, check the product gallery and its generated files.
If the original file works but generated catalog or gallery files don’t, regenerate thumbnails after confirming the source image and dimensions.
Blank, blurry, cropped, or hidden?
A broken image icon usually points to a missing file, a wrong image URL, mixed-content trouble after enabling SSL, or a security rule blocking image requests.
A blank area with no icon often points to theme CSS, a page builder template, or a gallery setting that hides the image.
A blurry image is different. WooCommerce notes that blurry product images often happen when a theme renders an image at dimensions that don’t match the uploaded file. Don’t re-upload the same small image and hope for magic. Check dimensions first.
A cropped image usually points to the selected display size or thumbnail style, rather than a missing upload. A delayed image can indicate lazy loading, a slow image request, or a JavaScript conflict.
A thumbnail regeneration job creates new versions of the image. It cannot add detail that was never present in a low-resolution original.
Confirm the Product Image Is Assigned Correctly
Before touching theme settings, inspect the product itself. This is the fastest fix, and it catches more errors than most store owners expect.
Go to Products > All Products, edit the affected item, and check the product data area and right sidebar. Confirm the images, update the product, and test the storefront again before changing theme or server settings.
Set the featured image and gallery
Every product needs a featured image. This is usually the main single product image and the image WooCommerce uses in catalog views.
In the Product image panel, add or replace the featured image. Then use the Product gallery panel for extra angles, close-ups, packaging shots, and detail images.
WooCommerce’s product image and gallery instructions show the same workflow: select images from the Media Library or upload new files, then save the product. WooCommerce recommends source images of at least 800 by 800 pixels.
If an image appears in the Media Library but not on the product, it may simply not be assigned to that product. Reattach it, update the product, and refresh the storefront.
For variable products, check the variation images too. Confirm each relevant variation has an image assigned and that selecting a variation changes the displayed image.
Check the Media Library file itself
Open the image attachment in the WordPress Media Library. Test its direct URL in a new browser tab and confirm the file extension matches the uploaded image.
A 404 error usually means the file is missing or its path is incorrect. A 403 error means the server is refusing access, often because of permissions or security rules. Restore a missing file from a backup or upload it again, and create a backup before restoring files or making server-level changes.
Keep filenames simple, such as blue-leather-wallet.jpg. Avoid unusual symbols, long strings of copied text, and spaces when possible.
If the URL and re-upload checks don’t solve a 403 error, don’t make broad permission changes yourself. Ask your host or administrator to verify that the uploads directory is readable by the web server.
If you recently moved your site to HTTPS, inspect the image URL. A page loading through HTTPS should also load its images through HTTPS. Browsers may block insecure image calls or display warning behavior when a store mixes secure and insecure assets.
After replacing or restoring a missing file, clear your page cache and CDN cache. Then test the page in a private browser window so an old broken URL isn’t being served.
Fix WooCommerce Product Images With the Right Size Settings in the WooCommerce customizer
Image settings aren’t one-size-fits-all. A clean square crop can work beautifully for a clothing catalog and look awful for a wide sofa, book cover, or landscape print. Consider your source photography and its image aspect ratio before choosing a fixed crop.
The WooCommerce customizer helps match those source images to the layout customers see.
Use the WooCommerce Customizer in classic themes
In classic themes, open the WooCommerce customizer through Appearance > Customize > WooCommerce > Product Images.
Before changing global image settings or regenerating files, create a backup or test the changes on staging. Then review these controls:
- Main image width
- Thumbnail width
- Thumbnail cropping, including 1:1, custom ratio, or uncropped
The thumbnail width and crop settings affect generated product gallery thumbnails. These settings mainly affect catalog images, not the single product image in the same way. Don’t chase them if only the main product display is missing or incorrect.
Choose 1:1 when your catalog uses consistently square product photos. Choose Custom for a fixed portrait or landscape shape, such as a custom aspect ratio. A fixed crop can distort products with a very wide or tall image aspect ratio. Select Uncropped when preserving every edge matters more than a neat, uniform grid of uncropped images. This thumbnail style should match your products and grid layout.
Set the main image width and thumbnail width first, then choose the crop mode. Save those settings before starting regeneration.
For sharper retina screens, WooCommerce recommends thumbnails that are roughly double the width your theme displays. If your grid layout displays images at 300 pixels, start with a 600-pixel thumbnail width.
Regenerate thumbnails after changes
Changing dimensions or cropping doesn’t rewrite image files that WordPress already generated. Regeneration also can’t restore detail missing from a low-resolution original.
After saving the new settings, go to WooCommerce > Status > Tools. Find Regenerate shop thumbnails and select Regenerate.
WooCommerce’s blurry image troubleshooting guide confirms this is the correct location for regeneration. Let the task finish before checking the shop page again.
The WooCommerce customizer isn’t available in many block themes. If your catalog still looks wrong, back up the site and temporarily switch to a default WooCommerce-compatible theme. If the issue disappears, investigate your active theme’s CSS or templates instead of deleting product media.
Find Missing Settings in Block Themes
Can’t find Product Images in the WooCommerce customizer? You’re not stuck. Your site may use a modern block theme, where product templates live in the Site Editor instead.
Block themes may not expose the same controls in the WooCommerce customizer. The controls moved, not because WooCommerce removed your gallery.
Edit the Single Product template
Go to Appearance > Editor, then open Templates and select the Single Product template. Look for the Product Gallery block.
First, confirm the block exists and the template is saved. Check that the block is visible and has usable width and height. A collapsed container can make correctly assigned images appear missing.
Review the block’s display settings before testing plugins. Check the product gallery slider, product gallery thumbnails, thumbnail style, and horizontal navigation. Then review the image zoom settings and lightbox mode.
An autoplay slider can hide an image or move past it quickly, so disable autoplay while diagnosing the problem. If you use a product video gallery, temporarily remove or disable the video while testing. Extra gallery items can affect slider behavior.
This block controls the gallery placement and presentation on product pages. You can adjust its layout without editing code or altering every product individually.
WooCommerce’s Product Gallery block documentation covers the available gallery controls. Its documented defaults include square thumbnails at 25% of the main product image size.
If the gallery block is missing, it may have been removed from a custom template. Create a backup or staging copy, add the block back, save the template, then test a product with a featured image and multiple gallery images.
Watch for template and plugin conflicts
A custom product page design, page builder, custom child theme, or product template plugin can replace WooCommerce’s default gallery markup. This can leave you with a blank gallery even when product images are correctly assigned.
Test changes from safest to most advanced:
- Confirm the Product Gallery block exists, is visible, and is saved.
- Check the block’s dimensions, slider, thumbnail, zoom, lightbox, and autoplay settings.
- Clear page, browser, and CDN caches before testing again.
- Preview the product with a default WooCommerce theme.
- Disable gallery, slider, page-builder, and optimization plugins one at a time.
- Check custom CSS for rules such as
display: none,overflow: hidden, zero width, or zero height. - Check the browser console for JavaScript errors that prevent the slider from initializing.
Don’t delete product images while testing. The product data is usually fine. The display layer is where the trouble lives.
Keep Image Quality High Without Slowing the Store
Large source files protect image quality, but oversized uploads can slow product pages. Image optimization balances sharp dimensions, suitable formats, and practical compression.
You need enough pixels for clean zooming and responsive layouts. The delivered file should still be compact enough for mobile visitors.
Oversized gallery assets can reduce page speed, especially on mobile, where product images often make up most of the page weight.
Start with a strong source image
Use at least 800 by 800 pixels for square WooCommerce product images. For products that need a larger gallery view, upload a larger original when it stays visually clean and reasonably compressed.
Keep your product photography consistent. Use the same background, camera angle, and crop style across a category whenever possible. A uniform catalog looks more trustworthy and makes your store easier to scan.
Avoid stretching a small source image to fit a large image area. WordPress can make images smaller. It can’t create the product detail that a tiny original doesn’t have.
Compress before you upload
Resize and compress product photos before adding them to WordPress. Use modern image formats when your theme and browser workflow support them.
Compare the image at its rendered product-page dimensions, not only at 100% zoom on your computer. Check the compressed image file size while confirming that important product details remain clear.
Lazy loading is useful for gallery items below the fold, since those images don’t need to load immediately. WordPress has used native lazy loading for images since version 5.5, as explained in the official WordPress lazy-loading update.
Lazy loading can’t repair a missing file or a CSS-hidden gallery. It also shouldn’t delay the main above-the-fold image, and it won’t fix an oversized hero image.
For more practical checks around caching, scripts, and slow server responses, use our guide on how to speed up WordPress. Image compression helps with file delivery, but it doesn’t resolve every server performance problem.
Rule Out a Hosting Problem
Only move to hosting diagnostics after confirming the product assignment, image settings, regeneration, theme and plugin tests, and cache clearing. If images still fail or load late, the problem may sit outside WooCommerce.
Start with these checks:
- Open the failed image URL in your browser and note its HTTP status.
- Review your web server or hosting error logs for failed requests.
- Test the original media URL separately from the CDN URL.
- Ask your host to check PHP memory, image-processing limits, disk space, and access to the uploads directory.
Intermittent failures during traffic spikes can point to resource limits rather than a product image setting. If a CDN serves a stale or blocked asset, purge only the affected cache, or ask the provider to invalidate it. Then retest in an incognito browser.
Don’t edit server permissions, PHP limits, or CDN origin rules without a backup and hosting support. These changes can break uploads or other parts of your store.
A solid store setup needs current PHP, HTTPS, enough WordPress memory, caching support, automatic backups, and room to grow when traffic spikes. Our WooCommerce hosting checklist breaks down what to look for before a slow store starts costing sales.
ZADiC managed WordPress hosting gives small businesses a more dependable base with support, backups, security monitoring, and performance-focused tools. Your product photos should help sell. They shouldn’t become another technical fire to put out.
FAQ
Why do product images show on the product page but not the shop page?
The product page may load the original product image, while the shop page uses generated catalog thumbnails. Gallery files can also use separate sizes and crops. Check the image dimensions first, then regenerate thumbnails after changing them or replacing the source file.
Can a product have more than one image?
Yes. One featured image serves as the single product image, while additional files belong in the Product gallery panel. Add photos that show the color, texture, size, and important details.
Why are product images missing only on mobile?
Test the page in an incognito window to rule out a browser cache issue. Then inspect the mobile layout for hidden containers or elements with zero height. Clear your page and CDN caches after changing the template.
Why did product images disappear after an HTTPS migration?
Open an image URL directly with HTTPS and inspect the page for mixed-content warnings. If the image returns a 403 error or permission error, contact your host and ask them to check file access and server rules.
Get Product Images Back to Work
Missing product photos usually trace to a clear troubleshooting order: confirm assignment, check image settings, regenerate thumbnails, then investigate display conflicts. Clear caching or CDN issues and rule out hosting problems before testing the product page, catalog grid, and mobile layout again.
A clear, fast WooCommerce product image setup supports consistent product photography and reliable image delivery, both of which support store conversions. Sharp photos, reliable hosting, and a gallery that loads when it should keep your store moving in the right direction.
