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

  1. Bertus on September 23, 2022 at 10:17 pm

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

  2. Luigi on August 10, 2021 at 5:22 pm

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

  3. Kadigan on February 2, 2021 at 3:39 pm

    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.

  4. John on November 5, 2020 at 2:44 pm

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

    • parth on November 19, 2020 at 9:54 am

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

  5. Felipe on October 29, 2020 at 6:27 am

    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

  6. Werbeagentur on October 3, 2020 at 10:44 am

    Works great!

  7. M on July 16, 2020 at 2:50 pm

    where shall this script go into please?

  8. Mark on March 27, 2020 at 9:22 pm

    I couldn’t get this to work.

  9. Mark on March 27, 2020 at 9:11 pm

    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!

  10. Lance on February 24, 2020 at 2:32 am

    Appreciate the tip. Worked great for me!

  11. D on February 28, 2019 at 4:35 pm

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

Leave all Comment