Woocommerce is the most popular ecommerce plugins so far for greating ecommerce website. Many people always have the problem of not knowing how to Display woocommerce product categories on any page of their choice to suit their design. In this article I shall teach you how to Display woocommerce product categories on any pagee or post using a simple shotcode. You shall also learn other shotcode to ease othe categories specifications such as; such as number of categories to show and number of categories per row.
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 the “Clothing” category and Sunglass under “Accessories”.
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 the shop or archive pages.
Adding categories 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 a WooCommerce category:
www.yoursite.com/product-category/shoes
)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.
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:
Product 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 these steps to re-order the categories.
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 the Homepage. Otherwise, you will have to display product categories using the WooCommerce category shortcodes.
What is the WooCommerce Shop Page
Upon installation WooCommerce automatically creates a shop page that displays all products. You can access 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, the 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, the category with products or only products
If you want to display product categories on your Shop page instead of just products, follow these steps:
Categories – Subcategories – Products. If you want your shop page to display in that order. Follow these steps:
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 categoryLet’s see how to display WooCommerce product categories on a page.
[product_categories]
to display all categories[product_categories parent="0"]
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 |
If you want to display WooCommerce product categories on page sidebar, follow these steps:
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
If you want to hide the product category title, just insert this in your themes functions.php
1 | remove_action('woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', 10 ); |
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
1 | add_filter( 'woocommerce_subcategory_count_html', '__return_null' ); |