In this tutorial, I explain how you can add thumbnails of the images in the product gallery to the products on the shop page. See the screenshot below for an example.
Step 1: Set the product gallery
When including a new product, you need to add a product image and additional images to the product gallery.
When creating a new product, on the right side under Product Gallery you can add images to the gallery. Add images and save the product.
The code in this tutorial show on the shop page maximum three thumbnails per product. These thumbnails are the first three images of the product gallery.
Step 2: Add the code to the functions.php
Add the following code to the functions.php of your theme.
This code snippet positions the extra thumbnails directly before the product title. I’ve used the hook woocommerce_shop_loop_item_title with priority 5 for this (see line 2). The correct position depends on the theme you use. Try another hook if the thumbnails are out of position. A great tool to find the correct hook is the Simple Show Hooks plugin.
In this example, I only display the first three thumbnails. If you want to display a different number of thumbnails you need to adjust line 13. Change the number three to the number of your liking.
Step 3: Add CSS Styling
Once you have the thumbnails visible on the shop page, you need to style it. This is pretty obvious since you want to style the thumbnails to match your theme. To get you started, here are some basic styles rules which you can insert into your stylesheet.
Add the following to your style.css file:
If you change in the functions.php the number of thumbnails you want to display, you also need to change the CSS. That does make sense, doesn’t it?
I hope you find this tutorial helpful. If so, consider sharing it with your audience!