Use WooCommerce product image as its category image, if category image is missing

woocommerce-category-images-from-product.php

<?php
/**
 * Plugin Name: WooCommerce Category Images Modification
 * Plugin URI: http://blog.ashfame.com/?p=1117
 * 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: http://ashfame.com/
 */

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 );
				return;
			}
		}

		$query_args = array(
			'posts_per_page' => $this->randomize_category_image_from_products ? 10 : 1,
			'post_status' => 'publish',
			'post_type' => 'product',
			'meta_query' => array(
				array(
					'key' => '_visibility',
					'value' => array( 'catalog', 'visible' ),
					'compare' => 'IN'
				)
			),
			'tax_query' => array(
				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="mailto:[email protected]?subject=' . rawurlencode('Premium Support') . '">Premium Support</a>';
			array_unshift( $links, $support_link );
		}

		return $links;
	}
}

new WooCommerce_Category_Images_From_Product();

Hi, could you please advise how to put this into action? I am not a coder but need this to work on my website. Do I upload the .php file to Woocommerce/Includes? How do I "call" it to work?

Thanks a million for sharing!

Thank you! ashfame It's work. This code help me manage woocommerce category image so fast. I like it.

---

@3rmarketing You may use this plugin https://wordpress.org/plugins/code-snippets/
Click add new and put this code, then save and activate. You can add many new snippet as you want. This plugin help webmaster insert any code to functions.php without touching the core files.

Does not work for me. It's clearly active, it changed the formatting of the categories but there is no image displayed. WP 4.8.1, WC 3.x, Storefront theme.

Hey folks! I am relatively new to WP but I've been a developer for a long time so I took a crack at fixing this snippet. I found that if you remove the code below from the plug-in it works again. I will do some more digging to figure out why this is the case.

Post here and let me know if you get it working also with this hack.

Remove lines 42 through 48:

'meta_query' => array(
                array(
                    'key' => '_visibility',
                    'value' => array( 'catalog', 'visible' ),
                    'compare' => 'IN'
                )
            ),

@peteoleary yes, the images do show, but the placeholder category images are still there for me, so now the page is a mess...

hi is there any solution for 5.5

Hi any solutions for the latest Woo version 6.6?

Sorry folks, I haven't worked with Woocommerce for several years now, so I don't know what has changed that would break the current query.

Hi, is it possible to do the reverse? I need image products from his category

@peteoleary yes, the images do show, but the placeholder category images are still there for me, so now the page is a mess...

Hi Peteoleary add this CSS cpde to additional CSS.
li.product-category.product a img:first-of-type {
display: none;
}