Aleš Sýkora wrote

Display list of WooCommerce categories

19. 2. 2021 in

If you need to display list of all WooCommerce categories without products, you can use my code. It will display all categories with link to their archive page. It will also display category image, name of course and count of products inside the category.

It is all wrapped in HTML with OxyNinja framework applied. So if you are using it with Oxygen code block and OxyNinja, the result should look like this.

List of all WooCommerce categories with links
<div class="c-columns-5 c-columns-l-4 c-columns-m-2">
<?php
$children = get_categories( array(
    'taxonomy'     => 'product_cat',
    'orderby'      => 'name',
    'pad_counts'   => false,
    'hierarchical' => 1,
    'hide_empty'   => false
) );

if ($children) {
  foreach ($children as $subcat) :
    $catThumbnail_id = get_woocommerce_term_meta( $subcat->term_id, 'thumbnail_id', true );
    $catImage = wp_get_attachment_url( $catThumbnail_id );
    $catName = $subcat->name;
    $catDescription = $subcat->description;
    $catCount = $subcat->count;
    $catLink = esc_url(get_term_link($subcat, $subcat->taxonomy));
?>
<div class="c-padding-xs">
<div class="c-padding-xs c-card-light c-inline">
  <img class="c-round c-margin-right-s category-image" src="<?php echo $catImage; ?>">
	<a href="<?php echo $catLink ?>"><?php echo $catName . ' (' . $catCount . ')'; ?></a>
  </div>
  </div>
      <?php
 endforeach;
}
    ?>
</div>

If you want to display all categories on WooCommerce shop page and use this code in same template for product categories too, then you propably want to display only child categories. So you need to get the term of current archive page at first.

<div class="c-columns-5 c-columns-l-4 c-columns-m-2">
<?php
if ( is_shop() ) {  
  $children = get_categories( array(
    'taxonomy'     => 'product_cat',
    'orderby'      => 'name',
    'pad_counts'   => false,
    'hierarchical' => 1,
    'hide_empty'   => false
) );}
if ( is_product_category() ) {
$term = get_queried_object(); // Get current archive page
$children = get_terms($term->taxonomy, array(
  'parent'    => $term->term_id,
  'hide_empty' => false
));
}

if (isset($children)) {
  foreach ($children as $subcat) :
    $catThumbnail_id = get_woocommerce_term_meta( $subcat->term_id, 'thumbnail_id', true );
    $catImage = wp_get_attachment_url( $catThumbnail_id );
    $catName = $subcat->name;
    $catDescription = $subcat->description;
    $catCount = $subcat->count;
    $catLink = esc_url(get_term_link($subcat, $subcat->taxonomy));
?>
<div class="c-padding-xs">
<div class="c-padding-xs c-card-light c-inline">
  <img class="c-round c-margin-right-s category-image" src="<?php echo $catImage; ?>">
	<a href="<?php echo $catLink ?>"><?php echo $catName . ' (' . $catCount . ')'; ?></a>
  </div>
  </div>
      <?php
 endforeach;
}
    ?>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Custom Schema.org markup for WordPress Custom Post types
26. 9. 2019 in
Learn how to add Schema.org markup with JSON-ld and WordPress and create your own unique Schema.org plugin.
Read More
Aleš Sýkora wrote
Change WordPress login logo with code
6. 11. 2020 in
Need to change wordpress login logo? Use this code in custom plugin or in Code Snippets plugin. Change the background image url to your image and Link Title to your site name for example.
Read More
Aleš Sýkora wrote
Astra Theme Container Width Fix
4. 9. 2019 in
If you encounter some issues with container width on mobile device when using Astra Theme and Toolset and Bootstrap try this CSS fixes.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram