Troubleshooting //
Closing Popup with Filters after Filteration

Closing Popup with Filters after Filteration

Question

How to make the popup close automatically after the filters are applied?

Tutorial requirements:

Answer

To make the popup close automatically after the filters are applied, repeat these steps:

Create a popup with a set of all needed filters inside

Go to WordPress Dashboard > JetPopup > Create New Popup. Name the popup and click the “Edit with Elementor” button.

Once the page opens, add the previously created filters via the corresponding widgets from the JetSmartFilters plugin. In the filters’ Content settings, select the “JetEngine” operator, set the Apply type to “AJAX,” and Apply on to “Value change.” Don’t enable the Show apply button toggle just yet — use it as a separate widget.

set filters in popup

Add the Popup Action Button to the popup

Use the Popup Action Button widget with the “Close Popup” Action Type and the “Apply filters” Button text.

customize the popup action button

Place the Popup on the Page with Filtered Widget

Open the page where the Listing Grid widget is located in the Elementor page builder and drag-n-drop the Button widget. Open the Advanced settings tab, select the needed popup in the Attached Popup control, and pick the “Click on Widget” Trigger Type.

add button and attach to the page with listing grid

Proceed to the page on the front end, select some options in the filter, and items in the Listing Grid widget will be filtered automatically.

popup window with filters checked

Then click the “Apply filters” button, and the popup will be closed, and already filtered items will be displayed right away.

filtered listing grid with button for popup
Was this article helpful?
YesNo
Still need help?
Submit a request