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!
Kendra says
This is great, thanks! And I love that Simply Show Hooks plugin, so helpful.
Is it possible to have the images open in a lightbox, rather than link to the single product page? We’re using this on a site that doesn’t allow access to the single product pages, all shopping is done on the product page itself, so it’s the only place to view the thumbnail gallery images.
Frank Schrijvers says
Hi Kendra, I think it’s possible to open the images with a lightbox. You can have a look at Featherlight. This is a lightweight jQuery lightbox solution and not that difficult to integrate in your code.
Kendra says
Thanks, I’ll look into Featherlight. What I’m noticing though is that when using this code to add the gallery to the shop page, that it’s linking those images to the product’s page, not to the actual images. I think that would need to be fixed first, before a lightbox could be integrated. What needs to be changed in the code to link the images to themselves, not the product page?
Kendra says
Ok, on further inspection, I realized I was wrong. Ignore that last message 🙂 My problem is due to CSS positioning and z-index issues.
Frank Schrijvers says
Good to hear, a z-index issue is a lot easier to solve 🙂
jean-christophe says
Simple question… what if i want to apply taht script to all parts of the woocomerce… cart, checkout page an so on?
Frank Schrijvers says
Hey Jean-Christophe,
If you want to apply the gallery thumbs to other pages then the shop page you have to change or add some conditional tags. For all available WooCommerce conditional tags please have a look at this page: https://docs.woocommerce.com/document/conditional-tags/
shima says
hi, great.
I used above code, but when I click on the picture, I saw a black pop up that want to load an image, but it can’t.
I don’t know where can I attach the screenshot to show you a page.
can you help me to solve it?
thank you.
Frank Schrijvers says
Hey Shima,
I cannot help you solving this but maybe your theme uses a quickview option or a lightbox to show the images?
Frank