WooCommerce: Use Product Images as Category Images

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.

Previous

Security isn’t a dirty word, Blackadder

Next

How to enable checkbox lists for non-hierarchical taxonomies in WordPress

45 Comments

  1. 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!

  2. GazChap

    Hi Maria – do you have a link to a URL that shows the problem please?

  3. Sure,it happens in all cateogories.An exemple is here: http://eaglemegastore.it/categoria-prodotto/clickn-print/
    Thank You!

  4. 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?

  5. 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?

  6. 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!

    • gazchap

      Sorry Maria, I’d need to see how the external images plugin stores the image data in order to help more with this 🙁

  7. Maria Novella

    I’m glad to tell you that with the last update of Woocommerce (3.3.3) the plugins works correctly.Awesome!

  8. Jem

    Suggestion: allow the user to choose which size of image to use rather than defaulting to shop_thumbnail.

  9. 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!

  10. 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.

  11. 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?

  12. 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!!!

  13. 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.

  14. GK

    Email sent through the contact form. Thanks again.

  15. 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! 🙂

  16. 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?

  17. 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.

  18. 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.

  19. Bec

    Hi your great plugin is not working with flatsome theme, any idea?

    Thanks

  20. joe

    tnx works fine for me

  21. 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.

  22. GAZ you are a hero and life saver.

  23. 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,

  24. 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.

  25. It’s still working a treat. That has saved me hours of work. Thanks

  26. Hi
    i have installed and activated the plugin but thumbnails has been still disappeared

  27. paul

    would love to have this working for the latest versions… doesn’t t seem to work at th emo

  28. 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 🙂

  29. 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.

  30. Great plug in Gaz! Much needed functionality well executed. Thanks again!

  31. Arbnor

    Awesome, thank you so much.

  32. Arbnor

    How about getting product image order by last product published for that category?

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Policy & Powered by WordPress & Theme by Anders Norén