How to Display Categories in WooCommerce

WooCommerce gives you a few options as to what you can show on your archive pages:

• Products
• Categories (on shop page) or subcategories (on category pages)
• Both products and categories

When you are setting up a store, normally you’d select the third option, products and categories/subcategories. This implies that visitors can either select products right from the home page or refine their search by clicking through to a product category archive.

In this tutorial you will learn how to display categories in a separate list before displaying products.

• Distinguish code of WooCommerce which is used to output categories and subcategories on archive pages
• Create plugin for code
• Write a function to put categories or subcategories before product listings
• Style the output

Go to WooCommerce > Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show both.

Click the Save changes button to save.

Note: All the code mentioned below should be places in the functions.php (available in the theme folder)  

Is Your WooCommerce Store Secure?

These Tips & Techniques Will Help You How To Secure Your WooCommerce Stores.

I agree to the Cloudways Terms of Service & Privacy Policy

Get Ebook Now!

Thank You

Your Ebook is on its Way to Your Inbox.

Display WooCommerce Product Category

function woocommerce_product_category( $args = array() ) {
    $woocommerce_category_id = get_queried_object_id();
  $args = array(
    	'parent' => $woocommerce_category_id
  );
  $terms = get_terms( 'product_cat', $args );
  if ( $terms ) {
    	echo '<ul class="woocommerce-categories">';
    	foreach ( $terms as $term ) {
        	echo '<li class="woocommerce-product-category-page">';
            woocommerce_subcategory_thumbnail( $term );
        	echo '<h2>';
        	echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
        	echo $term->name;
        	echo '</a>';
        	echo '</h2>';
        	echo '</li>';
    	}
    	echo '</ul>';
  }
}
add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

So there’s a woocommerce_product_category() function which is outputting the categories or subcategories before running the loop which outputs the products. The function is pluggable, which means override it in theme.

List Subcategories of a WooCommerce Product Category

Here’s how you can easily get the subcategory of WooCommerce product categories by using a custom function that takes advantage of parent product category slug.

function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'product_cat';
  
  $parent = get_term_by( 'slug', $category_slug, $taxonomy );
  
  $children_ids = get_term_children( $parent->term_id, $taxonomy );
 
 	
  foreach($children_ids as $children_id){
    	$term = get_term( $children_id, $taxonomy ); 
    	$term_link = get_term_link( $term, $taxonomy ); 
    	if ( is_wp_error( $term_link ) ) $term_link = '';
   	
    	$terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $term->name . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

In the above code snippet, WP_Term object gets the product category parent. Next, it gets the child ID in an array. Finally, the child categories are displayed in the HTML by running a loop through the child ID array.

Display WooCommerce Category Description

global $post;
$args = array( 'taxonomy' => 'product_cat',);
$terms = wp_get_post_terms($post->ID,'product_cat', $args);
 
$count = count($terms);
if ($count > 0) {
 
  foreach ($terms as $term) {
    	echo '<div class="woocommerce-get-product-category">';
    	echo $term->description;
    	echo '</div>';
 
  }
 
}

The above code snippet should be placed in the WooCommerce template file that you use to display your product details. In this code snippet, the ‘wp_get_post_terms’ filter is called when the cache has the required term. the filter will pass the term and the array $args. In addition, the filter is called before the array of terms and will pass the arrays.

A Custom Plugin For Displaying WooCommerce Product Category

The above process of displaying subcategories for the WooCommerce product categories is accomplished through inline code that is added to the functions.php file.

There are cases where WooCommerce store owners and developers do not wish to use inline code, mainly where they do not wish to temper with “good” code or in cases where there is extensive customization that could get derailed by adding code to functions.php.

For such users, a great alternative is to package all this functionality into a plugin. the process is simple and you have the additional benefit of switching OFF this functionality by deactivating the plugin.

Let’s start!

In your wp-content/plugins directory, create a new folder and give it a unique name. I’m calling mine cloudways-products-categories-in-archives. Inside that, create a new file, again with a unique name. I’m using the same name: cloudways-product.php

Open your file and add this code to it.

<?php
/**
 * Plugin Name: WooCommerce Product Category 
 * Description: Display WooCommerce categories on WooCommerce product pages
**/

In your plugin file, add this:

function cloudways_product_subcategories( $args = array() ) {
 
    }
add_action( 'woocommerce_before_shop_loop', 'cloudways_product_subcategories', 50 );

Now add this code inside the function:

$parentid = get_queried_object_id();
         
$args = array(
    'parent' => $parentid
);
 
$terms = get_terms( 'product_cat', $args );
 
if ( $terms ) {
         
    echo '<ul class="product-cats">';
     
        foreach ( $terms as $term ) {
                         
            echo '<li class="category">';                 
                     
                woocommerce_subcategory_thumbnail( $term );
                 
                echo '<h2>';
                    echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
                        echo $term->name;
                    echo '</a>';
                echo '</h2>';
                                                                     
            echo '</li>';
                                                                     
 
    }
     
    echo '</ul>';
 
}

The code above defines the current queried object and defines its ID as $parentid. It uses get_terms() to identify terms with the currently queried item as their parent. For each term, it display the category image using woocommerce_subcatgeory_thumbnail(), followed by the category name in a link to its archive.

In your plugin folder, create a folder called css, and inside that, create a file called style.css.

Now in your plugin file having name cloudways-product.php . Add the following code

function cloudways_product_cats_css() {
 
 
    wp_register_style( 'cloudways_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
 
 
    wp_enqueue_style( 'cloudways_product_cats_css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'cloudways_product_cats_css' );

In the above code snippet, wp_register_style allows you to add you own style.css file that can contain custom CSS code that you can use for displaying the subcategories.

Conclusion

Product categories are an extraordinary element of WooCommerce, yet the way they are shown is not generally perfect. In this tutorial you have figured out how to create a plugin that outputs product categories or subcategories independently from the product listings and afterward you have styled your category listings.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Connected on: Twitter Community Forum