How to Display SubCategories separate in Category Page WooCommerce

HOW TO DISPLAY SUBCATEGORIES SEPARATELY IN PRODUCT CATEGORY PAGE IN WOOCOMMERCE IN WORDPRESS

Last Updated on January 26, 2021 by Anjum

Simplicity is the key for any e-commerce website. The easier it is to shop from a website, the more sales are likely to take place!

When it comes to an E-Commerce Website, it is all about the experience that the user will have with your website that will matter.

If the experience is good and the user is easily navigating and browsing your website then you are likely to make a sale.

On the other hand, if the customer is having difficulty in navigating your website and not easily finding the thing he came looking for than you are more than likely to not only not make the sale but to lose the customer for good as well.

MAKE SURE YOUR WEBSITE IS EASY TO BROWSE

In order for the e-store to be successful, the website needs to be easy to understand. By easy it means when the customer surfs the website he or she is able to browse your website without having any difficulty. The Customer knows if he has to look for clothes he can find it in the top menu or the sidebar or if he wants to know about the website’s background then there is an about page that is easy to find.

Some websites that don’t have proper Menus or proper internal links end up being difficult to navigate and lose the business all together. This is a nightmare for any e-commerce store’s owner.

Other Read: Beginner’s Guide on Why and How to Shop from AliExpress

PRODUCT CATEGORIES AND SUBCATEGORIES

In an online store product categories are essential. They tell your customers what kind of products are available in your shop. It also makes the website easier to use from a customer perspective.

PRODUCT CATEGORY is a type of product. For instance, any type of Trousers or Shirts will come under “Clothing” Product Category. In your store you can make product categories as per your liking. There is no hard and fast rule. The Product Category can be as specific as it can be or it can be as vague as you want. All you need to do is to make sure that the product category that you are defining helps your customers browse the required products that they want.

SUB-CATEGORIES are further classification of the product category. For example, you can have Shirts as a Sub-category for Clothing. Here, Clothing is the Parent Product Category and Shirts is the Child or Sub-category under the parent category. Here let’s suppose the customer wants a green shirt, then from the Menu he can select the Product Category Clothing and then will select Shirts and then will select the green shirt from the different types of shirts on display.

Categorizing helps the store in making a sale because when the customer clicks on a category, he gets to see all the options similar to the product that he came looking to the online store in the first place.

Also Read: How to Increase the size of Search Bar in Storefront theme on WooCommerce

DEFAULT DISPLAY IN PRODUCT CATEGORY PAGE ON WOOCOMMERCE IN WORDPRESS

Ideally when the user clicks on the Product Category, you will want them to see the sub-categories separately first and then the products but unfortunately the built in settings only show:

Sub-Categories and Products grouped together.

Only Products can be shown.

Or you can only show the Sub-Categories.

HOW TO CHANGE THE DISPLAY SETTINGS FOR PRODUCT CATEGORY PAGES IN WOOCOMMERCE IN WORDPRESS

In order to select any of the above mentioned display types you will need to go to the Product Category Settings. This is how you can tinker with the categories settings:

Go to your WordPress Dashboard.

Under the Products option on your Dashboard select Categories.

**Select Products then Categories on your E-Store Dashboard**

Now choose the category whose display you want to change and click Edit.

**Hover your cursor on the Category you want and Click on Edit**

Scroll Down and under the Display Type choose any of the options as your need be.

Select Display Type from the Drop-down Menu — **Select Display Type from the drop-down Menu**

Click on Update at the bottom of the page and you are good to go.

Also Read: How to Remove the Error: ‘The Image Code is incorrect!’ from WooCommerce Customer Login

WHAT IF YOU WANT TO DISPLAY THE SUB-CATEGORIES SEPARATELY FIRST AND THE PRODUCTS LATER AND NOT GROUP THEM ALL TOGETHER?

If you want a neat display on your category archive pages then you would want the user to first see the sub-categories pertaining to that particular product category and then after a bit of a gap you want them to see the products.

Unfortunately the built in Display options do not have this feature rather the “Both” option will show the sub-categories and the products grouped together like this.

This is how your Category Page will look if you select Display Type "Both". Notice that the subcategories are looking same as the products. — **This is how your Category Page will look if you select Display Type “Both”. Notice that the subcategories are looking same as the products**

Wouldn’t it be better if we can show the display like this with subcategories being shown separately in category page in WooCommerce?

**Display SubCategories separately in Category Page Woocommerce**

Also Read: How to Submit a Website to Baidu Webmaster Tools

HOW TO DISPLAY SUBCATEGORIES SEPARATELY IN PRODUCT CATEGORY PAGE IN WOOCOMMERCE WORDPRESS

In order to display the Subcategories separately at the top on the category page in WooCommerce, all you need to do is add a short code in the settings and it will be done. It is extremely easy to do and you don’t need to know any sort of coding or programming to do it yourself. Here’s how to do it:

Go to the Product Category Settings (See the procedure mentioned above).

Write the Following Code in the Description of your product category:

[product_categories parent=”79″ columns=”5″]

**Add ShortCode in the Description Section of Edit Category**

The Number “79” after parent is the Product Category and Tag ID. You can find your product category ID that you want in the web address bar on top of the page.

**Product Category ID can be seen on the web address bar at the top of your screen**

All the sub-categories under that product category whose ID you will write in the code will show up in your website.

