Friday Next is no longer taking new clients or performing work for existing clients.

In a recent project I built, I needed individual category pages to populate themselves.  I could have coded them myself, but I would rather use the built-in functionality in wooCommerce.  It was, however, a bit hard to find the correct settings to get everything working properly.

The Categories

Here’s an overview of a few of the categories I set up.  I gave them each featured images, so that when a parent category was chosen, the child categories’ featured images would show, hyperlinking to the child categories’ list of products.

Product Categories List - Friday Next Web Development

Getting WooCommerce Ready

Once you have your categories and sub-categories set up properly, you need to enable the “Show subcategories on category pages” setting within wooCommerce.  It’s in the ‘Catalog’ section of the settings panel.

WooCommerce Sub-Category Setting - Friday Next Web Development

Point To Your Newly Created Sub-Category Pages

Once you’ve checked the proper setting, it’s time to point to the sub-category pages!  The great news is that wooCommerce has already created these pages for you – you simply have to load the correct url.

WooCommerce Product Category Pages - Friday Next Web Development

In this example, I wanted the ‘Desktop’, ‘Laptop’, and ‘iPod’ pages to show the featured images of their child categories.  So if a user clicks on ‘Desktop’, I want to see the featured images for iMac, Mac Pro, and Mac mini.

WooCommerce Product Category Pages - Friday Next Web DevelopmentIn your WordPress settings, you can edit the location of each menu item.  In my case, I made sure to point the parent category to the following url:

  1. Root URL
  2. ‘/product-category’
  3. ‘/mac’ (grandparent)
  4. ‘/desktop’ (parent)

This shows all of the children whose parent category is ‘Mac’.

Each child gets the same url treatment; however, after the parent category, I entered the child category.  In this case, it was ‘iMac’.  Now all ‘iMac’ products will be displayed when the child category’s link is clicked.[hr]

Final Result

WooCommerce Product Sub-Category Pages - Friday Next Web Development

The ‘Desktop’ page now shows the featured images of the child pages.  When one of the images is clicked, you get the child page with its associated products.

WooCommerce Product Sub-Category Pages - Friday Next Web Development

Wrap-up

You don’t have to reinvent the wheel (or re-code the template, for that matter) when it comes to getting your site set up the way you want it.  Be sure to use the tools already at your disposal to make your development easy and efficient.

Share This

Share this post with your friends!