Custom Collapse Shop Filter with Elementor

This tutorial will show you how to make a professional collapse filter on the shop page Woocommerce. Please watch the video tutorial and using my code to archive the result. This technique is quite simple using CSS and Javascript to apply. This tutorial I am using Elementor builder and plugin “Simple Custom CSS and JS” to add css and JS.

Toggle Show and Hide

This code will make the button become a trigger. When we click on the button, it will show the element under it. Remember to add “showBlock” on the button class and add “hiddenBlock” on the element class you want to show/hide.

Add Class into toggle When click

This code will help you add another class when we click on the button, this class will help us change the icon when element showing. Remember add class “iconswitch” on the button next to “showBlock” class.

Add Custom Icon Switch

Use this CSS to change the icon that you want when showing the dropdown element.

Note: In this tutorial, I use the icon arrow down with CSS class “fas fa-caret-down” with icon code is “\f0d7” for hiding filter. Therefore the icon when active still have the same CSS class “fa-caret-down” but the icon code will be an arrow up with code is “\f0d8“.

– Also if you use another icon for button, you should inspect again with a different CSS class and icon code.