A user encountered an issue where product images stopped displaying after uploading a new image with updated alt text. The HTML showed style="display:none" being applied to the image element.
Root Cause Identified:
The Dawn 2.0 theme had been customized years ago with JavaScript logic that filters product variant images based on specific alt tag values. When the user changed the alt text on the newly uploaded image, it no longer matched the expected values required by this custom code.
Resolution:
The user discovered the custom JS logic controlling image visibility and adjusted the alt text values to align with the theme’s variant selection functionality. This allowed the images to render properly again.
Status: Resolved - the issue stemmed from custom theme modifications rather than a core theme problem.
I changed a product image, uploaded a smaller jpeg file, changed to semantic name and added alt text, and now the product image will not render and for some reason seems to have display: hidden css added to the tag.
See the missing image space, on this product url; https://forhm.com/products/placemat-set-2-butterfly-characters?variant=42089028878575
Can someone please advise what’s going on here?
Here’s the html
What do you mean by images whose html tag contains the tag style=“display: none”.
In my opinion, it is because of your setup that images corresponding to each variant of your product appear
The problem here was due to my theme having been updated years ago with code to enable the product variant selection buttons to show only certain images with alt tag values that correspond to the product variant featured image’s tag value. I’d changed the tag value of a newly uploaded image without realising that there was logic built into the JS which required a certain alt text value in order to render the image.
Thanks for the reply and help BSS-Commerce. I found the problem and detailed it in my other reply to this post.
