How to Display Woocommerce Category Image

How to display Woocommerce Category image?

To display the category image for the currently displayed category in archive-product.php, use the current category term_id when is_product_category() is true:

// verify that this is a product category page
if ( is_product_category() ){
    global $wp_query;

    // get the query object
    $cat = $wp_query->get_queried_object();

    // get the thumbnail id using the queried category term_id
    $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true ); 

    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 

    // print the IMG HTML
    echo "<img src='{$image}' alt='' width='762' height='365' />";
}

How to display category thumbnail on WooCommerce category page?

"Shouldn't category image appear automatically on the category page? Or should I nevertheless trigger its displaying with adding of any code to theme file?"

Short answer

No it does not show up by default! It all depends on the template/theme developer's architecture/preferences and how s/he has planned the theme out! If you'd like to customize your theme, then you could go ahead and add it manually to your theme templates using the snippet you found!

Get Woocommerce product category image url

The function get_woocommerce_term_meta() needs the term ID instead of the term slug. So you can use get_term_by() Wordpress function to get the term ID from a term slug.

So your code will be:

$term_slug    = 't-shirts';
$taxonomy     = 'product_cat';
$term_id      = get_term_by( 'slug', $term_slug, $taxonomy )->term_id;
$thumbnail_id = get_woocommerce_term_meta( $term_id, 'thumbnail_id', true );
$image        = wp_get_attachment_url( $thumbnail_id );

// Output
echo '<img src="'.$image.'" alt="Sample Image" width="50" height="50" />';

Tested and works

Addition rev 3 (related to your comment)

I have make some other changes using a foreach loop optimizing the code and allowing you to add as many product category slugs as you want.

I have also added the term link, and make some minor changes.

<?php
$term_slugs   = array('jeans', 't-shirts');
$taxonomy     = "product_cat";

// Loop though the term slugs array
foreach ( $term_slugs as $term_slug ):
    $term        = get_term_by( 'slug', $term_slug, $taxonomy );
    if( $term ):
        $term_link   = get_term_link( $term, $taxonomy );

        $thumb_id    = get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true );
        $img_src     = wp_get_attachment_url( $thumb_id );
        ?>
        <div class="list-item">
            <div class="item-image">
                <img src="<?php echo $img_src; ?>" alt="Sample Image" width="50" height="50" />
            </div>
            <div class="item-name">
                <a href="<?php echo $term_link; ?>"><?php echo $term->name; ?></a>
            </div>
        </div>
    <?php endif;
endforeach; ?>

WooCommerce - Show product category image on single product page template

The best way to get current category ID on single product page and image

global $wp_query;
$terms_post = get_the_terms( $post->cat_ID , 'product_cat' );
foreach ($terms_post as $term_cat) { 
    $term_cat_id = $term_cat->term_id; 
    $thumbnail_id = get_woocommerce_term_meta( $term_cat_id, 'thumbnail_id', true );
    $image_url = wp_get_attachment_url( $thumbnail_id );
     echo '<img src="' . $image_url . '">';
}

Get and display the product category featured image in Woocommerce

The shortest way is to use woocommerce_subcategory_thumbnail() dedicated function:

$product_categories = array("software", "plugins", "merch");

// Loop through the product categories
foreach( $product_categories as $category ) {
    // Get the WP_term object
    $term = get_term_by( 'slug', sanitize_title( $category ), 'product_cat' );

    // Get the term link (if needed)
    $term_link = get_term_link( $term, 'product_cat' );

    // Display the product category thumbnail
    woocommerce_subcategory_thumbnail( $term );
}

The other step by step way, that will display the linked product category image with its name:

$product_categories = array("software", "plugins", "merch");

// Loop through the product categories
foreach( $product_categories as $category ) {
    // Get the WP_term object
    $term = get_term_by( 'slug', sanitize_title( $category ), 'product_cat' );

    // Get the term link (if needed)
    $term_link = get_term_link( $term, 'product_cat' );

    // Get the thumbnail Id
    $thumbnail_id  = (int) get_woocommerce_term_meta( $term->term_id, 'thumbnail_id', true );

    if( $thumbnail_id > 0 ) {
        // Get the attchement image Url
        $term_img  = wp_get_attachment_url( $thumbnail_id );

        // Formatted thumbnail html
        $img_html = '<img src="' . $term_img . '">';
    } else {
        $img_html = '';
    }
    echo '<a href="' . $term_link . '">' . $img_html . $term->name . '</a><br>';
}

Both works…

To get all product categories WP_Term objects and display them with their thumbnails:

// Get all product categories
$product_category_terms = get_terms( array(
    'taxonomy'   => "product_cat",
    'hide_empty' => 1,
));

foreach($product_category_terms as $term){
    // Get the term link (if needed)
    $term_link = get_term_link( $term, 'product_cat' );

    ## -- Output Example -- ##

    // The link (start)
    echo '<a href="' . $term_link . '" style="display:inline-block; text-align:center; margin-bottom: 14px;">';

    // Display the product category thumbnail
    woocommerce_subcategory_thumbnail( $term );

    // Display the term name
    echo $term->name;

    // Link close
    echo '</a>';
}

Woocommerce with wordpress - how can I display category image?

You can add the category image and description by adding the following to the archive-product.php file after <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> that if statement:

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 ); 
    // get the image URL
    $image = wp_get_attachment_url( $thumbnail_id ); 
    //if you only want the image, uncomment the two lines below
    //list($width, $height) = getimagesize($image);
    //echo '<img src="'.$image.'" alt="Sample Image" width="'.$width.'" height="'.$height.'"/>';

    $cat_id=$cat->term_id;
    $prod_term=get_term($cat_id,'product_cat');
    $description=$prod_term->description;
    echo '<div class="category-description" style="background-image:url('.$image.');">'.$description.'</div>';
}

Woocommerce add multiple images to category page

This did it for me, I changed the field to get field did a few other changes as well hope this helps someone else

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);

function wpse_add_custom_text_under_category_title($category) {
   $term_id = 'product_cat_'.$category->term_id;
for ( $i = 1; $i <= 3; $i++ ){  
  $category_image =  '<img src="'.get_field('category_image_' . $i, $term_id).'"/>';
 // $category_image = get_field('category_image_' . $i, $term_id);
 if( $category_image ) {
    echo $category_image."<br/>";
} else {
    echo 'empty';
}
}
    
}

Get Woocommerce Category Thumbnails

Sorted it, here's the code I used:

$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );

How to Display Woocommerce Category Image