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.
Popular Read: How to watch Videos not available in your Country from anywhere
Popular Read: Beginner’s Guide on Why and How to Shop from Amazon
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.
- Now choose the category whose display you want to change and click Edit.
- Scroll Down and under the Display Type choose any of the options as your need be.
- 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
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.
Wouldn’t it be better if we can show the display like this with subcategories being shown separately in category page in 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:
- 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.
- 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.
- 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.
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.
** 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.
READ OTHER POPULAR POSTS ON INFINITY FOLDER
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
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.
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
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
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