WooCommerce产品列表视图：按列表视图中的共享子类别图像按子类别购买

Sorry, the title may be confused.

So far, all I find about the product list view for woocommerce are displaying all products under a category with their own images. But what I want is that the products are displayed within a category, for instance:

(in the example, "single Door single drawer bases" is the ultimate subcategory e.g Red cabinet->base cabinet(in red)->single door single drawer bases. in this case all the products in this category with different models are displayed in a list view with shared subcategory image.)

Is there any way (code, plugin or any other idea) to achieve this?

Thanks in advance!

To add the category image to the product list you can use this:

add_action( 'woocommerce_before_shop_loop', 'woocommerce_category_image', 100 );
function woocommerce_category_image() {
    if ( is_product_category() ){
        global $wp_query;
        $cat = $wp_query->get_queried_object();
        $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image = wp_get_attachment_url( $thumbnail_id );
        if ( $image ) {
            echo '<img src="' . $image . '" alt="" />';
        }
    }
}

To adjust your product list to your needs you can either modify the template content-product.php directly (easy but dirty) or you use the actions hooks in there (recommended but a little bit tricky if you no familiar with this).