Product Image Gallery Thumbnails Appear Blurred on Click with Large Images
Summary:
A bug in the WooCommerce Product Image Gallery block causes the main product image to appear blurred when a gallery thumbnail is clicked. This issue specifically occurs when the uploaded product gallery images are of a larger dimension.
The problem is isolated to the direct display of the image upon click. The hover-to-zoom functionality correctly shows a sharp version of the same image, indicating that the high-resolution source file is available and functional. This suggests a problem with the image sizing or scaling script used for the initial display after a thumbnail click.
The bug was introduced in WooCommerce version 10.2.0 and persists in 10.2.1, as it is not present in version 10.1.2. This impacts the user experience by making product images look unprofessional and low-quality until the user hovers to zoom.
How to Replicate:
- Ensure the site's Single Product template uses the Product Image Gallery block.
- Create or edit a product and upload large, high-resolution images to its gallery.
- View the product page on the frontend.
- Click on a thumbnail in the gallery.
- Observe that the main image that loads appears blurred.
- Hover over the main image to activate the zoom; the image will then appear sharp and clear.