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

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

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.

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.

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.

Hello,

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

Best Regards.