How to Display Categories and Subcategories in WooCommerce

Keeping products in your online store neat and sorted is crucial for your store’s success.

Organizing your products is important so your customers can easily find what they’re looking for. This can become a challenge, especially for large stores with a vast product catalog.

But there are ways to neatly organize your products into categories and subcategories so that it’s easier for customers to navigate your store.

Missing it out can negatively affect your conversion rates and the store’s overall profitability. We’d not want that for you. Hence we created this blog post.

Here, we’ll take you through step-by-step instructions on how to display WooCommerce product categories and subcategories on your store, so you can improve the user experience and boost your sales.

These instructions are gold for WooCommerce novices and seasoned pros alike. So, let’s dive in and get started!

---

Understanding WooCommerce Categories and Their Importance

WooCommerce Product categories are broad groupings of products based on their shared characteristics or features. For example, if you run an apparel store, your product categories might include Men’s, Women’s, and Children’s wear.

Each product category can contain multiple subcategories, which are more specific groupings of products within a category.

For example, within the Women’s clothing category, you might have Tops, Bottoms, Dresses, and Accessories subcategories.

Using categories and subcategories in WooCommerce creates a more organized and user-friendly store that makes it easier for customers to find and purchase the products they want.

Why Should You Display Product Categories in WooCommerce?

Displaying product categories is important for an e-commerce store for several reasons:

1. Easy navigation
2. Better organization of products
3. Using relevant keywords in your category names can improve your website’s ranking in search engine results pages (SERPs).
4. Improves SEO
5. Displaying product categories can also help with your marketing efforts

How to Display Default Category, Subcategory, and Product in WooCommerce

When you set up a store, you usually select the show categories/subcategories and products option to imply that visitors can either select products from the home page or refine their search by clicking through to a product category archive.

Here’s how you can display categories on your WooCommerce store.

• Go to WooCommerce → Settings,
• Select the Products tab
• Choose the Display option.
• Select Show both for each of the Shop Page Display and Default Category Display options.
• Click the Save Changes button to save changes.

Note: All the code mentioned below should be placed in the functions.php file in the theme folder.

Fast Shopping Experience = Happy Customers and Better Profits!

Cloudways offers an optimized stack with NGINX, Apache, MySQL/MariaDB, PHP-FPM, free SSL, dedicated firewalls, etc, for a worry-free hosting experience.

Try 3 Days Free!

How to Display WooCommerce Product Category

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

• Open the functions.php file and insert the following code:

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 );

How to List Subcategories of a Product Category

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

• Open the functions.php file and insert the following code:

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>';
}

The WP_Term object gets the product category parent in the above code snippet. 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.

How to Display WooCommerce Category Description

The following code snippet should be placed in the WooCommerce template file 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.

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>';
 
  }
 
}

How to Create Custom Plugin for Displaying Product Category

The above process of displaying subcategories for the WooCommerce product categories is done through inline code 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 where there is extensive customization that could get derailed by adding code to the functions.php file.

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.

• Create a new folder in your wp-content/plugins directory and give it a unique name. I’ll call it cloudways-products-categories-in-archives.
• Inside that, create a new file, again with a unique name. I’ll name it: cloudways-product.php
• Open your file and add the following code:

<?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 displays 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; inside that, create a file called style.css.
• Name your plugin file as 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 your own style.css file containing custom CSS code that you can use to display the subcategories.

How to Display Product Categories on Shop Page in WooCommerce

Displaying product categories on the shop page is a really easy task. You can do it by following the steps mentioned below.

• Go to the WordPress backend – Hover over the Appearance button.
• Click on the Customize option.

• Scroll down and click WooCommerce > Product Catalog.

• You’ll see the settings. Under the shop page display, click the dropdown and then click the Show Categories option.

And that’s how you can easily display product categories on the shop page in WooCommerce.

See the example below to see how the shop page looks when you show product categories on it.

There are other ways too for displaying products on the shop page. That’s using the sidebar and in the menu. Let’s look at how that’s done.

How to Display Product Categories on the Sidebar

Displaying product categories on the sidebar is a great conversion tactic. People can browse your store while always having a look at the categories you sell in case they want to explore further.

Here’s how you can display the categories on the sidebar.

1. Go to Appearance in the WordPress backend and select Widgets.
2. Click the dropdown on the sidebar.

• Look for the widget called Product Categories.

1. Drag it in and customize it for your store.

You can add other widgets as well to make your sidebar more illustrative. For example, filters for different attributes such as price, category, etc.

Here’s an example of how it looks when you display product categories on the sidebar:

How to Display WooCommerce Product Category in a Menu

Displaying product categories in a menu form is another way to present to your customers what you sell. Here’s what it looks like to display product categories in a menu:

You can easily do this for your store by following the steps mentioned below.

1. Go to Appearance in the WordPress backend and click on Menus.
2. Click on Screen Options in the top left corner. Then select Product Categories.
3. Now, on the left pane, a new tab will show up with the title – product categories. Click on it to expand, and you’ll see all the categories for your store. Select the ones you want on the menu, and click the Add to Menu button.

Note: Since this is a dummy store, there are no categories present here. But you’ll see them in your actual stores.

4. Click on the Save Menu button, and your work is done.

Other Product Category Actions You May Want for Your WooCommerce Stores

There will be times when you’ll need to hide or sort product categories. Maybe because of an overlap, or maybe because the pictures explain the category, and you don’t need to display the tags.

Whatever the reason, let’s explore some other product category-related actions that you may need for your WooCommerce stores.

How to Hide Product Categories in WooCommerce

