Out of the box, WooCommerce gives you the ability to display product categories on the shop and archive (categories & tags) pages. In many cases, you will need to show product categories in different places like the home page, sidebar, or in the top menu.
In this tutorial, you will learn how to add WooCommerce categories to any place you want on your website.
Let’s dive right in.
Display categories on the shop page
Open the theme customizer by going to your admin dashboard -> Appearance -> Customize.
Select WooCommerce -> Product Catalog -> Shop page display.
There are three options. Select the one you like:
- Show products
- Show categories: displays top-level categories only, no subcategories.
- Show products & categories
Display subcategories on the category pages
Again, open the theme customizer -> WooCommerce -> Product Catalog -> Category display.
There are three options:
- Show products
- Show subcategories: this will display the subcategories of the current category
- Show subcategories & products
Display categories on any page using a shortcode
The WooCommerce categories shortcode [product_categories] is really helpful, it is a WooCommerce built-in shortcode that can be used with Gutenberg, any theme, or any page builder you have. You can add this shortcode to any page or post to display the categories.
This shortcode has a lot of parameters to define which categories to display:
- ids: specifies which categories to display by their ids. Here you add the ids separated by a comma.
- limit: here, you add a number to specify how many categories to display.
- columns: The number of columns to display. Defaults to 4
- hide_empty: accepts “1” and “0” the default is “1” which will hide the categories with no products.
- parent: set to a specific category ID if you would like to display all the subcategories. Alternatively, set to “0” to show only the top-level categories.
- orderby: you can order the categories by “name”, “id”, “slug”, or “menu_order”.
- order: ascending (ASC) or descending (DESC). The default is ASC.
You can read more about this shortcode in the WooCommerce docs here.
Display WooCommerce categories using our Woo Categories module
The plugin comes with a dedicated categories module; no need to mess with shortcodes or anything. Just add the module to any Divi page, and with a few mouse clicks, you can display WooCommerce categories anywhere.
The module works with Divi’s theme builder and can display all the categories, selected categories, or dynamically based on the current page.
This means if you are viewing the shop page, you can display the top-level categories only. Also, when you open a specific category page, you can set the module to show the child categories of the current page.
All this is done with almost no effort; select some options, and you’re done.
The Woo Categories module main options
- Module title: sets a title for the categories list. If you have no categories, nothing will be displayed.
- Which Categories to Display: Select which categories to display; all categories, specific categories, or dynamically based on the current category.
- Order By: Order categories by name (default), id, slug, or order_menu.
- Order: States whether the categories order is ascending or descending.
- Columns Number: Choose how many columns to display. Default is 3.
- Hide Empty: Hide categories that have no products.
- Hide Subcategories: Show top-level categories only.
- Hide Products Count: Hide the products count next to the name of each category.
- Show Category Description: Show the category description under the title.
- View Products Button: Add a button to take the user to the category page.
- Plus tons of the design options for each element.
Display WooCommerce categories in the sidebar
WooCommerce has a built-in widget for the sidebar, and it is called “Product categories.” You can find it under your admin dashboard -> Appearance -> Widgets.
The product categories widget options:
- Widget title
- Order by
- Show as dropdown
- Show product counts
- Show hierarchy
- Only show children of the current category
- Hide empty categories
- Maximum depth
Display WooCommerce categories in the menu
To add the categories to the menu, you will first have to enable a little option.
Go to your admin dashboard -> Appearance -> Menus. On the top of the page, click “Screen Options.”
From the opened modal, check the “Product categories” option.
Next, you have more than one menu, make sure you select the menu you want.
From the list menu, click “Product categories.” You will get a list of all the WooCommerce categories you have, check the ones you want, and add them to the menu.
In the end, I hope you found this article helpful. If you have any questions, please, let me know in the comments below.