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
Bertus
The first category is open, how do I start with everything closed?
Luigi
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.
John
works great!! only thing, the icon doesn’t toggle when colapsing.
Do you have a clue?
I have no error in the console
parth
Hi John,where should I place this code?
Can you please help?
Felipe
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
Werbeagentur
Works great!
M
where shall this script go into please?
Mark
I couldn’t get this to work.
Mark
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!
Lance
Appreciate the tip. Worked great for me!
D
Sweet, works lika a charm.
-How to keep them all closed by default?