Launched January 16, 2024
EASY Elementor Loop Grid JavaScript Filtering
Loop Grid Filtering with Elementor!
FreeOpen Source9,733 impressions#12 of its week
This repository contains a simple yet powerful JavaScript solution designed to enhance the functionality of Elementor loop grids. The script enables dynamic filtering of Elementor loop grid items based on user input, providing a seamless and interactive experience.
A JavaScript script that adds dynamic, real-time filtering to Elementor Pro loop grids.
- for
- Elementor Pro users who need searchable grid listings
- pricing
- open source
- license
- GPL-3.0
works withElementor ProjQueryMutationObserver
Key features
6 features of EASY Elementor Loop Grid JavaScript Filtering
- Dynamic Filtering — Filters grid items in real time as the user types, with a 1-second debounce.
- Automatic Item Count — Shows the number of visible items versus total items in the grid.
- MutationObserver Integration — Detects DOM changes to keep the item count accurate when items are added.
- Responsive UI Elements — Provides styled input and count display that adapt to different screen sizes.
- Load More Compatibility — Resets filter and updates count when Elementor’s Load More button adds items.
- Pagination Support — Works with Elementor’s pagination feature, though infinite scroll isn’t verified.
Use cases
- Allow visitors to quickly find products in a shop grid
- Enable searchable FAQs displayed as a loop grid
- Filter portfolio items by title or tag on a landing page
EASY Elementor Loop Grid JavaScript Filtering FAQ
Do I need Elementor Pro to use the script?+
Yes, the script is designed for Elementor Pro and compatibility with the free version isn’t guaranteed.
How is the filtering triggered?+
Filtering runs 1 second after the user stops typing to avoid excessive updates.
Can the script work with infinite scroll?+
It has not been tested with infinite scroll, so functionality there is unverified.
What if I encounter issues?+
Check that Elementor Pro is up to date, verify script placement, or ask for help on ChatGPT with your page HTML.
Do I need to write custom JavaScript?+
No, you just insert the provided code into a page or Elementor template as instructed.
Summarized by DevHunt from github.com · Oct 2, 2026. Details may change; check the official site.
.png?width=64)
