Update: Version 1.3.1 released on the 25th August 2020.
So, earlier this morning I found myself wishing that WooCommerce had the capability to use a product thumbnail when displaying a category link in situations where the category doesn’t have its own thumbnail defined.
I went on a bit of a hunt and found a couple of small plugins. One didn’t work at all, which I attribute mainly to it having not been updated for two years and much changing in both WordPress and WooCommerce since then, and another one that I found didn’t work until I made a couple of code changes – and had a couple of noteworthy problems;
- it would only fetch product thumbnails from that immediate category – not delving deeper down into the category tree and fetch product thumbnails from child categories, and
- it did no filtering for products that had no thumbnails set, so would in some cases return products that had no thumbnail
So, I’ve made my own. A zip download can be found below, you just need to drop the folder inside it into your wp-content/plugins folder and then activate the “WooCommerce Category Product Thumbnails” plugin.
I’m using WordPress 4.9.4 and WooCommerce 3.3.0 – please let me know in the comments if it doesn’t work on other versions.
Update version 1.1 – 23rd March 2018: Add option (found under WooCommerce -> Settings -> Products -> Auto Category Thumbnails) to change the image size used for the automatic thumbnails. By default it remains as “shop_thumbnail”, but you may find that “shop_catalog” is a better choice.
Download
Download the plugin from the WordPress Plugin Repository
Source
This plugin is open-source – view the source code on the GitHub repository.
Maria
Hello,I downloaded your plugin,but it shows only few category thumbnails. I have WP 4.9.3 and WooCommerce 3.3.1
Could you help me to fix this issue?
Thank you!
GazChap
Hi Maria – do you have a link to a URL that shows the problem please?
Maria
Sure,it happens in all cateogories.An exemple is here: http://eaglemegastore.it/categoria-prodotto/clickn-print/
Thank You!
Maria Novella
Did you have time to see the link?
gazchap
Yep, sorry for the delay. Went on that link and they all have thumbnails pulling through for me, though. Are they just standard products, or do you have other plugins that affect product images at all?
Maria Novella
Thank you for your reply!I use a plugin that add image from external url,so I don’t have images of products in my site,in media library,but the external link of the images.The plugin is “featured image from url” .That can affects the functionality of the plugin?
gazchap
It may be conflicting, yes – it depends how it stores the image information for WooCommerce to use. Are you using the premium version of that plugin?
Maria Novella
Yes,the premium version.For others reasons,I created again my catalog,and I noticed that the only cateogories without images are the categories that have products with the same images,like http://eaglemegastore.it/categoria-prodotto/naturasalute/ ,but maybe it’s just a randomness!
Maria Novella
No…it’s just a randomness! 🙁 http://eaglemegastore.it/categoria-prodotto/eagle-tech-ita/
gazchap
Sorry Maria, I’d need to see how the external images plugin stores the image data in order to help more with this 🙁
Maria Novella
I’m glad to tell you that with the last update of Woocommerce (3.3.3) the plugins works correctly.Awesome!
gazchap
Great stuff, thanks for letting me know Maria 🙂
Jem
Suggestion: allow the user to choose which size of image to use rather than defaulting to shop_thumbnail.
gazchap
Good idea! Done and updated.
Erik
I’m trying to accomplish the opposite. Make the product image use the category image. Is that possible? Any suggestions or links I could follow? Thanks!
gazchap
That should be possible, although I’m not aware of any links off the top of my head. A function called “woocommerce_template_loop_product_thumbnail” is hooked in the “woocommerce_before_shop_loop_item_title” action that you could remove and replace, similar to how my plugin works. The function essentially just calls the “woocommerce_get_product_thumbnail” function found here which looks simple enough to muck about with!
Allen
Does this change the image for all categories or only for categories without images? I just added a bunch of new categories and I don’t want to go through literally hundreds of categories and add new images, but I also cannot afford to have it remove the images from exiting categories.
The existing categories have specific images that need to remain. The new categories are actually subcategories of these existing categories. The images for these don’t matter as long as they match the product lines they pertain to. Your plugin sounds promising as long as it does not affect all the work I’ve already done and leaves existing images alone.
Allen
Ok I downloaded the plugin and looked at the code, it does appear to leave images already in place. It also appears that this doesn’t modify the database at all but only displays the thumbnails on the frontend. Is that correct?
Allen
Took a chance and added the plugin to my development site and activated it. I checked the backend and no changes were made. I checked the site and where the new categories were, that once displayed the placeholder image, there are now product image thumbnails. Perfect! You just saved me a ton of work that would have taken hours. I was looking at having to add images for almost 1000 categories.
THANK YOU!!!
gazchap
No problem Allen, glad that the plugin could be of assistance!
George Konstantinidis
Hi Gaz,
Following update to WP5, it seems your plugin suffers the same issue as the Woocommerce Auto… by Shelbot. It populates category thumbs with both the standard no image jobby and a random thumbnail.
Any ideas on what to tweak in the plugins code to fix this?
Thanks in advance.
gazchap
Hi George,
I’ve not seen this issue with WordPress 5.0 – I’ve just tried it on my test setup (WP 5.0 and WC 3.5.2) and everything functions as expected.
Could you send me a link to the website in question, please, either as a reply to this comment or by email.
GK
Email sent through the contact form. Thanks again.
Nigel
This is awesome, thank you. I modified it for my own needs, having it pick up to four images and displaying them all as the category image, and adjusting where they sit depending on how many there are.
I added
private $images_to_show = 4;
and replaced echo get_the_post_thumbnail… with this
if ($this->images_to_show === 1){
$products_to_show = [
$products[ array_rand( $products ) ],
];
}else{
shuffle($products);
$products_to_show = array_slice($products, 0, $this->images_to_show);
}
$count = count($products_to_show);
foreach ($products_to_show as $i => $product){
$class = ‘category-product-thumbnail-n-of-‘ . $count . ‘ category-product-thumbnail-‘ . ($i + 1) . ‘-of-‘ . $count;
echo get_the_post_thumbnail( $product->ID, $image_size, array( ‘class’ => $class ) );
}
and registered and enqueued the css, which is this
/* This CSS assumes category images should be same dimensions as product images*/
/* 1 image: nothing to do */
/* 2 images: Side by side in middle of square */
.woocommerce .products .product img.category-product-thumbnail-n-of-2{
width: 50%;
margin: 25% 0;
float: left;
}
/* 3 images: One on top, two underneath */
.woocommerce .products .product img.category-product-thumbnail-n-of-3{
width: 50%;
float: left;
}
.woocommerce .products .product img.category-product-thumbnail-1-of-3{
margin: 0 25%;
float: none;
}
/* 4 images: stacked two by two */
.woocommerce .products .product img.category-product-thumbnail-n-of-4{
width: 50%;
float: left;
}
gazchap
Thanks for the feedback Nigel, and great work on the modification! 🙂
Leandro Rocha
I tried the version from Nigel and seems not to be working.Anyone have the final code displaying multiple product images instead of just one?
HS
HI Gazchap, thanks for a great plugin, I have a page with 9000 categories and it works perfectly and has really been a big help. Well-deserved Donation is on the way.
I’m not a shark to code, so is it possible to make a version with the features Nigel has created?
Regards
gazchap
Hi HS – thanks for the great feedback and any donation that you send through 🙂 It should be possible for me to add some settings into the plugin to replicate the features that Nigel added to his copy, at the moment it’s a case of finding the time to do it justice! 🙂 Watch this space.
Ben Parker
I need this is in the reverse, I cant seem to find a plugin anywhere that will help me achieve it with my limited skills! Can this plugin do the reverse with some tweaking?
gazchap
Hi Ben – do you mean using category images for products inside the category? That should be doable, although if I was going to do it I’d do it as a separate plugin (I like to keep my plugins very well defined in terms of what they do)
The only caveat I suppose would be that as product URLs for WooCommerce don’t usually include category information, any product that is placed into more than one category would use the image from it’s primary category.
Bec
Hi your great plugin is not working with flatsome theme, any idea?
Thanks
joe
tnx works fine for me
Jure
Hey,
so I am testing this plugin and wondering where should this category thumbnails be seen ? When opening a category menu (where thumbnails of categories are shown which I have uploaded myself) ? Or when I open mypage.com/my-category and under description of this category should be thumbnail of category ?
I am using wodmart theme and have a lot of categories and this thumbnail would really make a difference, currently have last version of wordpress and wocoommerce.
Tnx.
imran
GAZ you are a hero and life saver.
gazchap
Hi Imran,
Thanks – glad you found the plugin useful! 🙂
Dave
Just found this plugin and it’s working fine with latest version of WP, incase is wondering.
WordPress 5.5.3
WooCommerce 4.7.1
StoreFront Theme
Thanks,
Nic
Still works. Thanks!
.
WooCommerce v4.8
Wordpress v5.6
Had issue with image quality so updated “shop_thumbnail” to “woocommerce_thumbnail” on line 80. Now uses image dimensions as specified in appearance –> customize –> WooCommerce –> Product Images.
Sam Hollis
It’s still working a treat. That has saved me hours of work. Thanks
MOHAMMAD SADIK ALNAJJAR
Hi
i have installed and activated the plugin but thumbnails has been still disappeared
paul
would love to have this working for the latest versions… doesn’t t seem to work at th emo
Lee
This still works however I have the subcategory image displayed and then the woocommerce-placeholder below that.
Can anyone tell me how to correctly remove the placeholder image please.
Many thanks in advance 🙂
Peter
Super-useful plugin Gaz, thank you.
Rather than displaying a random product image when a category loads (which changes on each load), it it possible to assign an image permanently to a category? It can be an any image from within the category products, but a fixed image would be super.
Glen Turvey
Great plug in Gaz! Much needed functionality well executed. Thanks again!
Arbnor
Awesome, thank you so much.
Arbnor
How about getting product image order by last product published for that category?
Craig McKee
Hi Gaz,
Love this plugin and have used it on a couple of sites. However, on my most recent one your plugin keeps changing back to 100×100 for the thumbnail size. I keep setting it back to 300 x 300 and it keeps reverting back after a few days to 100 x 100 – forth time now.