Im trying to get the product category thumb for a subcategory of a specific parent category on my product page - Im able to retrieve all the images for the subcategory of my given parent category - but I only want to show the image that belongs to the subcategory of the product. Now it shows all images on the product from all the parents child.
How do a set it so it only show the one subcategory im on, but still only from the given parent?
Code:
<?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; ?>
Edit: solved by doing it this way:
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
if ( $term->parent == '174081' ) {
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img src="'.$image.'">';
}
}
My goal here is to show only child categories under category ID 93 (vendors) with a thumbnail and URL so people can click on the vendor logo and see other products in that category. I have everything mostly working, but I'm not sure how to limit my request to show only one child from my parent. This is admittedly very amateur - I am not a backend developer nor do I really understand how to write PHP.
<?php
echo $wp_query;
$terms_post = get_the_terms($product->ID, 'product_cat');
foreach ($terms_post as $term_cat) {
$term_cat_id = $term_cat->term_id;
$category_url = get_term_link( $term_cat_id, 'product_cat', true );
$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 . '" alt="" width="50" height="50">';
}
?>
To show only 1 child from the parent, just use array_slice().
foreach(array_slice($terms_post, 0, 1) as $term_cat ) {
$term_cat_id = $term_cat->term_id;
$category_url = get_term_link( $term_cat_id, 'product_cat', true );
$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 . '" alt="" width="50" height="50">';
}
Do let me know if it works.
EDITED:
Use the below code to get child categories using a parent category slug.
<?php
global $post;
$category_id = get_term_by('slug', 'PARENT-CAT-SLUG', 'product_cat');
$terms = get_the_terms($post->ID, 'product_cat');
foreach ($terms as $term) {
if($term->parent === $category_id->term_id) { ?>
<span class="product-sub-cats"><?php echo $term->name; ?></span>
<?php break;
}
}
?>
Replace "PARENT-CAT-SLUG" with the slug of your Parent Category.
I am having some problems displaying thumbnails for subcategory. Can anyone help me?
<?php
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img src="'.$image.'">';
}?>
I want to show only thumbnails of SUBCATEGORY , and the above code does not help that problem. Thks
Please check following code and try it.
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
if( $term->parent != 0 ) {
$category_name = $term->name;
$category_thumbnail = get_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img src="'.$image.'">';
}
}
Check if the Parent id is not 0 or you can check like $term->parent > 0. Get the term meta of the term_id.
get_woocommerce_term_meta function may be deprecated and you can use get_term_meta to get term meta.
I want to display the category image as banner in the woocommerce single product page. I'm using this code, but it shows all the category image.
if(is_single()) {
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img class="absolute '.$category_name.' category-image" src="'.$image.'">';
}
}
I want only to show the category image. when I click on the product, it shows its category image as banner.
Problem in code : What you have done in your coding is, you are fetching all the terms(get_the_terms) assinged to the product.That is why it is displaying all the images.
Solution : Either you can change your code to get banner image of particular product or else you can simply put dummy condition to get only one image.
Code for dummy condition :
if(is_single()) {
$terms = get_the_terms( $post->ID, 'product_cat' );
$i=0; //Variable for dummy condition
foreach ( $terms as $term ){
if($i==0): //Dummy Condition
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img class="absolute '.$category_name.' category-image" src="'.$image.'">';
$i++; //Increment it to make condition false
endif;
}
}
Let me know if you have any doubt.
You slect child category that why display all category image
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?
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' />";
}
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
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="" />';
}
}
}
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
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; ?>**
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' ); ?>
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='' />";
}
?>
<?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
?>
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;
}
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/
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">';
?>