Rather than use the main product image as the thumbnail image on shop loop archives for categories and tags, this code enables you to use the 1st gallery image from the single product page gallery. If no gallery images exist, the main product image is used.
Demo Video
Shows the first gallery image added to the single product page displays on the product category archive replacing the main product image.
Code Installation
There’s only 1 step :
Copy and paste the code to the end of your child themes functions file or custom/functionality plugin.
How The Code Works
Let me explain the logic behind the modifications made to the WooCommerce product thumbnail function in this download folder :
1. Checking for Gallery Images :
The code checks if the product has gallery images. If gallery images are found, it enters a loop to handle each gallery image.
2. Getting Image URL and Srcset :
For each gallery image, it gets the image URL and the srcset attribute. This is important for responsive images.
3. Outputting Gallery Image with Link :
Each gallery image is then outputted inside an anchor (<a>) tag, linking to the product’s permalink. The src and srcset attributes are added to the image tag.
4. Fallback for Default Product Image :
If there are no gallery images, or if the loop completes, it falls back to the default behavior. For the default product image, it gets the image URL and srcset using similar functions as for the gallery images.
5. Outputting Default Product Image with Link :
The default product image is then outputted inside an anchor (<a>) tag, linking to the product’s permalink. The src and srcset attributes are added to the image tag.
6. Testing and Responsiveness :
The modification ensures that both gallery images and the default product image are responsive by including the srcset attribute, which provides different image sizes for different screen resolutions.
Was This Tutorial Helpful?