How to display Woocommerce Category image?
Solution 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' />";
}
Solution 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
Solution 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="" />'; } } }
Solution 4
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; ?>**
Solution 5
To prevent full size category images slowing page down, you can use smaller images with wp_get_attachment_image_src()
:
<?php
$thumbnail_id = get_woocommerce_term_meta( $term->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
MrRoman
Updated on November 25, 2021Comments
-
MrRoman over 2 years
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 categoriesAny suggest?
-
MrRoman over 11 yearsTHanks 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.
-
doublesharp over 11 yearsDo 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
? -
MrRoman over 11 yearsYes 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
-
doublesharp over 11 yearsI'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 useis_product_category()
for the if statement and the category from theterm_id
since it is part of the taxonomy - see the edits to my answer. -
L_J almost 6 yearsWhile this code may answer the question, providing information on how and why it solves the problem improves its long-term value.
-
doublesharp over 4 years7 years wasn't such a bad run :)
-
Warface over 3 yearsThis code is deprecated since Woocommerce 3.6 and $term is not defined in this example
-
dipak_pusti almost 3 yearsNeat. get_woocommerce_term_meta is deprecated, use get_term_meta instead.