WooCommerce Sidebar Category Toggles

In my developing, I recently decided to enable toggling for the WooCommerce Product Categories sidebar widget.

I’ve outlined the experience below for future WordPress developers’ use.

Solving An Issue

The original issue is that if you include the Product Categories widget, it will display all of the categories.

Sure you can limit it to “only show children of the current category.“ But what if you wanted to give the user quick/easy access to ALL categories (and sub categories), without having a huge list of links?

CSS + jQuery To The Rescue

You can view the code here:

The Result?

Using a combination of CSS and jQuery, you can force hide the sub categories, and then toggle them open and closed with the click of a toggle.

In addition, you can check to see if the page is a “current category” – and if so, it can automatically expand its sub-categories too.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles