How to display Woocommerce Category image? - php

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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; ?>**

Answer 6

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' ); ?>

Answer 7

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

Answer 8

<?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
?>

Answer 9

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

Answer 10

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/

Answer 11

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">';
?>