How to display Woocommerce Category image?

Question

I use this code in PHP:

$idcat = 147;
$thumbnail_id = get_woocommerce_term_meta( $idcat, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
echo '<img src="'.$image.'" alt="" width="762" height="365" />';

Where 147 is the current ID manually set, but i need to current id in other categories

Any suggest?

What exactly is the question? You need to retrieve the category image for the current category id without setting it explicitly? — doublesharp, Oct 03 '12 at 21:25
Excuse my english, i need to display the image from current woocommerce product category. — MrRoman, Oct 08 '12 at 19:36

score 84 · Accepted Answer · edited Dec 30 '20 at 09:03

84

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' />";
}

edited Dec 30 '20 at 09:03

Ian Wijma

13
5

answered Oct 03 '12 at 21:27

doublesharp

26,888
6
52
73

1

THanks you for your answer, but not work proprly, because "is_category" in woocommerce template is "is_product_category" and "get_query_var('cat')" -> "cat"? Any suggest? Im using woocommerce templates to override default woocommerce. And im editing the product-archive.php template. – MrRoman Oct 08 '12 at 19:14
1

Do you mean archive-product.php? This is the template that is used for the shop homepage as well as tag archives, for example `/product-tag/TAG-NAME`. If that is the case, I assume you are trying to get the category image for each product in the loop? Or are you viewing a single product category and need to display the image for that one category, for example `/product-category/CATEGORY`? – doublesharp Oct 09 '12 at 14:51
1

Yes is it /product-category/CATEGORY, when i create a new category, i can upload a image from woocommerce admin. P. D.: in Spanish (my native language :)) is /categoria-producto/categoria – MrRoman Oct 09 '12 at 22:00
1

I'm in Chile now, but my Spanish is terrible. The file should be the same even with your language set to `es_ES`, so you want to use `is_product_category()` for the if statement and the category from the `term_id` since it is part of the taxonomy - see the edits to my answer. – doublesharp Oct 10 '12 at 02:40

score 9 · Answer 2 · edited Apr 03 '18 at 07:20

9

From the WooCommerce page:

// WooCommerce – display category image on category archive

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
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="" />';
      }
  }
}

edited Apr 03 '18 at 07:20

Martijn Pieters

1,048,767
296
4,058
3,343

answered Nov 21 '15 at 12:58

Dampas

323
2
6

1

Neat. get_woocommerce_term_meta is deprecated, use get_term_meta instead. – dipak_pusti Jun 07 '21 at 16:32

score 9 · Answer 3 · answered Jun 25 '19 at 13:32

9

get_woocommerce_term_meta is depricated since Woo 3.6.0.

so change

$thumbnail_id = get_woocommerce_term_meta($value->term_id, 'thumbnail_id', true );

into: ($value->term_id should be woo category id)

get_term_meta($value->term_id, 'thumbnail_id', true)

see docs for details: https://docs.woocommerce.com/wc-apidocs/function-get_woocommerce_term_meta.html

answered Jun 25 '19 at 13:32

Appic SandBox

178
2
6

2

7 years wasn't such a bad run :) – doublesharp Sep 10 '19 at 15:29

score 6 · Answer 4 · edited Oct 22 '22 at 19:14

6

To prevent full size category images slowing page down, you can use smaller images with wp_get_attachment_image_src():

<?php 
$thumbnail_id = get_term_meta( $term_id, 'thumbnail_id', true );

// get the medium-sized image url
$image = wp_get_attachment_image_src( $thumbnail_id, 'medium' );

// Output in img tag
echo '<img src="' . $image[0] . '" alt="" />'; 

// Or as a background for a div
echo '<div class="image" style="background-image: url("' . $image[0] .'")"></div>';

?>

EDIT: Fixed variable name and missing quote

edited Oct 22 '22 at 19:14

FluffyKitten

13,824
10
39
52

answered Nov 14 '17 at 12:53

ruttoa

71
1
6

1

This code is deprecated since Woocommerce 3.6 and $term is not defined in this example – Warface Nov 30 '20 at 13:56
FYI the code has now been updated to replace the deprecated function call – FluffyKitten Oct 22 '22 at 19:15

Muhammad Rizwan Kaim Khani · Answer 5 · 2013-08-21T10:58:04.203

You may also used foreach loop for display category image and etc from parent category given by parent id.

