Product Main Image Width is set to 800 but no image is displayed

Customizing in Woocommerce’s theme settings ▸ WooCommerce
Product Images, I set the Main image Width to 800, but it does not display properly on the web page.

According to Chrome it’s caused by the loss of the 800×800 thumbnail, but I’ve also checked other sites, and other sites don’t directly use the 800×800 thumbnail, but directly use the full-size original image, so what can I do to fix this problem? In order to reduce the capacity of WordPress disk usage, I disabled the thumbnail generation of Woocommerce_single (800×0), and hope that the stores are directly using the original product images.

Translated with DeepL.com (free version)

Attachments:

You must be logged in to view attached files.

Hello,

Please check how it works with the default WordPress theme and Woocommerce Storefront theme just to check whether the issue is with our theme or not. Also, please check the site with our theme but only with the theme default plugins activate, and deactivate all the 3rd party plugins from the site.

If it works fine with the default WordPress theme then provide the admin panel login details of the website to check it myself and help you out accordingly.

Best Regards

1.I want to know how to remove the text attached to the Wishlist button on the way and just keep the button

2.I have provided the website administrator login information in the private content of the last Topic.

Attachments:

You must be logged in to view attached files.

I think the product image display is a theme problem. When I used the Layout function of your theme to create the Product archive Layout, I set the product image to Thumbnail, but the Thumbnail image was not displayed on the mobile phone. I installed Woodmart on both Tested on the theme’s website, one displays a 700×700 image, and the other displays the original product image.
But the strange thing is that if it is on the computer, the size of the product image is displayed as Thumbnail

Attachments:

You must be logged in to view attached files.

Hello,

1. The wishlist text is showing because of the custom CSS code you have added in the Theme Settings >> Custom CSS >> Global CSS section: https://ibb.co/b1BvP3f

2. I will forward this image-related issue to the lead developer and let you know the solution ASAP.

Best Regards.

Have you found the cause and solution for the picture problem?

Hello,

At the moment, I haven’t found any issue with the images, but based on your screenshots, it seems the problem is related to a missing required image size in the settings. The server does not have an image with the specified size.
To resolve this issue, use the Regenerate Thumbnails plugin to regenerate your image sizes. Make sure that the Skip regenerating existing correctly sized thumbnails option is disabled during the process. https://monosnap.com/file/mawGMlnYmgEuOTGT85tAog5wy7Ac01

Best Regards.

The description of my problem is very clear, I use your Layout function to set the display of the image is Thumbnail format, but in the actual display is not Thumbnail format thumbnails, please check my description and images carefully!

And I’m 100% sure the images in thumbnail format exist, I set the thumbnail size to 300×300, you can check the 300×300 size of any image on my site and I’m pretty sure it exists. And the problem now is that it can be displayed normally on computer, on mobile it is not.

Hello,

As we mentioned in the previous message, the images are not being displayed because the specified size (e.g., 768×768) is added in the image settings, but an image with this size does not exist on the server. Here is a URL to confirm this:
https://kitscity.com/wp-content/uploads/2024/11/202410170550281-768×768.jpg.

However, the original image is available on your server:
https://kitscity.com/wp-content/uploads/2024/11/202410170550281.jpg.

To fix this issue, you need to run Regenerate Thumbnails, as we mentioned in the previous message.

Best Regards.

I have already mentioned in my previous description that I created Product Archive Layout using your Layout feature and WPBakery plugin and have set the image size of Archive Product to thumbnail, why this setting didn’t work when the thumbnail size is 300×300, not 768×768, you can check my WordPress image size settings.
Please check my settings carefully again

Attachments:

You must be logged in to view attached files.

Hello,

Loading a 768×768 image on mobile devices and a 300×300 image on desktops is entirely correct behavior driven by how browsers handle the srcset attribute.

On mobile devices with high pixel density (e.g., 2x or higher), the browser selects an image that provides the best quality. Even though the element size in the code is set to 300×300, high-density screens require an image with larger physical dimensions. In this case, the 768×768 image is the closest optimal option, ensuring clarity without losing quality.

On desktops, where pixel density is typically standard (1x), the browser loads a 300×300 image, as it matches the element’s size on the page. This conserves resources and ensures fast loading without quality loss.

To ensure proper image display, you need to run Regenerate Thumbnails to generate the missing images with the required sizes.

Best Regards.

So you mean you can’t set a specific loading image size for mobile devices? Is it possible to set it to just load the original product image in the case of a missing 768×768 image?

I have another question, since I have already cropped and optimized for the image while uploading the product image, so I want to display the original image directly on Woocommerce, how can I set it so that I can disable the Main image Width feature and use the original image directly, this option comes after installing Woodmart.

Attachments:

You must be logged in to view attached files.

Hello,

1. As mentioned in our previous message, the 768×768 image is loaded because the specified size is 300×300, and for mobile devices, the browser loads a 2x size. The closest available size is 768×768. If you do not like this behavior, we can provide you with code that disables srcset functionality, ensuring that only the specified size is always loaded:

add_action('init', function () {
  add_filter('wp_calculate_image_srcset', '__return_empty_array');
  add_filter('wp_calculate_image_sizes', '__return_empty_array');
}, 100);

2. This is WooCommerce functionality, and our theme does not include options to disable the Main Image Width.

Best Regards.

Thank you for your reply. Where can I put this code to take effect?

Hello,

You should add this code to the child theme’s functions.php file.

Best Regards.

[Author]

Posts