Show WooCommerce parent category thumbnail when viewing a child category

Question

I have a function that returns the product Category Thumbnail on the Archive pages for WooCommerce. This is working great.

What I would like to do, is be able to return the Parent Category Thumbnail when viewing Child Categories.

Here is the code I've currently got:

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

Can anybody help modify the query so that it shows the parent category image.

Ideally even better still would be to show the child thumbnail if there is one, and if there isn't, then drop back to the parent one and show that.

LoicTheAztec · Accepted Answer · 2020-08-11T20:30:59.400

3

To avoid an empty image on the top level category use the following:

function woocommerce_category_image() {
    if ( is_product_category() ){
        $term      = get_queried_object(); // get the WP_Term Object
        $term_id   = $term->parent > 0 ? $term->parent : $term->term_id; // Avoid an empty image on the top level category
        $image_src = wp_get_attachment_url( get_term_meta( $term_id, 'thumbnail_id', true ) ); // Get image Url
    
        if ( ! empty($image_src) ) {
            echo '<img src="' . $image_src . '" alt="' . $term->name . '" />';
        }
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

Update (related to your comment)

Here if the queried product category has not an image set for it, the parent product category image will be displayed instead.

function woocommerce_category_image() {
    if ( is_product_category() ){
        $term      = get_queried_object(); // get the WP_Term Object
        $image_id  = get_term_meta( $term->term_id, 'thumbnail_id', true );
        
        if( empty( $image_id ) && $term->parent > 0 ) {
            $image_id  = get_term_meta( $term->parent, 'thumbnail_id', true );
        }
        $image_src = wp_get_attachment_url( $image_id ); // Get the image Url
    
        if ( ! empty($image_src) ) {
            echo '<img src="' . $image_src . '" alt="' . $term->name . '" />';
        }
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

edited Aug 11 '20 at 20:30

answered Jun 17 '20 at 15:42

LoicTheAztec

229,944
23
356
399

Using this code, it doesn't seem to be pulling through the child category image if there is one set. It is either using the Parent category, or none (if parent doesn't have one). Is there a way to use the categories image first, and then parent is one isn't set against the child category? – CS10 Aug 11 '20 at 12:44
@CS10 I have added some code that should do the trick. – LoicTheAztec Aug 11 '20 at 14:34
Hi @LoicTheAztec, Really appreciate the reply. Unfortunately, that caused the site to crash and not load. It is reporting that the { at the end of the first if line is unexpected..? – CS10 Aug 11 '20 at 20:27
@CS10 My fault, sorry: Missed a closing bracket. Code updated :) – LoicTheAztec Aug 11 '20 at 20:33
Spot on. Thanks so much! – CS10 Aug 11 '20 at 20:54
Is it possible to adapt this code to show the category image on a product page? – Mario Jan 14 '22 at 16:40

score 2 · Answer 2 · edited Aug 11 '20 at 14:14

2

Just change $cat->term_id by $cat->parent to get the parent thumbnail id.

Final code :

function woocommerce_category_image() {

if ( is_product_category() ){

    global $wp_query;
    $cat = $wp_query->get_queried_object();
    $thumbnail_id = get_term_meta( $cat->parent, 'thumbnail_id', true );
    $image = wp_get_attachment_url( $thumbnail_id );

    if ( $image ) {
        echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
    }
}

Hope this helps

edited Aug 11 '20 at 14:14

LoicTheAztec

229,944
23
356
399

answered Jun 17 '20 at 14:16

Mathias Nicod

130
12

Thanks, sort of! But now the parent category doesn't show an image, even though i have one set. – CS10 Jun 17 '20 at 14:58

Show WooCommerce parent category thumbnail when viewing a child category

2 Answers2