for example, i am giving 74 id of parent category, then i will display the image from child category and its slug also.

**<?php
$catTerms = get_terms('product_cat', array('hide_empty' => 0, 'orderby' => 'ASC', 'child_of'=>'74'));
foreach($catTerms as $catTerm) : ?>
<?php $thumbnail_id = get_woocommerce_term_meta( $catTerm->term_id, 'thumbnail_id', true ); 

// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );  ?>
<li><img src="<?php echo $image; ?>" width="152" height="245"/><span><?php echo $catTerm->name; ?></span></li>
<?php endforeach; ?>**

score 2 · Answer 6 · edited Aug 02 '20 at 05:00

2

This solution with few code. I think is better.

<?php echo wp_get_attachment_image( get_term_meta( get_queried_object_id(), 'thumbnail_id', 1 ), 'thumbnail' ); ?>

edited Aug 02 '20 at 05:00

jizhihaoSAMA

12,336
9
27
49

answered Aug 02 '20 at 04:32

jupa8712

81
7

score 1 · Answer 7 · edited Aug 03 '18 at 08:00

Add code in /wp-content/plugins/woocommerce/templates/ loop path

    <?php
        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 ); 
            echo "<img src='{$image}' alt='' />";
        }
    ?>

score 1 · Answer 8 · answered Jul 13 '21 at 00:58

The original answer helped but is out of date.

From https://docs.woocommerce.com/document/woocommerce-display-category-image-on-category-archive/

 /**
 * Display category image on category archive
 */
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
    if ( is_product_category() ){
        global $wp_query;
        $cat = $wp_query->get_queried_object();
        $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image = wp_get_attachment_url( $thumbnail_id );
        if ( $image ) {
            echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
        }
    }
}

I added a class echo '<img src="' . $image . '" alt="' . $cat->name . '" class="catImage" />'; and then styled it with

.catImage{
  float: left;
  max-height: 100px;
  padding-right: 10px;
}

score 0 · Answer 9 · answered Aug 17 '18 at 06:04

0

<?php 

 $terms = get_terms( array(
 'taxonomy' => 'product_cat',
 'hide_empty' => false,
 ) ); // Get Terms

foreach ($terms as $key => $value) 
{
 $metaterms = get_term_meta($value->term_id);
 $thumbnail_id = get_woocommerce_term_meta($value->term_id, 'thumbnail_id', true );
 $image = wp_get_attachment_url( $thumbnail_id );
 echo '<img src="'.$image.'" alt="" />';
} // Get Images from woocommerce term meta

?>

answered Aug 17 '18 at 06:04

Ashish Sharma

1

2

While this code may answer the question, providing information on how and why it solves the problem improves its long-term value. – L_J Aug 17 '18 at 06:13

score 0 · Answer 10 · answered Nov 24 '21 at 11:51

I did it this way:

function loop_product_category_image(){
    global $wp_query;
    $terms = get_the_terms( $wp_query->ID, 'product_cat' );
    $thumbnail_id = get_term_meta( $terms[0]->term_id, 'thumbnail_id', true );
    $image = wp_get_attachment_url( $thumbnail_id );
    echo "<img src='{$image}' alt='category image' width='162' height='165' />";
}

You can hook than for example: in product loop:

add_action('woocommerce_before_shop_loop_item', 'loop_product_category_image', 7);

or in product:

add_action('woocommerce_before_main_content', 'cylkow_loop_product_category_image', 7);

or wherever you want.

You can use also conditional tags https://woocommerce.com/document/conditional-tags/

score -1 · Answer 11 · edited Aug 14 '14 at 10:07

Use this code this may help you.i have passed the cat id 17.pass woocommerce cat id and thats it

   <?php
      global $woocommerce;
      global $wp_query;
      $cat_id=17;
      $table_name = $wpdb->prefix . "woocommerce_termmeta";
      $query="SELECT meta_value FROM {$table_name} WHERE `meta_key`='thumbnail_id' and woocommerce_term_id ={$cat_id} LIMIT 0 , 30";
      $result =  $wpdb->get_results($query);

      foreach($result as $result1){
          $img_id= $result1->meta_value;
      }     

      echo '<img src="'.wp_get_attachment_url( $img_id ).'" alt="category image">';
   ?>

How to display Woocommerce Category image?

11 Answers11

Linked

Related