Display WooCommerce Categories with Thumbnails

This loop lists all WooCommerce product categories, each shown as its category image linked to the category page. It’s handy for a custom homepage section or a shop landing page that shows categories as image tiles. WooCommerce must be active, and the image is the one you set in the Thumbnail field when you edit a product category.

Add the code to the theme template file where the list should appear, preferably in a child theme. It outputs <li> items, so place it inside a <ul> element.

<?php
    $prod_categories = get_terms( 'product_cat', array(
        'orderby'    => 'name',
        'order'      => 'ASC',
        'hide_empty' => 1
    ));
    foreach( $prod_categories as $prod_cat ) :
        $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
        $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
?>

<li>
    <a href="<?php echo get_category_link( $prod_cat->term_id ); ?>">
        <img src="<?php echo $cat_thumb_url; ?>" alt="<?php echo $prod_cat->name; ?>" />
    </a>
</li>

<?php endforeach; wp_reset_query(); ?>

How it works

• get_terms() fetches the terms of the product_cat taxonomy, sorted by name from A to Z. hide_empty set to 1 skips categories that have no products.
• get_woocommerce_term_meta() reads the category’s thumbnail_id, the attachment ID of its image.
• wp_get_attachment_thumb_url() turns that ID into the URL of the thumbnail-size image. For a larger image, see changing the category thumbnail size.
• get_category_link() builds the link to the category archive. It works here because it looks the term up by its ID; get_term_link( $prod_cat ) is the more direct choice for a product category.

Things to watch

• get_woocommerce_term_meta() is deprecated in current WooCommerce. get_term_meta() with the same three arguments returns the same value without the deprecation notice.
• A category without an image gets an empty src, so you may want to skip those or show a placeholder image.
• For safer output, wrap the URLs in esc_url() and the category name in esc_attr().

Related articles

• hiding selected product categories with an ACF field: leave some categories out of a list like this one
• listing one category’s products by ID: show a single category’s products in a custom template