WooCommerce Accordion Style Expand/Collapse Product Category Menu

Here is a jQuery solution for a WooCommerce accordion style menu for the product category menu that can be assigned with a WooCommerce widget, the menu works best when all product categories are assigned to a parent category.

The Accordion menu will then expand and collapse on click with the first parent category appearing expanded, the count span also has a link to the child category archive page. I have come across the original code (which I have modified)  on a site with no credit/author reference.

The toggle icons have been marked up with FontAwesome5 regular free icons, so either have that loaded or change the markup for something else.

12 comments

  • The first category is open, how do I start with everything closed?

  • with the new version of produc list (gutemberg block) there aren’t parent class added:(

  • Kadigan

    This is great, but it has one flaw: your code fails to check if both cases (current-cat-parent + current-cat) are in effect, which would be if, for example, you have a 2nd level of nesting. What happens is that the parent category unfolds, but the child category *does not*.

    In order to fix that, you have to remove the else{} from the equation (since it makes little sense at that point, and it made little sense to me anyway), and then disjoin the if/elseif combination into two separate if() statements to handle both cases at the same time.

  • works great!! only thing, the icon doesn’t toggle when colapsing.
    Do you have a clue?
    I have no error in the console

    • Hi John,where should I place this code?
      Can you please help?

  • Hi Guys, sorry, can anybody help me here?

    The Jquery is not working on the Shop Page, or Tag page.. It is working Just on Archives.

    It is showing this error on console:

    jquery.min.js:2 Uncaught ReferenceError: fpC is not defined
    at HTMLDocument. ((index):89)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

    Thanks guys

  • where shall this script go into please?

  • I couldn’t get this to work.

  • Have you or anybody else ever taken the filters from WC and made those into an Accordion?

    I’ve been looking and looking and can’t find anything. Thanks in advance!

  • Appreciate the tip. Worked great for me!

  • Sweet, works lika a charm.
    -How to keep them all closed by default?

Leave your comment