Oxygen Builder integrates seamlessly with WooCommerce, allowing designers to create custom product grids, single product pages, and checkout layouts. The Oxygen WooCommerce elements are powerful and flexible, offering complete control over how products are displayed throughout the online store. However, sometimes product grids show everything correctly except the product images, which appear as empty spaces or broken image icons that ruin the shopping experience.
This problem is especially frustrating because product images are arguably the most important element of any e-commerce website. Customers need to see what they are buying, and missing images will drive them away to competitors almost immediately. The product titles, prices, and add-to-cart buttons may all work perfectly, but without images, the entire grid becomes practically useless for selling products. Understanding why images disappear from Oxygen WooCommerce grids is essential for any store owner using this builder.
The most common cause of this problem is that WooCommerce thumbnails have not been regenerated after images were uploaded or after theme changes. Oxygen Builder relies on WordPress thumbnail sizes to display product images in grids, and if these thumbnails do not exist for certain images, the grid will show empty spaces. Another cause is that the image size settings in Oxygen’s WooCommerce product grid element may be misconfigured, requesting a thumbnail size that does not exist or has been deregistered by another plugin.
Why Oxygen Builder WooCommerce product grids show missing images
WooCommerce registers several image sizes specifically for product display, including shop_thumbnail, shop_catalog, and shop_single. Oxygen Builder’s product grid element uses these registered image sizes to display product images in grid layouts. If an image was uploaded before these thumbnail sizes were registered (which can happen when switching themes or installing WooCommerce after uploading products), the necessary thumbnails may not exist for that image. The grid then has no image to display, resulting in an empty space where the product photo should appear.
Another common cause is that an image optimization plugin has changed the image paths or converted images to WebP format without updating the thumbnail references. When the original image path changes, WooCommerce cannot find the image file, and the grid displays a broken image icon instead of the product photo. Similarly, CDN or lazy loading plugins can interfere with how images are loaded in product grids, causing them to fail to appear even though the image files exist on the server.
The Oxygen Builder product grid element also has its own image size settings that can override WooCommerce defaults. If the grid is configured to use a custom image size that has not been properly registered or does not exist, the image will not display. Additionally, the grid may be set to show only products from specific categories or with specific attributes, and if those products do not have featured images set, the grid will show empty spaces for those items.
How to check if WooCommerce thumbnails exist for product images
Go to the WordPress media library and find a product image that is missing from the Oxygen product grid. Click on the image to open the attachment details panel, and look for the file URL information. Then, manually navigate to the thumbnail versions of that image by adding common size suffixes like -150×150.jpg or -300×300.jpg to the filename. If these thumbnail files return 404 errors, the thumbnails have not been generated and need to be regenerated using a plugin or WP-CLI command.
Step by step guide to fixing Oxygen Builder product grid images
Follow these steps in order to restore missing product images in Oxygen Builder WooCommerce product grids. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Install and run the Regenerate Thumbnails plugin to generate all missing WooCommerce image sizes
- Check that each product has a featured image set in the product edit screen
- Verify that the image files actually exist on the server and are not corrupted
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Check the Oxygen product grid element settings for the correct image size selection
- Set the image size to “shop_catalog” or “woocommerce_thumbnail” instead of custom sizes
- Disable image optimization plugins temporarily to test if they cause the missing images
- Check that the WooCommerce image size settings are configured correctly under WooCommerce → Settings → Products → Display
- Update Oxygen Builder and WooCommerce to the latest versions available
- Recreate the product grid from scratch if the existing grid continues to have issues
How to regenerate WooCommerce thumbnails using WP-CLI
For large product catalogs with hundreds or thousands of products, using a plugin to regenerate thumbnails may time out. Instead, use WP-CLI by connecting to the server via SSH and running the following command: wp media regenerate --only-missing. This command regenerates only the missing thumbnails without reprocessing images that already have all required sizes. For even faster regeneration, run: wp media regenerate --image-size=woocommerce_thumbnail to regenerate only the specific WooCommerce thumbnail size needed for product grids.
Oxygen Builder WooCommerce product grid troubleshooting table
Here is a reference table for diagnosing product grid image problems in Oxygen Builder based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution |
|---|---|---|
| All product images missing from grid | Thumbnail sizes not registered or generated | Regenerate thumbnails and check WooCommerce image settings |
| Some products show images, others do not | Specific products missing featured images or thumbnails broken | Re-upload featured image for affected products and regenerate thumbnails |
| Images appear but are blurry or pixelated | Wrong image size selected in grid settings or thumbnail too small | Increase thumbnail size in WooCommerce settings and regenerate thumbnails |
| Images appear after page refresh but disappear later | Caching or CDN serving old versions of images | Clear CDN cache and exclude product images from aggressive caching |
For more information about Oxygen Builder WooCommerce integration, visit the Oxygen Builder page on wpwizzy.com.
Preventing Oxygen Builder product grid image problems in the future
Always regenerate thumbnails after switching themes or after changing WooCommerce image size settings, as these actions deregister existing thumbnail sizes and require regeneration. Set the WooCommerce thumbnail size to a reasonable dimension (like 300×300 pixels) that provides good quality without being too heavy for page load times. Use a staging website to test image optimization plugins before deploying them to the live store, as some plugins can break product images in Oxygen grids.
Regularly check product grids on the live website to catch missing images before customers notice them. Keep Oxygen Builder and WooCommerce updated to their latest versions to benefit from compatibility improvements and bug fixes. Consider using a CDN that caches images properly and serves them quickly without altering file paths, and always keep a backup of original product images in case thumbnail regeneration is needed after a problem occurs.