Use WooCommerce product image as its category image

WooCommerce is capable of showing category as well as products on its shop page and this is configurable from settings available in admin side but I can totally imagine running into the situation that categories don’t have their images uploaded and they will end up showing placeholder / default image. A quick solution would be to pull a product image from that category and use that image in place of thumbnail, highly dependent on what sort of products you are selling on your store, but in case you fit the bill, here’s how to do so:

* Plugin Name: WooCommerce Category Images Modification
* Plugin URI:
* Description: Use product image as its category image on category archive pages (To override image for product category, upload one for that category and it will override)
* Author: Ashfame
* Version: 0.1.2
* Author URI:
class WooCommerce_Category_Images_From_Product {
private $let_category_image_override = true;
private $randomize_category_image_from_products = true;
public function __construct() {
// Unhooking core's and hooking our custom thumbnail
add_action( 'plugins_loaded', array( $this, 'overrides' ) );
add_action( 'woocommerce_before_subcategory_title', array( $this, 'add_product_image_as_woocommerce_subcategory_thumbnail' ) );
// Support link in plugins listing
add_filter( 'plugin_action_links', array( $this, 'support_plugin_action_link' ), 10, 2 );
public function overrides() {
remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );
public function add_product_image_as_woocommerce_subcategory_thumbnail( $category ) {
if ( $this->let_category_image_override ) {
if ( get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true ) ) {
woocommerce_subcategory_thumbnail( $category );
$query_args = array(
'posts_per_page' => $this->randomize_category_image_from_products ? 10 : 1,
'post_status' => 'publish',
'post_type' => 'product',
'meta_query' => array(
'key' => '_visibility',
'value' => array( 'catalog', 'visible' ),
'compare' => 'IN'
'tax_query' => array(
'taxonomy' => 'product_cat',
'field' => 'id',
'terms' => $category->term_id
$products = get_posts( $query_args );
if ( $products ) {
echo get_the_post_thumbnail( $products[ array_rand( $products ) ]->ID, 'shop_thumbnail' );
public function support_plugin_action_link( $links, $file ) {
if ( $file == plugin_basename( __FILE__ ) ) {
$support_link = '<a href="' . rawurlencode('Premium Support') . '">Premium Support</a>';
array_unshift( $links, $support_link );
return $links;
new WooCommerce_Category_Images_From_Product();

Install this as a plugin, you can [download it]( Activate the plugin and any product category will now pull image from a product under that category and show it. In case an image is uploaded for the product category or one already exists, that takes a higher priority and is used instead of trying to get one out of a product.


24 responses to “Use WooCommerce product image as its category image”

  1. Jhonatan Galindo Avatar
    Jhonatan Galindo

    thanks a lot!

  2. Hendriks Avatar

    OMG you saved me hours of work
    Thank you soon much

  3. Peter Blackledge Avatar
    Peter Blackledge

    Our WooCommerce store will have products with Catalog visibility set to “hidden” (at least temporarily), and we don’t want those images to show up on the shop page. I’ve modified the query in your plugin as follows to check catalog visibility:

    $query_args = array(
    ‘posts_per_page’ => $this->randomize_category_image_from_products ? 10 : 1,
    ‘post_status’ => ‘publish’,
    ‘post_type’ => ‘product’,
    ‘meta_query’ => array(
    ‘key’ => ‘_visibility’,
    ‘value’ => array( ‘catalog’, ‘visible’ ),
    ‘compare’ => ‘IN’
    ‘tax_query’ => array(
    ‘taxonomy’ => ‘product_cat’,
    ‘field’ => ‘id’,
    ‘terms’ => $category->term_id

    Thanks for the good work!

    1. Thanks! Just saw this and I added it in the above plugin. Tagged as v0.1.2 for it.

  4. Olcay Sert Avatar
    Olcay Sert

    if you dont want to run query evertime,

    Change this lines
    $products = get_posts( $query_args );
    if ( $products ) {
    echo get_the_post_thumbnail($products[ array_rand( $products ) ]->ID, ‘shop_thumbnail’ );

    to this one
    $products = get_posts( $query_args );
    if ( $products ) {
    $myPost = $products[ array_rand( $products ) ]->ID;
    update_woocommerce_term_meta( $category->term_id, ‘thumbnail_id’, get_post_thumbnail_id($myPost));
    echo get_the_post_thumbnail( $myPost, ‘shop_thumbnail’ );

    next time category image will save on meta terms

    1. If you are caching it, then you also need to account for cases when that gets refreshed and you are not serving stale data. Above plugin is simply a starting point, feel free to build on it and I encourage you to contribute back to it as well 🙂

    2. Joachim Richter Avatar
      Joachim Richter

      Most excellent, you need to filter out the products that do not have an image 🙂

  5. Hey, really useful piece of code there. Thanks. My images are showing smaller than they usually do in categories, can you please help.

    1. Probably image of that size doesn’t exist or something. Can’t say for sure. You will have to inspect in code what’s going on.

      1. Fixed it! Thank You.

  6. Vahak Medzadourian Avatar
    Vahak Medzadourian


  7. Monk?TC Avatar

    doesn’t seem to be working for me…

    1. Sorry but can’t diagnose anything with that. May be you have a specific case that the plugin doesn’t cover.

  8. bizarro5 Avatar

    How do I change the image size? It’s pulling small images. Thanks for the plugin.

    1. Line 61, look for “shop_thumbnail”, this is what you need to change to any other registered image size inside WordPress. “thumbnail”, “medium”, “large” etc

      1. bizarro5 Avatar

        Thank you SO MUCH! Now I just have to make them all the same size 🙂

      2. Robin Matthäi Avatar
        Robin Matthäi

        This is exactly, what I needed.
        All my images of products are in size 400×400. The Plugin itselfs sets the images to thumbnails size, 90×90 at mine.
        So i just did, what ashfame told us and set in line 61 the ‘shop_thumbnail’ to ‘shop_medium’.

        And now all my product pictures are sharp af.

        Thank you, mate. Very nice work!

  9. Joachim Richter Avatar
    Joachim Richter

    Hi guys,

    this is just great Ashfame, why don’t you put this on codecanyon ? and add some extra features to it ….

    reason I am writing is, I want to use this on my thesis site, and for some strange reason the images shown are wrong , don’t belong to the categories … any ideas

    1. Hi, I just see this as a very specific need plugin which doesn’t make for a good candidate for turning into a premium plugin 🙂

      Regarding your problem, can’t say what’s off without taking a look at things myself. Could be anything. Another reason why support requests for such a plugin would cost a lot more.

  10. You are amazing! Really appreciate this!

  11. Stavros Avatar

    Hi ?uys,
    I was using the codes but after upgrade to version 4.7.5 and after feleted all the products and re entered them the categories show the placeholder image instead of the product image. Is it the upgrade version of woocommerce fault?

  12. Francesco Mazza Avatar
    Francesco Mazza

    Hi maybe the code is not working with the new versions of wp and woo, because under the random thumb there is still the default woo image. Is there a way to hide that?
    Hope you ll help me.
    Many thanks for your plug.

    1. Francesco Mazza Avatar
      Francesco Mazza

      it needs a control that says “if there is already a category image, do nothing”. Could you please add this?


  13. danfelbm Avatar

    Any chance that the code could be fixed for WordPress 3?

Leave a Reply

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