Bricks Builder staat bekend als de snelste, meest schone page builder voor WordPress. Maar zodra je een traditionele AJAX-filterplugin (zoals FacetWP, WP Grid Builder of JetSmartFilters van Crocoblock) koppelt aan een Bricks Query Loop, lever je die zorgvuldig opgebouwde performance direct weer in. Met de 4 native Bricks-elementen van InstantFilter behoud je de ultieme bouwvrijheid van Bricks én krijg je 0ms client-side DOM-filtering zonder dat je database bezwijkt onder zware SQL-queries.
Waarom traditionele filters de performance van Bricks Builder ondermijnen
Bricks Builder heeft de harten van professionele WordPress-developers veroverd door af te rekenen met de “div-soup” en bloat van oudere page builders. Bricks genereert uiterst schone, semantische HTML en heeft een krachtige ingebouwde Query Loop. Developers bouwen daarmee razendsnelle WooCommerce archieven en categoriepagina’s.
Het probleem ontstaat wanneer een webshop interactieve filtering nodig heeft. De native Query Loop van Bricks bevat zelf geen geavanceerd facet-filtersysteem. Developers grijpen daarom naar externe filterplugins:
- De server-side AJAX herlaadlus: Elke filterwijziging (maat, kleur, prijsklasse) stuurt een AJAX-verzoek naar de server om de Bricks Query Loop opnieuw uit te voeren.
- Database-overbelasting: De server voert meervoudige SQL-joins uit over
wp_posts,wp_postmetaenwp_term_relationships(bekijk onze diepgaande analyse over trage filter queries in wp_postmeta oplossen). Bij catalogi van 2.000 tot 50.000 producten (bekijk hoe we 50.000 producten direct filteren) leidt dit tot 500ms tot 2.000ms Time To First Byte (TTFB) per klik. - Verlies van caching: AJAX-verzoeken omzeilen Redis object caching en full-page caching (WP Rocket, LiteSpeed — lees onze gids over WooCommerce filter caching met Redis en WP Rocket), waardoor elke bezoeker de CPU en PHP-workers van je server direct zwaar belast.
Kortom: je gebruikt een ultrasnelle builder, maar je filterervaring voelt alsnog traag en haperend aan voor shoppers op mobiele verbindingen (wat leidt tot direct omzetverlies, zie ons onderzoek naar mobiele filterlatentie en conversies). Bouw je naast Bricks ook projecten in Elementor? Bekijk dan onze specifieke gids voor WooCommerce filters in Elementor. InstantFilter lost dit fundamenteel op.
De 4 native Bricks-elementen van InstantFilter
In tegenstelling tot plugins die vereisen dat je handmatig shortcodes plakt of vage CSS-klassen koppelt aan HTML-divs, levert InstantFilter een officiële, diepe integratie met Bricks Builder. In de broncode (src/Frontend/Bricks/Bootstrap.php) registreert InstantFilter op init (prioriteit 11, direct na Bricks core op prioriteit 10) vier speciale elementen binnen een eigen categorie in het Bricks-paneel:
1. IF — Sidebar + Grid (`instantfilter-listing`)
Dit is de complete e-commerce archief-shell. Het element rendert de filter-sidebar, toolbar (met sortering en resultaat-telling) en het productraster in één responsieve container. In het Bricks-instellingenpaneel configureer je direct:
- Listing: Selecteer een specifieke listing uit InstantFilter of gebruik het “Universal Archive”.
- Products per page: Aantal zichtbare producten per pagina (standaard 24).
- Card design: Kies een op maat ontworpen kaart uit de Card Builder of gebruik het thema-template.
- Force category/tag: Beperk de listing optioneel tot een specifieke categorie-slug.
- Default sort: Bepaal de startsortering (bijv. populariteit, prijs of datum).
2. IF — Grid (`instantfilter-grid`)
Rendert uitsluitend het productraster zónder filter-sidebar. Dit is ideaal voor developers die een aangepaste Bricks lay-out bouwen waarin de filters elders worden geplaatst, zoals in een horizontale balk boven de producten of in een aparte Bricks Offcanvas drawer.
3. IF — Filter sidebar (`instantfilter-filters`)
Rendert alleen de filter-sidebar voor de huidige WooCommerce-context. Dit element kan in elke willekeurige Bricks container, sectie of drawer worden geplaatst en synchroniseert automatisch met het productraster op de pagina.
4. IF — Single filter (`instantfilter-filter`)
Wil je één specifiek filter losstaand renderen (bijvoorbeeld alleen de kleursamples of alleen de prijsschuifregelaar)? Met dit element kies je een specifieke property key (bijv. pa_color of price) en plaats je het filter precies waar je wilt.
De taakverdeling: Bricks als content-wrapper, de Layout Builder voor de opmaak
Een cruciaal detail voor developers die met Bricks werken: de visuele opmaak van de filters en productkaarten gebeurt NIET via Bricks-stijlcontrols, maar via de ingebouwde Layout Builder van InstantFilter. Dit is een fundamentele ontwerpkeuze die direct zichtbaar is in het Bricks element-paneel:
“Styling for sidebar, grid, cards, mobile toggle, pagination and offcanvas is managed centrally in ‘InstantFilter → Layouts’. This widget only configures content (listing, per_page, card design).”
— Officiële instellingen-notitie in de InstantFilter Bricks elementen
Waarom is dit zo ontworpen? Als je een traditionele filterplugin gebruikt in combinatie met een Bricks Query Loop, moet Bricks voor elk individueel product tientallen geneste DOM-nodes opbouwen en stylen. Zodra een bezoeker filtert, moet de server die hele lus opnieuw renderen. InstantFilter ontkoppelt dit volledig:
Wat Bricks doet (Content & Context)
In Bricks bepaal je de pagina-indeling van je template: waar staat de header, hoe breed is de container, en welk InstantFilter-element gebruik je. In het Bricks-element configureer je uitsluitend de content: welke listing wordt geladen, het aantal producten per pagina (per_page), de standaardsortering en eventuele categorie-restricties.
Wat de Layout Builder doet (Render & Styling)
In de InstantFilter Layout Builder (in het WordPress-dashboard onder InstantFilter → Layouts, bekijk de documentatie) bepaal je de complete visuele structuur en styling van het archief. Hier beheer je de rasterkolommen per breekpunt (Wide, Desktop, Tablet, Mobiel), de sidebar-styling, de mobiele drawer-animatie én ontwerp je de productkaarten (afbeeldingen, prijzen, badges, variatieswatches en add-to-cart knoppen).
Bricks Template Resolution & Editor Preview
Een berucht probleem bij veel WordPress-plugins in Bricks is dat Bricks sjablonen (header, footer, archieven en popups) opslaat als afzonderlijke database-posts van het post type bricks_template. Standaard functies zoals has_shortcode() falen op die sjablonen omdat de content niet in de hoofdpost staat.
InstantFilter pakt dit elegant aan in src/Frontend/FrontendService.php:
- Hook op `bricks_render_data`: InstantFilter haakt in op prioriteit 5 van de Bricks render-cyclus en leest
\Bricks\Database::$active_templatesuit. Het scant het metaveld_bricks_page_content_2van elk actief sjabloon op filterelementen en shortcodes. - REST API Preview in de Bricks Editor: Wanneer je in de Bricks-editor werkt, rendert Bricks elementen via
/bricks/v1/render_elementen/bricks/v1/load_query_page. InstantFilter herkent deze REST-endpoints en laadt alle benodigde frontend-assets wél in, waardoor je in de editor direct een getrouwe visuele preview ziet van je filters en productkaarten.
Structure Only modus: Perfecte harmonie met Automatic.css (ACSS)
Veel professionele Bricks-ontwikkelaars gebruiken utility-frameworks zoals Automatic.css (ACSS) of Tailwind, of beheren al hun styling via Bricks Global Theme Styles. Een grote frustratie bij traditionele plugins is dat ze dwingende, moeilijk te overschrijven CSS meeleveren vol hoge specificiteit en !important regels.
InstantFilter introduceert hiervoor de Structure Only modus (beschikbaar in layout-instellingen via styling_mode = "structure"):
Wat ‘Structure Only’ doet:
Look-CSS wordt volledig uitgeschakeld: InstantFilter blokkeert het laden van dist/frontend/style.css en dist/frontend/card.css. Geen geforceerde achtergrondkleuren, geen voorgeschreven lettertypen en geen opdringerige borders.
Alleen functionele Machine-CSS: InstantFilter levert uitsluitend de noodzakelijke functionele layout-CSS: CSS Grid tracks, responsive kolomvariabelen (--if-cols-*), de mechanica van de off-canvas drawer, inklapbare accordions en de werking van de dual-range slider.
ACSS en Bricks Theme Styles winnen altijd: Omdat InstantFilter geen conflicterende design-stijlen injecteert, bepalen jouw Bricks-klassen en ACSS-utility classes direct het uiterlijk van knoppen, checkboxes, typografie en kaarten zonder CSS-gevechten.
Styling Modi Vergelijking
- Styled (Standaard): Volledige opmaak via de visuele Style Builder van InstantFilter. Ideaal als je geen extern CSS-framework gebruikt.
- Structure only: Schone semantische markup + machine-CSS. Ideaal voor Bricks developers met Automatic.css, Frames of eigen design tokens.
Benchmark: Bricks Query Loop met AJAX vs InstantFilter
Wat is het daadwerkelijke snelheidsverschil in de praktijk? We vergeleken een Bricks-categoriearchief van 5.000 WooCommerce-producten op een standaard Cloud VPS (4 vCPU, 8GB RAM):
Stap-voor-stap: Een Categorie-Archief Bouwen in Bricks met InstantFilter
Het inrichten van een bliksemsnel archief in Bricks Builder kost minder dan vijf minuten:
Stap 1: Maak een Archief-sjabloon in Bricks
Ga in WordPress naar Bricks → Templates en klik op Nieuw toevoegen. Kies als template type Archive. Stel bij de template settings de voorwaarde in op Post type archive == Producten of Taxonomy archive == Productcategorieën.
Stap 2: Voeg het InstantFilter Element toe
Open de Bricks-editor. In het linkerelementen-paneel scroll je naar de sectie InstantFilter. Sleep het element IF — Sidebar + Grid direct in je sectie of container. InstantFilter genereert onmiddellijk de preview van het archief.
Stap 3: Configureer instellingen en stylingmodus
Selecteer het element en pas in het linkerpaneel het gewenste aantal producten per pagina aan (bijv. 24 of 48). Gebruik je Automatic.css of Bricks Global Styles? Ga dan in het WordPress-menu naar InstantFilter → Layouts (de Layout Builder) en zet de layout op Structure only. Sla de template op en publiceer hem.
Waarom developers kiezen voor InstantFilter in Bricks
- Echte native elementen: Geen rommelige shortcodes of custom code snippets nodig.
- 0ms reactietijd: De client-side architectuur sluit perfect aan bij de performance-filosofie van Bricks.
- Structure Only modus: Geen gevechten met hardcoded CSS; ACSS en Bricks Global Styles werken direct.
Waar je rekening mee moet houden
- Exclusief voor WooCommerce: InstantFilter is gespecialiseerd in WooCommerce-producten en ondersteunt geen custom post types zoals huizen of blogs.
- Initiële catalogus-indexering: Bij de eerste installatie bouwt InstantFilter op de achtergrond een index op. Dit duurt enkele seconden tot minuten afhankelijk van je catalogusgrootte.
Veelgestelde vragen over Bricks Builder & InstantFilter
Verdiep je in Bricks & filterperformance
Ontdek meer over geavanceerde WooCommerce-architectuur en hoe je het maximale uit Bricks Builder haalt:
- InstantFilter vs WP Grid Builder
- WooCommerce filteren op merk
- Dynamische facet-tellingen zonder SQL
- Zoeken vs filteren op categorie-archieven
- InstantFilter vs JetSmartFilters
- InstantFilter vs FacetWP
- WooCommerce filter voor Elementor
- AJAX vs Frontend-first filtering
- Trage queries en wp_postmeta oplossen
- Bekijk InstantFilter licenties en prijzen
Ervaar 0ms filtering in Bricks Builder
Installeer InstantFilter op je staging-omgeving en ervaar de ultieme combinatie van Bricks Builder en razendsnelle client-side productfiltering.