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.

Need help?

Tell us about your project!

This field is for validation purposes and should be left unchanged.

Related articles