How to Display Product Categories in WooCommerce?

Updated: August 29, 2021

Share:

Product categorization is a wonderful method to streamline your WooCommerce store and naturally bring consumers to the page they need. You can quickly arrange your comparable products into a category in WooCommerce, making it easier for users to browse and discover them.

In this article, we will show you how to display product categories in WooCommerce.

Let’s get started!

Table of contents

Why Display Product Categories in WooCommerce?

  • By displaying product categories, customers can quickly peruse and locate the things they need.

  • Displaying product categorizes is a brilliant strategy to de-clutter your WooCommerce store and effectively send consumers to the page they desire.

  • Normally, WooCommerce allows users to display both products and categories/subcategories. This feature enables users to choose products directly from the home page or optimize their search by browsing a product category archive.

However, the biggest disadvantage is that the categories and subcategories are displayed together without distinction. Because of the varying dimensions, the layout can turn out a little disorganized.

As a result, you should show categories in a separate list before displaying items, which we’ll show you in a moment.

How to Display Product Categories in WooCommerce?

1. Display Product Categories on Shop Page

You can show only categories, categories with products, or only products on the shop page. If you want to display product categories rather than just products on your Shop page, follow these instructions:

Step 1: Log in to your WooCommerce account

First of all, you need to log in to your WooCommerce account and stay in the dashboard as the admin user.

Step 2: Go to Appearance > Customize

From the dashboard menu, click on Appearance > Customize.

Step 3: Go to WooCommerce > Product Catalog

After that, click on the shop page and select WooCommerce > Product Catalog.

Step 4: Select Show categories

On the Shop Page Display option, click on Show categories.

Shop Page Display

Step 5: Save changes

Finally, click on Save changes.

Furthermore, if you want to display WooCommerce subcategories on the shop page, you can do so easily on the Product Catalog page. Simply navigate to the Category display option and then select Show subcategories.

Category display

2. Display Product Categories on Any Page

The following WooCommerce shortcodes can be used to display product categories on any page.

  • [product_category]: Show all of the products in a specific category.
  • [product_categories]: Show all product categories.

As a result, to display product categories on a page, simply follow the steps below:

Step 1: Navigate to Pages

Go to Pages in the WooCommerce dashboard and choose any page where you want to display product categories.

Step 2: Add the shortcode

To display all categories, simply enter the shortcode [product_categories]. This PHP code snippet should be placed at the bottom of your child theme’s functions.php file (you must remove “?>” if it is present).

Step 3: Change the parameters (Optional)

If you would like to have more control, you can use the following parameters to change what you want to display.

Here are some product category shortcode parameters:

Parameter Accepted Value Description
number 12 Number of categories you want to display
orderby ID | title | name Order the product by
order ASC, DESC Determines the order of the categories, whether ascending or descending.
columns 3 Number of columns
hide_empty 0 | 1 1 to hide category which don’t have any products listed under them.
parent 0 | 1 0 to display only the parent categories and 1 to display all categories (with sub-categories)
ids 12 comma separated list of category IDs

For example, [product_categories parent="0"]

Step 4: Save changes

Finally, click on the button Publish to save all the changes.

3. Display product categories in the sidebar

Please follow these simple steps if you want to display WooCommerce product categories in the page sidebar:

Step 1: Navigate to Appearance > Widgets.

Step 2: Locate the “WooCommerce Product Categories” widget.

Step 3: Drag your cursor to the desired sidebar.

4. Display the WooCommerce product categories in a menu

Step 1: Navigate to Appearance > Menus

Step 2: From the top left, select “Screen Options” and check “Product Categories.”

Step 3: A “Product Categories” tab will appear on the left pane.

Step 4: Expand the “Product Categories” tab and select the categories you would like to display.

Step 5: Select the “Save” option to save changes.

5. Display WooCommerce Product Category

Step 1: Log into your WooCommerce account

To begin, log in to your WooCommerce account as the admin user and navigate to the Dashboard.

Step 2: Select Appearance > Theme Editor

Click Appearance > Theme Editor from the Dashboard menu.

Once you can see the Theme Editor page, search for the theme functions file, which is where we will insert the function displaying the WooCommerce product category.

Step 3: Add the code

You now need to include the following code in the functions.php file.



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


6. Create A Custom Plugin For Displaying Product Category

The process of displaying product categories described above is accomplished using inline code added to the functions.php file.

In some cases, WooCommerce store owners and developers prefer not to use inline code, primarily because they do not want to tamper with “good” code or because extensive customization could be jeopardized by adding code to functions.php.

A solid alternative for such users is to package all of this functionality into a plugin. The procedure is straightforward, and you have the option of turning off this functionality by deactivating the plugin.

Let’s get started!

Step 1: Create new plugin folders

Create a brand new folder in your wp-content/plugins directory and name it something recognizable. mageplaza-products-categories-in-archives is what we call it here. Then, create a new file within that, this time with another unique name. mageplaza-product.php is the name we give it here.

Step 2: Add the code

Now, open your file and paste the following code into it.



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


In your plugin file, add this:



function mageplaza_product_subcategories( $args = array() ) {
 
    }
add_action( 'woocommerce_before_shop_loop', 'magaplaza_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 aforementioned code specifies the currently queried object and its ID as $parentid. It employs get_terms() to locate terms that have the currently queried item as their parent. It displays the category image for each term using woocommerce_subcategory_thumbnail(), accompanied by the category name in a link to its archive.

Step 3: Create new css folders

Now make a new folder called css in your plugin folder, and then create another new file called style.css inside it.

Step 4: Add the code

Now, in your plugin file named mageplaza-product.php, paste the following code:



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


wp_register_style in the previous code snippet allows you to include your own style.css file containing custom CSS code for displaying subcategories.

Final Words

We’ve highlighted six different ways to display WooCommerce product categories in this article. We’ve talked about displaying product categories on the shop page, any page, in the sidebar, and in a menu, as well as how to create a custom plugin to display categories.

As you can see from this tutorial, product categories are a nice feature in WooCommerce, but displayed how they are not really desirable.

We hope you found our tutorial to be useful and informative. Thank you for taking the time to read this article, and we’ll see you in the next one.

Recommend for you
Image Description
SMS, Email Marketing Automation

Top rated Marketing automation for Shopify stores

Learn more
Image Description
SEO Suite

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up