The Number “5” after columns is the number of Sub-Categories you want to display in one row.

After you have entered the code, change the display type in the Edit Category Section to ‘Products’. That way when you will browse that category page, your Sub-Categories will be shown first and then the products after a bit of a gap.

Now click Update at the bottom of the screen and check the results on your website. You will get the sub-categories separate and the products separate.

Show subcategories separatly — **Subcategories are shown separately**

If you have further sub-categories of a sub-category then the same code will work there as well. Just change the ID as mentioned on the web address bar of that particular sub-category and you are good to go.

For further neatness and ease of customer you can even write Sub-Categories and Browse Products in the description so that it will become even clearer to the user.

In order to do this add the following in the Description Section of your product category page.

Sub-Categories
[product_categories parent=”79″ columns=”5″]
Browse Products

You can try and customize it anyway as per your liking. This gives a better and easier to browse platform to your user.

IN A NUTSHELL

Nobody likes a complicated and difficult to browse website, more so if that website is there to sell something. A website where you only want some information or you only have to browse a single webpage will not be effected much by bad navigability but with respect to an E-Commerce Store, this is detrimental.

Just like a physical store if the aisles are not clearly marked and products are placed in no particular order, the customer will not be able to easily find the item they wanted. They will have to ask a Customer Support Agent or Representative from the shop to find them that product. But if they have a list of products to purchase then the whole process will be cumbersome and it will not be a good experience for the customer.

Similarly in an e-store if the products are not placed or found where they should be then the whole experience will turn out to be a sour one for the customer. For instance if you cannot find shirts in one place rather other products like cell phone covers are showing up and there is no way to only show Shirts then you will not want to go to that website again.

Easy Navigability is the key to a successful online store. That is why it is always a good idea to display subcategories separately in product category page in WooCommerce so the customer knows that there are certain types of products within a category.

*Affiliate Links Disclaimer

** All the Pictures are taken from www.onemorecart.com with their permission

Let us know in the comments if the procedure has worked for you.

Share it on Social Media

This post was on How to Display SubCategories Separately in Product Category Page in WooCommerce on WordPress.

Happy Reading!

READ OTHER POPULAR POSTS ON INFINITY FOLDER

Categories: Technology

Tags: BlogHow toOnline ShoppingOnline StoreshoppingStorefrontTechnologyWebsiteWooCommerceWordPress

11 Comments

David · April 7, 2024 at 9:26 am

Hi!

Thanks for this explanation!

It’s an old post but I try to ask anyway.

I have spent hours (newbie!) trying to find out how to achieve the same taxonomy as in this website: http://www.modernity.se

I want the following:

Product categories in top menus, click and navigate to a page with all subcategories (text only) on top of page, below that – all products (info about products when hovering above each) without any text or info. Click product-single product page with all info.

Crucial! No drop down menus for sub categories in top menu.

Thanks in advance!

Hugh · December 30, 2021 at 5:57 pm

Doesn’t work for me, maybe the latest woocommerce update has changed something?
Basically, the description box is not or no longer a rich text editor, just plain text.
Also, it says “The description is not prominent by default; however, some themes may show it.”
Any ideas? Cheers.

Anjum · December 30, 2021 at 7:25 pm

Hi Hugh,

I have just checked again and it is working for me. For reference you can check our ecommerce site http://www.onemorecart.com and see its categories.

I would suggest to just paste the code in the description area and see if it works. Don’t forget to press “Update” button at the bottom of the edit category page after putting in the code.

Jen · December 7, 2023 at 1:51 pm

Michael (Jan 1, 2022) – brilliant!!! Such an easy mistake to miss, but so easy to solve once you know what the problem was! “” Now it works for me 🙂

michael · January 1, 2022 at 11:21 am

The reason why you can’t get it to work, is because the author is using curly quotation marks in his shortcode example. They all need to be straight.

Amir · April 23, 2021 at 9:59 pm

Hello. How can I thank you? you solve my problem

Mikaela · January 22, 2021 at 10:13 pm

Hello, this is not working for me, or I can do what I should. Can you help me please?

Anjum · January 23, 2021 at 10:35 am

Hello Mikaela,
In which step are you facing a problem? Let me know how can I be of help.

Qutozz · January 24, 2021 at 6:47 pm

Hello . Its not working with me can you give support . I want all proudct categories shown under the brand. I choose display subcategory . I want all subcategories appears under the brand . Thanks

Anjum · January 26, 2021 at 1:59 pm

Hi,

I have checked your website. If I am assuming correctly this is what you want – when you open the brands page you want to display subcategories like Topface, Forever52 first and then you want to show the products in these brands separately on the same page. If that is the case then do the following:

1- In your Brands page settings choose to display Products
2- Note the Page Id at the top bar (web address) of the Brands page.
3- Write the following code in the description section of the Brands page settings and replace the word PageID with the Brands Page ID:
[product_categories parent=”PageID″ columns=”5″]
4- Hit Save and check now.

Screenshots of everything are shared in the post above.

I hope this solves it for you

Gina · December 31, 2022 at 8:38 am

Its working for me but The subcategories are not showing the full image now. It’s cutting off the edges. How do I get it to show full image of 960×960 which all my thumbnails are for my categories

How to Display SubCategories Separately in Category Page in WooCommerce

Published by Anjum on September 18, 2020September 18, 2020