You can hide product categories in WooCommerce in two ways:

• Via a plugin
• Via a code

Let’s explore them both.

How to Hide Product Categories in WooCommerce (Via Plugin)

You can use the plugin called Hide Categories and Products for Woocommerce. It’s a paid tool priced at $4.09/month. Once you have the plugin installed, you’ll see it under the WooCommerce option.

You then need to follow the instructions below:

WooCommerce → Products Visibility → Global Visibility

Then, select the categories you want to hide and save the changes. Doing so will help you in hiding the product categories in WooCommerce.

How to Hide Product Categories in WooCommerce (Via Code)

You can use customized codes to hide the product categories. Here’s an example of a code that hides the products using the get_term filter:

add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 );

function show_product_categories() {

// Display product categories

echo do_shortcode( '[product_categories]' );

}

You can use other custom methods to get the job done as well. The modifications will depend upon your requirements.

How to Hide Product Category Title in WooCommerce

You can hide the product category title in WooCommerce using the following code:

add_action( 'init', function() {

remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) );

} );

How to Hide Product Category Count in WooCommerce

You can hide the product category count in WooCommerce using the following shortcode:

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null;

}, 10, 2 );

How to Sort by Category in WooCommerce

You can sort by category using the following shortcode:

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null;

}, 10, 2 );

How to Set the WooCommerce Category Image Size

Here’s how you can set the WooCommerce category image size:

1. Go to Appearance and click on Customize.2. Click on WooCommerce in the panel and then choose Product Images.3. You’ll see some settings. Choose the one you like or click on customize to set a custom size.

• That’s it. Following the simple steps above will help you set the WooCommerce category image size.

Best Practices for Organizing WooCommerce Product Categories

Organizing WooCommerce product categories effectively can significantly improve user experience and make store management more efficient. Here are some best practices for organizing your product categories and subcategories:

• Choose category names that are simple, descriptive, and easy to understand.
• Limit the number of main categories.
• Ensure your subcategories are relevant and specific to their main category.
• Ensure you consistently categorize products according to their features and functionalities.
• Optimize category pages
• Regularly review your store’s organization and make adjustments as needed.
• Ensure your store’s design is responsive and mobile-friendly.
• Enable breadcrumbs to help users easily navigate between categories, subcategories, and product pages.

Tips to Optimize WooCommerce Product Categories for SEO

Here are some tips for optimizing your WooCommerce product categories for SEO:

• Conduct keyword research
• Optimize category and subcategory names
• Create SEO-friendly URLs
• Craft unique, keyword-rich descriptions for each category and subcategory
• Use header tags (e.g., H1, H2, H3) to structure your category and subcategory pages.
• Use high-quality images for your categories and subcategories, and optimize them for fast loading.
• Add internal links
• Add schema markup (structured data) to your category and subcategory pages.
• Use SEO plugins, like Yoast SEO or Rank Math, to help you optimize your WooCommerce store.

Drive Your Online Store’s Growth with Autonomous

“Step into the future of hosting with Cloudways Autonomous. Experience seamless scalability, unmatched speed, and ironclad security for your website.”

Start Today!

Common Issues Users Face in Displaying Product Categories and Their Solutions

Users may run into some common issues while displaying the product categories on their WooCommerce stores. This section covers those issues and their solutions.

Problem # 1: Categories Not Showing on the Menu

Sometimes you’ve identified the categories, but they don’t appear on the Menu. You can resolve this issue by following these steps:

Solution

Follow the steps below:

• Go to Appearance > Menus in the WordPress dashboard. <
• Click on the “Screen Options” tab in the top-right corner and make sure the “Product Categories” checkbox is checked.<

•  Now, you can see product categories in the left column. Select the categories you want to add to the menu and click “Add to Menu.”

• And you’re done.

Problem # 2: Category Images Not Displaying

Sometimes you won’t see the category images on your WooCommerce store, but it can be easily fixed.

Solution

Firstly, you must ensure that you have assigned an image to each category. To do that:

• Go to Products > Categories.
• Click “Edit” below the category name.
• Scroll down to the “Thumbnail” section and click “Upload/Add image” to set a category image.

• Save your changes.

Problem # 3: Categories Displayed in the Wrong Order

Sometimes you will see that the categories are not displayed in the right order on your WooCommerce store.

Solution

You can manually set the order of your product categories by following the steps below:

• Go to Products > Categories.
• Use the drag-and-drop interface to rearrange the categories as desired.

Problem # 4: Displaying Empty Categories

By default, WooCommerce displays all categories, including empty ones.

Solution

To hide empty categories, add the following code snippet to your theme’s functions.php file:

add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );

function hide_empty_categories( $args ) {

$args['hide_empty'] = 1;

return $args;

}

Problem # 5: Category Pages Are Not Indexed by Search Engines

Some users may notice that their WooCommerce category pages are not being indexed by search engines.

Solution

• Ensure your category pages are not set to “noindex” in your SEO plugin settings (such as Yoast SEO or Rank Math).
• Additionally, check the “Search Engine Visibility” setting in Settings > Reading and make sure the “Discourage search engines from indexing this site” option is unchecked.

Summary

Displaying categories and subcategories in your WooCommerce store is essential for providing a clear and organized shopping experience for your customers. By categorizing your products, you make it easier for customers to find what they are looking for and encourage them to explore related products.

In this tutorial, you have figured out how to create a plugin that outputs product categories or subcategories independently from the product listings.

By implementing these methods, you can enhance the usability and functionality of your WooCommerce store, which can lead to increased customer satisfaction and sales.

Frequently Asked Questions