WooCommerce Product Category

Solved: How To Display WooCommerce Categories on Any Page

WooCommerce Product Categories

Categorizing products is great a way to de-clutter your eCommerce shop and intuitively guide users to the page they are looking for. In WooCommerce you can easily group your similar products under a category, making it easy for users to scan and find the products.

For Example, if you sell T-shirts, Shirts, Pants, and Sunglass; for convenience you can easily categorize T-shirts, Shirts, and Pants under “Clothing” category and Sunglass under “Accessories”.

Product Category - Bellini WordPress Theme
Example: Product Category – Bellini WordPress Theme

In WooCommerce shop or archive pages you can display only products, only categories or both products and categories together. In this article we will see how to create WooCommerce categories and display them on shop or archive pages.

 

solution

Creating Product Categories in WooCommerce

How to Add Product Categories in WooCommerce

Adding category in WooCommerce is very simple. Within a few clicks you can create a category and assign products to that particular category. Follow these steps to create WooCommerce category:

  1. Go to Dashboard > Products > Categories
  2. On the left pane, you will find these fields (Name, Slug, Parent, Description, Display type & Thumbnail)
              Name: Your product category name (e.g. Shoes)
              Slug: determines the URL (e.g. if you write shoes it will translate into www.yoursite.com/product-category/shoes)
             Parent: If this category is the parent category or does it falls under another category
             Description: Detailed category info.
             Display Type: Determines when visitors lands on the category page what (products, subcategories or both) they will see.
             Thumbnail: Image of the product category
  3. After filling out all the category information, click on Add New Product Category button.

woocommerce-categories

How to Add Subcategories in WooCommerce

Depending on your need you can nest one product category under another in WooCommerce. Simply put, you can create a category and assign it as the parent or subcategory of another category. For example, Shoes can be the parent category and Nike Shoes can be the subcategory of the category Shoes.

  1. Go to Dashboard > Products > Categories
  2. On the right pane, you will find the list of all categories
  3. Click on any category you want to edit and it will take you to Edit Product Category page
  4. Select the parent category of this category from Parent category drop-down
  5. Click on Update to save your changes.

 

How to Upload Category Image in WooCommerce

You can upload category banner image or category thumbnail in WooCommerce. If your WordPress theme is WooCommerce compatible it will display this category image on the product category page. Follow these steps to upload category image:

  1. Go to Dashboard > Products > Categories
  2. On the right pane, you will find the list of all categories
  3. Click on any category you want to edit and it will take you to Edit Product Category page
  4. Scroll down to Thumbnail and click on Upload/Add Image to upload your category image.
  5. Click on Update to save your changes.

 

How To Re-order WooCommerce Product Categories

Products categories are ordered based on the order each product category was created. But you can easily change the order of how it will be ordered on the frontend (Shop Page, Sidebar Widgets or anywhere you want to display using shortcodes). Just follow thesesteps to re-order the categories.

  1. Go to Dashboard > Products > Categories
  2. On the right pane, you will find the list of all categories
  3. Click on the = icon on the end of the category and drag them to sort them.

Change Product Category Order

 

 

solution

Displaying WooCommerce Product Category

Show Product Categories on Homepage

If your theme is WooCommerce compatible (Storefront, Bellini) and has a homepage template that has WooCommerce sections, then you will be able to display product categories on Homepage. Otherwise you will have to display product categories using WooCommerce category shortcodes.

What is WooCommerce Shop Page

Upon installation WooCommerce automatically creates a shop page that displays all products. You can acces this page from Dashboard > Pages > All Pages. WooCommerce lets you decide how you want your Categories to be displayed on a page. For example, you can display only category, category with products or only products. WooCommerce lets you decide how you want your Categories to be displayed on a page.

For example, you can display only category, category with products or only products

  • Products
  • Categories or subcategories
  • Both products and categories

Show Product Categories on Shop Page

If you want to display product categories on your Shop page instead of just products, follow these steps:

  1. Go to WooCommerce -> Settings -> Products -> Display
  2. Select “show categories” from Shop Page Display
  3. Click on Save Changes

WooCommerce Categories on Shop Page

 

 

Show WooCommerce Sub Categories on Shop Page

Categories – Subcategories – Products. If you want your shop page to display in that order. Follow these steps:

  1. Go to WooCommerce -> Settings -> Products -> Display
  2. Select “show subcategories” from Default Category Display
  3. Click on Save Changes

WooCommerce Sub Categories

Show Product Categories on any Page

 You can display product categories on any page using the following shortcodes supplied with WooCommerce.

  • [product_category] – Display all the products of a certain category
  • [product_categories] – Display all product category

Let’s see how to display WooCommerce product categories on a page.

  1. Go to Dashboard -> Pages and select any page
  2. Write the shortcode [product_categories] to display all categories
  3. If you want to more control, you can use below parameters to modify what you want to display.example:[product_categories parent="0"]
  4. Click on Publish after making the changes.

 

Product Category Shortcode parameters:

ParameterAccepted ValueDescription
number12Number of categories you want to display
orderbyID | title | nameOrder the product by
orderASC, DESCDetermines the order of the categories, whether ascending or descending.
columns3Number of columns
hide_empty0 | 11 to hide category which don’t have any products listed under them.
parent0 | 10 to display only the parent categories and 1 to display all categories (with sub-categories)
ids12comma separated list of category IDs

Show Product Categories on Sidebar

If you want to display WooCommerce product categories on page sidebar, follow these steps:

  1. Go to Appearance > Widgets
  2. Find the widget called “WooCommerce Product Categories
  3. Drag to your desired sidebar.

Show WooCommerce Product Category on a Menu

  1. Go to Appearance -> Menus
  2. Click on Screen Options from top left and check Product Categories
  3. Now on the left pane a Product Categories tab will show up.
  4. Click on Product Categories tab to expand, select the categories
  5. Click on Save menu

solution

Customizing Product Category Template

One of the true wonders of WooCommerce is its flexibility. WooCommerce has lots of hooks (Action Hook & Filter Hook) in source code that lets developers easily modify the code.  For example here is a list of hooks that will let you modify the product category layout.

Action Hook – woocommerce_before_subcategory
Action Hook – woocommerce_before_subcategory_title
Action Hook – woocommerce_shop_loop_subcategory_title
Action Hook – woocommerce_after_subcategory_title
Action Hook – woocommerce_after_subcategory
Filter Hook – woocommerce_subcategory_count_html

Hide Product Category Title

If you want to hide the product category title, just insert this in your themes functions.php

Hide Product Category Count

For example, If you don’t want display the product category count on the shop page, just insert this snippet. Insert this code in your child theme’s functions.php file

If you currently running a shop and looking for WooCommerce theme, don’t hesitate to check out Bellini. A WordPress theme with deep WooCommerce integration.

Leave a Reply