How to Display Categories in WooCommerce

by Owais Alam  July 11, 2016

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.

^28D02127CD6BBFCC90638B85D42E05D67CF737F5659673D6E8^pimgpsh_fullsize_distr

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.

WooCommerce Admin Setting

Click the Save changes button to save.

WooCommerce Admin Setting

As it happens, in light of the fact that there are three product categories but here one of the product category is archived.

WooCommerce Admin Setting

Identifying WooCommerce Code to Output Categories and Products in Archives

The file WooCommerce uses to display archive pages is archive-product.php, which is in the templates folder.

Inside that file, you can find this code, which outputs the categories and products.

So there’s a woocommerce_product_subcategories() 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.

Now create a new function that outputs the product categories or subcategories, and hook it to the woocommerce_before_shop_loop action. WooCommerce adds clears to each third product listing, use the woocommerce_product_subcategories() function or an edited version of it to display the categories. 

Create Plugin

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.

Save your file and activate the plugin via the WordPress admin.

Function Writing

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 products. Save your changes.

WooCommerce Store

In your plugin file, add this:

Now add this code inside the function:

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.

Now save your file and refresh the page. It looks like this.

The categories are shown, however they require some styling.

Styling of Category Listings

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

This correctly en-queues the style sheet you’ve just created.

Now open your style sheet and add the code below. 

Now check main shop page again.

Here’s the Music category archive.

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.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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

Stay Connected:

You Might Also Like...

  • Игорь Литовка

    Thanks!