Hi @mattheus ,
Thanks so much for reaching out, and I really appreciate the clear explanation of what you’re running into.
It sounds like you’re dealing with a noticeable Cumulative Layout Shift (CLS) on your shop and category pages, especially when using externally hosted product images along with lazy loading. Those layout jumps can be super frustrating, especially when you’ve already tried a workaround using getimagesize() to set image heights dynamically, only to run into performance issues with a large catalog.
You’re absolutely right that missing width and height attributes in <img> tags can cause these layout shifts, which impacts your Core Web Vitals. That’s a particularly tough nut to crack with externally hosted images since WordPress and WooCommerce don’t have the same level of control or optimization options as they do for locally hosted ones. And using getimagesize() to pull those attributes dynamically does become a heavy process when scaled up.
In that case, try disabling lazy loading for above-the-fold images and any CDN you might be using, then check if the issue persists. This will ensure the images load directly from your website’s server. If that resolves the issue, you may want to consult a developer for a more permanent solution to handle these kinds of image-related problems.
Please note that our support is limited to the core WooCommerce plugin, and we’re unable to assist with modifications involving custom code or third-party plugins. For more advanced customizations, I’d recommend reaching out to Codeable or a Certified WooExpert, who can help tailor the solution to your site.
I hope this helps point you in the right direction.
Thread Starter
Mati
(@mattheus)
Thanks for the reply! Just to clarify:
This issue concerns externally linked product images (e.g. from a dropshipping plugin). WooCommerce adds a width attribute to the <img> tag, but does not include a height attribute.
This has nothing to do with lazy loading — the problem is simply that WooCommerce omits the height attribute in the image HTML for external images. As a result, it causes layout shifts (CLS) when the image loads, which negatively affects Core Web Vitals and PageSpeed scores.
My request: could WooCommerce add support for this — either by including a default/fallback height or by providing a filter so developers can handle this cleanly, without needing heavy PHP solutions like getimagesize()?
Thread Starter
Mati
(@mattheus)
Update:
In the meantime, I’ve implemented a working workaround using the woocommerce_product_get_image filter. The solution uses getimagesize() to retrieve the actual height of external images and stores the result in a transient cache to avoid performance issues.
Here’s a simplified version of the code:
add_filter('woocommerce_product_get_image', function($html, $product, $size, $attr, $placeholder, $image) {
if (strpos($html, 'src="http') !== false && strpos($html, 'height=') === false) {
preg_match('/src="([^"]+)"/', $html, $match);
if (!empty($match[1])) {
$src = $match[1];
$cache_key = 'img_height_' . md5($src);
$height = get_transient($cache_key);
if ($height === false) {
$image_info = @getimagesize($src);
$height = $image_info[1] ?? 300;
set_transient($cache_key, $height, WEEK_IN_SECONDS);
}
$html = str_replace('<img', '<img height="' . intval($height) . '"', $html);
}
}
return $html;
}, 10, 6);
This resolves the CLS issue and works reliably — but ideally, this shouldn’t require such a custom solution.
✅ Where the issue lies (core logic):
- WooCommerce’s
$product->get_image() method ultimately renders the <img> tag.
- When the image is externally hosted, it’s not treated as a WordPress attachment — so
wp_get_attachment_image() is bypassed.
- As a result, no
height attribute is included in the output, only width.
Since WooCommerce already includes width, it would be logical to also allow setting a height — either dynamically or via a filter — to prevent layout shift.
Can you fix this in a update?
Hi @mattheus,
Thank you for the clarification. The reason my colleague suggested disabling lazy loading is because you mentioned that “The issue occurs specifically when product images are linked externally (remote URLs). In these cases, WooCommerce outputs <img> tags without a height attribute, especially when lazy loading is enabled.” This indicates that lazy loading may be contributing to the issue as you mentioned
To investigate further, please create a staging version of your site. On the staging site, deactivate all plugins except WooCommerce and switch your theme to Storefront. Then, share the staging site link along with the system status report (from WooCommerce > Status > Get Report > Copy for Support) so we can test it on our end.
After testing, we’ll be able to confirm whether this should be reported for further investigation and potential inclusion in a future update.
Looking forward to your response.
