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


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.

Popular Read: How to watch Videos not available in your Country from anywhere


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
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
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

Popular Read: How to Create a Website on WordPress without any Computer, Programming or Coding Knowledge

Other Read: How to get your website to appear in Search Engines like Google, Bing & Yahoo


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
Display SubCategories separately in Category Page Woocommerce

Popular Read: How to Create and Submit a SITEMAP to Google Search Console

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
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
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


Display SubCategories separately in Category Page Woocommerce
Display SubCategories separately in Category Page Woocommerce

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


Popular Read: How to Create a Baidu Account from Outside China without Chinese Phone Number


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.

Follow us on Twitter and Instagram to stay updated.

*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 with 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



0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *