InstantFilter documentatie

Snelstartgids

InstantFilter draait binnen WooCommerce. Je configureert filters in WP Admin → InstantFilter, indexeert je catalogus en plaatst vervolgens een shortcode of Bricks-element op een shop- of landingspagina.

1. Start je proefperiode en installeer

1. Download de gratis 14-daagse proefversie (geen creditcard nodig) of kies een licentie op onze prijzenpagina.
2. Download de plugin-zip vanuit je Lemon Squeezy bevestigingsmail.
3. In WordPress: Plugins → Nieuwe toevoegen → Plugin uploaden, activeer InstantFilter.
4. Open InstantFilter → Licentie en plak je licentiecode. Andere tabbladen blijven vergrendeld totdat de code is gevalideerd.

2. “Producten herladen”

Klik op “Producten herladen” in de admin-header (of in stap 1 van de wizard). Dit vult de wp_if_items tabel met je WooCommerce-catalogus. Na deze eerste run houdt InstantFilter de tabel automatisch synchroon wanneer je producten opslaat, bijwerkt of verwijdert — je hoeft alleen handmatig te herladen na grote imports of als je een verschil ziet tussen WooCommerce en het aantal items.

3. Filters toevoegen

Ga naar het tabblad Eigenschappen en klik op “Filter toevoegen”. De dialoog bevat bron, referentie, label en weergavetype:

• Bron — waar de data staat (taxonomy, attribuut, meta, ACF of een Loop-bron die filters voor alle attributen tegelijk aanmaakt).
• Referentie — het specifieke veld of attribuut (bijv. pa_color, product_cat).
• Filternaam — wat shoppers in de zijbalk zien.
• Weergavetype — checkbox, kleurstaal, bereik-slider, dropdown…

Sla op en herhaal dit voor elk filter dat je in de zijbalk wilt hebben. Zie Eigenschappen voor de volledige veldreferentie.

4. “Filters bijwerken” & Kaarttemplate kiezen

Klik op “Filters bijwerken” in de admin-header. InstantFilter indexeert elke ingeschakelde eigenschap tegen je catalogus en bouwt (met Auto Build Exports ingeschakeld, de standaardinstelling) de JSON-export zodat de frontend client-side kan filteren.

Onder InstantFilter → Layouts kies je via Card templates direct een passend template uit de bibliotheek (Standaard, Catalogus, Vitrine of Lifestyle) voor je universele archief. Vanaf Pro kun je deze templates met de StyleBuilder volledig aanpassen.

5. Plaats een shortcode of Bricks-element

Voeg dit toe aan een pagina, categorie-template of page builder-blok:

[instant_archive]

Gebruik je Bricks Builder? Sleep dan gewoon het element IF — Sidebar + Grid op je pagina of WooCommerce archieftemplate — er is geen shortcode nodig. Zie de Bricks Builder documentatie.

Dat rendert het volledige archief: filter-zijbalk, productoverzicht, sorteerbalk en paginering. De eerste pagina-laadbeurt wordt op de server gerenderd voor SEO; nadat de export is gehydrateerd, worden filterklikken in de browser afgehandeld.

Ga verder met Eigenschappen voor de filterinstallatie, Listings voor aangepaste collecties, Kaarttemplates & StyleBuilder voor kaartstyling en Bricks Builder voor native page builder integratie.

Hoe indexering werkt

InstantFilter scheidt welke producten er bestaan van waarop shoppers kunnen filteren en wat de browser laadt. Drie lagen, elk met zijn eigen admin-actie:

Delta sync — je hoeft “Producten herladen” zelden opnieuw uit te voeren

Zodra “Producten herladen” voor de eerste keer is uitgevoerd, houdt InstantFilter de itemtabel synchroon via WordPress-hooks. Het opslaan, bijwerken, verwijderen of herstellen van een product activeert een delta-update die alleen de betreffende rijen raakt — geen volledige herbouw.

Voer “Producten herladen” handmatig uit wanneer:

• Je een grote batch producten hebt geïmporteerd buiten de normale opslagflow om (CSV, WP All Import, REST API bulk).
• Je een verschil ziet tussen het aantal WooCommerce-producten en het aantal InstantFilter-items.
• Je de variatie-splitsingsregels hebt gewijzigd en wilt bevestigen dat alles klopt.

Voor dagelijkse cataloguswijzigingen houdt de delta de index actueel zonder dat je iets hoeft te doen.

Statusindicator in de header

De pill naast de actieknoppen weerspiegelt de huidige status:

• Geen producten geladen — eerste run; klik op “Producten herladen”.
• X van Y filters actief — sommige eigenschappen moeten opnieuw worden geïndexeerd; klik op “Filters bijwerken”.
• X filters actief — klaar voor de frontend.
• Geen filters aangemaakt — voeg ten minste één filter toe op het tabblad Eigenschappen.

Wanneer “Filters bijwerken” uitvoeren

• Na het toevoegen, bewerken, uitschakelen of herordenen van filters.
• Na het genereren van Loop-eigenschappen (het scant je catalogus voor elk attribuut).
• Na het wijzigen van variatie-splitsingsregels zodat de optie-aantallen de nieuwe kaartstructuur weerspiegelen.

De export wordt automatisch opnieuw opgebouwd wanneer Auto Build Exports is ingeschakeld (aanbevolen). De handmatige “Export bouwen”-knop verschijnt alleen wanneer de WordPress debug-modus is ingeschakeld.

First paint vs client-side filtering

Shoppers zien een volledig HTML-productoverzicht bij het eerste verzoek (SSR), zodat zoekmachines en schermlezers dezelfde content krijgen. De export laadt op de achtergrond; eenmaal gehydrateerd, belasten filter- en pagineringsklikken je server niet voor de filterverwerking. Daarom moeten items, eigenschappen en export allemaal actueel zijn voordat je de prestaties op een staging-omgeving beoordeelt.

Licentie

Ga naar InstantFilter → Licentie (admin.php?page=if-admin&tab=license).

Activeer je code

1. Plak de licentiecode uit je Lemon Squeezy aankoop- of proefperiode-e-mail.
2. Klik op “Activeren”. De plugin valideert tegen de InstantStack-servers en ontgrendelt Eigenschappen, Variaties, Listings, Kaarten en Instellingen.
3. Zonder een geldige licentie is alleen het tabblad Licentie bruikbaar — andere tabbladen zijn grijs gemaakt.

Proefperiode-flow

Proefperiodes worden uitgegeven via Lemon Squeezy (14 dagen op de website; de plugin kan een langere proefperiode tonen afhankelijk van de reactie van de licentieserver). Na het afrekenen ontvang je per e-mail een downloadlink en licentiecode.

Wat je niveau bepaalt

Sitelimieten uit de Founders prijzen. Als je een product- of listinglimiet overschrijdt, tonen de indexeringsknoppen “Limiet bereikt” totdat je upgradet.

Deactiveren of sites verplaatsen

Gebruik de deactiveringsoptie op het tabblad Licentie voordat je naar een ander domein migreert en activeer vervolgens opnieuw op de nieuwe site. Voor vragen over facturatie of restitutie zie de FAQ.

Eigenschappen (Filterdefinities)

InstantFilter → Eigenschappen is waar je definieert welke filters in de zijbalk verschijnen. Elke rij is één filter. Ingeschakelde filters worden geïndexeerd wanneer je op “Filters bijwerken” klikt.

Eigenschappentabel

• Actief — schakelaar om een filter op te nemen in of uit te sluiten van indexering en de frontend.
• Filternaam — het label dat shoppers in de zijbalk zien.
• Bron — waar de data vandaan komt (Algemeen, Taxonomy, Attribuut, Loop, etc.).
• Type — weergavetype (checkbox, bereik, kleurstaal, …).
• Acties — bewerken, verwijderen, shortcode kopiëren [instant_filter prop="…"].

Sleep rijen om filters te herordenen. Door Loop gegenereerde attributen verschijnen genest onder hun Loop-parent.

Loop-eigenschappen

In plaats van handmatig één filter per attribuut aan te maken, kun je een Loop-bron gebruiken:

• Loop Globale Attributen — scant de catalogus en maakt een onderliggend filter aan voor elk globaal attribuut (pa_*).
• Loop Aangepaste Attributen — hetzelfde voor aangepaste productattributen.

Wanneer je een Loop-eigenschap opslaat, genereert de plugin automatisch veel onderliggende filters. Voer “Filters bijwerken” opnieuw uit na het genereren. Gebruik Attributen uitsluiten (één sleutel per regel) om attributen over te slaan die je niet in de zijbalk wilt tonen.

Resultaat in de webshop: elk opgenomen attribuut wordt een eigen filter blok in de zijbalk, gesorteerd volgens jouw sleepvolgorde.

“Filter toevoegen”-dialoog — veldreferentie

Klik op “Filter toevoegen” om de modal te openen. Belangrijkste velden:

Zie ook Variaties voor catalogusbrede splitsingsregels en Instellingen voor zijbalklimieten.

Variaties

Variabele producten zijn de manier van WooCommerce om één hoofdproduct in meerdere smaken te verkopen — maten, kleuren, afwerkingen. Standaard toont de webshop het hoofdproduct als een enkele kaart met een prijsbereik. Het splitsen (exploding) van een variatie-attribuut splitst die ene kaart in meerdere kaarten, één per variatie. Dit is het verschil tussen “Nike Air Force 1” als een enkele tegel of drie tegels voor zwart, wit en blauw.

Visueel voorbeeld

Eén variabel product met drie kleurvariaties. De bovenste rij is de standaard weergave van het hoofdproduct; de onderste rij is hetzelfde product waarbij kleur is gesplitst:

Weergavemodi

Waar je dit configureert

Op twee plaatsen — beide schrijven naar dezelfde centrale lijst met splitsingsregels:

1. Eigenschappen → Filter toevoegen/bewerken → Geavanceerde instellingen. Wanneer de filterbron een attribuut is (bijv. pa_color), toont de modal een veld Variatie-weergavemodus. Gebruik dit wanneer je het attribuut zowel als zijbalkfilter wilt gebruiken als wilt bepalen hoe het variaties splitst.
2. Tabblad Variaties → Attribuut toevoegen. Gebruik dit wanneer je een attribuut wilt splitsen zonder het als filter in de zijbalk te tonen. Voorbeeld: splits producten in afzonderlijke kaarten op kleur, maar laat shoppers nooit op een kleurfilter klikken.

Een attribuut dat via een eigenschap wordt beheerd, toont een Via eigenschap badge op het tabblad Variaties en blijft synchroon wanneer je het filter bewerkt. Handmatige items worden alleen op het tabblad Variaties bewerkt.

Sub-parents bij gedeeltelijke splitsing

Schoenen hebben vaak twee attributen: kleur en maat. Als je splitst op kleur maar niet op maat, maakt InstantFilter één kaart per kleur — een sub-parent die elke maat voor die kleur groepeert:

• Rood — maten 1, 2, 3
• Blauw — maten 1, 2, 3
• etc.

Deze sub-parents zijn geen WooCommerce-variaties. Ze bestaan alleen in de index van InstantFilter zodat het overzicht één tegel per gesplitst attribuut kan tonen. In WooCommerce zijn de echte variaties nog steeds de individuele combinaties:

• Rood, maat 1
• Rood, maat 2
• Rood, maat 3

Elk daarvan heeft zijn eigen variatierecord in WooCommerce — inclusief een eigen afbeeldingsveld. De sub-parent kaart heeft geen afbeelding in Woo; InstantFilter kiest er een uit de onderliggende variaties wanneer de tegel wordt gerenderd. Welke afbeelding je ziet, hangt af van wat je op die variatierijen hebt geüpload.

Wat te doen in WooCommerce: stel de variatie-afbeelding in op elke rij en kies een foto die het attribuut benadrukt waarop je hebt gesplitst — niet degene die je gegroepeerd hebt gelaten. Voor kleur-splitsing + maat-gegroepeerd krijgt elke rode variatie een foto van de rode schoen, ongeacht de maat:

• Rood, maat 1 → rode schoen (geen maatspecifieke opname)
• Rood, maat 2 → rode schoen
• Rood, maat 3 → rode schoen

Hetzelfde geldt voor blauw, groen, enzovoort. Als maat-1 en maat-2 van dezelfde kleur verschillende foto's gebruiken, kan de sub-parent de variatie tonen die InstantFilter als eerste tegenkomt — houd ze dus consistent op het attribuut dat je belangrijk vindt.

Resultaat in de webshop: het productoverzicht toont hoofdkaarten, sub-parents of individuele variatiekaarten, afhankelijk van je regels; filteraantallen weerspiegelen de gesplitste items, niet alleen de hoofd-SKU's.

Listings

Een listing is a productcollectie met een eigen shortcode en (optioneel) een eigen filterset. Gebruik listings wanneer één shoppagina niet genoeg is — landingspagina's voor aanbiedingen, merkwinkels, overzichten met alleen voorraad of B2B-subsets.

Universeel Archief (systeem-listing, ID -1)

Elke installatie bevat een ingebouwde listing die de WooCommerce-archiefcontext weerspiegelt. Plaats de shortcode op een Woo-archiefpagina en deze weet waar hij zich bevindt:

• Op de hoofdshop — alle geïndexeerde producten en de volledige filterset.
• Op een categorie-archief — alleen producten in die categorie, met filters en aantallen aangepast aan de context.
• Op een tag-archief — hetzelfde, beperkt tot de tag-term.

Shortcode: [instant_archive]

Aangepaste listings

Klik op “Listing toevoegen” op het tabblad Listings. De dialoog komt overeen met het screenshot hieronder:

Configureer:

• Naam — admin-label.
• Slug — URL-veilige identificatie die intern wordt gebruikt.
• Product Query — combineer nul of meer van:
  • Meta Query condities (post meta key + vergelijking + waarde).
  • Taxonomy Query condities (taxonomy + term ID's/slugs).
  • Post ID's (komma-gescheiden) voor expliciete selecties.
  Gebruik “Voorbeeld” om te zien hoeveel producten overeenkomen voordat je opslaat.
• Producten sorteren — standaard sorteervolgorde per listing (date, price, price-desc, sale, en popularity wanneer ingeschakeld). Bezoekers kunnen dit overschrijven via het sorteermenu of ?orderby= in de URL. Zie Sorteren.
• Status — Actief of Inactief.
• Context-gevoelig — indien ingeschakeld, respecteert de listing bovendien de WordPress-archiefcontext (categorie, tag) van de pagina. Laat dit uitgeschakeld als je wilt dat de listing dezelfde producten rendert, ongeacht waar de shortcode is geplaatst.

Shortcode voor listing-ID 42:

[instant_archive listing_id="42"]

De aliassen listing="42" en id="42" werken ook.

Voorbeeld: listing met alleen voorraad

Toon alleen producten die momenteel op voorraad zijn — geen “breng me op de hoogte” of nabestelling-rijen in het overzicht.

1. “Listing toevoegen” → Naam: Op voorraad.
2. Voeg onder Meta Query een conditie toe: sleutel _stock_status, vergelijking =, waarde instock.
3. Klik op “Voorbeeld” om te bevestigen dat het aantal producten klopt.
4. Sla op en plaats de shortcode op je “Nu beschikbaar” pagina:

[instant_archive listing_id="42"]

Variatie-splitsingsregels zijn nog steeds van toepassing, dus een variabel product dat gedeeltelijk niet op voorraad is, kan alleen de voorradige variaties als kaarten tonen.

Werkwijze

1. Maak de filters aan die je beschikbaar wilt hebben op het tabblad Eigenschappen.
2. Maak een listing aan en configureer de query.
3. Voer “Filters bijwerken” uit als je eigenschappen hebt gewijzigd.
4. Plak de shortcode op een WordPress-pagina of page builder-blok.

Listing-limieten hangen af van je licentieniveau — zie Licentie.

Kaarttemplates & StyleBuilder

InstantFilter scheidt de presentatie van productkaarten van je thema. In plaats van starre WooCommerce loop-bestanden kies je uit kant-en-klare templates in de Template Bibliotheek (beschikbaar voor alle licenties), of pas je kaarten tot op de pixel aan met de visuele StyleBuilder (beschikbaar vanaf Pro).

Template Bibliotheek (alle licenties)

In InstantFilter → Layouts (of tijdens de onboarding-wizard) vind je de knop Card templates. Hier kies je uit vier professioneel ontworpen presets die direct klaar zijn voor gebruik:

• Standaard (Classic) — De vertrouwde e-commerce opzet: productafbeelding, categorie-eyebrow, producttitel, prijs en directe winkelwagenknop. Ideaal voor allround shops.
• Catalogus (Compact) — Een strakkere, compacte weergave gericht op snel scannen en efficiëntie. Zeer geschikt voor B2B, technische onderdelen of grote productcatalogi.
• Vitrine (Showcase) — Een visueel opvallende kaart met grote productafbeelding, prominente badges en subtiele typografie. Perfect voor consumentenproducten en merkwinkels.
• Lifestyle (Hero Card) — Een ruimere editorial indeling met sfeerbeelden en verfijnde layout. Optimaal voor mode, sneakers, interieur of lookbooks.

Koppelen aan het Universeel Archief of Listings

Zodra je een template activeert, kun je bepalen waar deze wordt toegepast:

• Universeel Archief (v1.4.0) — Wijs één template toe als universele layout. Al je standaard WooCommerce archieven (de hoofdshop, productcategorieën en product-tags) gebruiken deze template dan automatisch.
• Per Listing — In de instellingen van een specifieke listing (onder InstantFilter → Listings) kun je een eigen kaart kiezen om af te wijken van het universele archief.
• Via shortcode of Bricks — Met het attribuut card="mijn-kaart-slug" overschrijf je de weergave direct op paginaniveau:

[instant_archive card="catalogus"]
[instant_archive listing_id="42" card="lifestyle"]

StyleBuilder (vanaf Pro)

Heb je een afwijkend ontwerp nodig, specifieke velden die getoond moeten worden of een unieke huisstijl? Met een Pro of Agency licentie open je de visuele StyleBuilder (klik op Bewerken bij een layout of maak een nieuwe aan via Layout toevoegen).

1. Blokken toevoegen & structureren

In de visuele boomstructuur sleep of klik je elementen in de gewenste hiërarchie:

• Productafbeelding — met ondersteuning voor secundaire hover-afbeelding en aspect ratio.
• Titel & Eyebrow — dynamisch gekoppeld aan producttitel, merk of primaire categorie.
• Prijsweergave — reguliere prijs, actieprijs en prijsreeksen bij variabele producten.
• Beoordeling (Rating) — sterrenwaardering en review-aantallen.
• Badges — automatische badges voor uitverkoop, nieuwe producten of voorraadstatus.
• Attributen & Kleurstalen — toon beschikbare maten of klikbare/hoverbare kleurstalen direct op de kaart.
• Winkelwagenknop — directe AJAX toevoegknop met subtiele loading-animatie.

2. Visuele Design-tab

Styling pas je toe zonder één regel CSS te schrijven via overzichtelijke accordeons:

• Spacing & size — padding, marges, breedte, hoogte en min/max dimensies.
• Background & colour — achtergrondkleuren, tekstkleur en accenttinten.
• Border & shadow — randen per zijde afzonderlijk instelbaar, hoekradius (ook per individuele hoek) en schaduwpresets.
• Typography — lettergrootte, letterdikte (font-weight), regelhoogte en tekstuitlijning.
• Layout & position — flexbox-uitlijning, gap-tussenruimtes en absolute positionering (handig voor badges).
• Interactive states — afzonderlijke vormgeving voor hover, active en checked statussen.
• Custom CSS & classes — voor ontwikkelaars die specifieke utility-classes of custom animaties willen meegeven.

3. Responsive Design Cascade (Wide → Mobile)

De styling werkt volgens een heldere top-down cascade:

Wide (1920px+) is het uitgangspunt. Waarden die je hier instelt, vloeien automatisch door naar Desktop, Tablet en Mobile. Pas wanneer je op een kleiner breakpoint (bijv. Mobile) een specifieke waarde invult, geldt die als gerichte override. Zo houd je je styling consistent zonder op elk schermformaat alles opnieuw in te hoeven vullen.

4. Veilige werkkopieën (Drafts & Publish)

Bewerkingen in de StyleBuilder slaan automatisch op in een veilige werkkopie (draft). Bezoekers in je webshop blijven de actieve versie zien totdat je op Update / Publiceren klikt. Wil je recente wijzigingen verwerpen? Met Discard herstel je in één klik de laatst gepubliceerde live versie.

Nog geen Pro-licentie? Bekijk de mogelijkheden op onze prijzenpagina.

Hooks & integraties

Drie manieren om iets toe te voegen aan het productgrid of aan een kaart. De eerste twee zijn voor ontwikkelaars. De wishlist is een kant-en-klaar blok in de StyleBuilder.

Tussen de kaarten

Met de action instantfilter_between_cards zet je een eigen cel tussen de productkaarten. Wat erin staat bepaal je zelf: een banner, een tekstblok, een shortcode, een call-to-action of iets anders. Een reclamekaart is daar één voorbeeld van. De haak vuurt in de server-render, één keer per productslot, telkens vóór de kaart op die plek. Ook vóór een leeg slot op de laatste pagina.

do_action( 'instantfilter_between_cards', int $index, int $per_page );

• $index is het productslot waar je cel vóór komt. 0 is vóór de eerste kaart, 4 is vóór de vijfde.
• $per_page is het aantal producten per pagina. De cel die je injecteert telt daar niet in mee.

Er verschijnt alleen iets als je callback zelf HTML echoot. Echo je niets, dan komt er geen lege cel in het grid. InstantFilter wikkelt je output in <div class="if-grid-insert">. Echo dus alleen de binnenkant, en gebruik niet de klasse ifc-card. Die klasse is voor productkaarten.

Bij filteren, sorteren en pagineren blijft de cel op dezelfde plek staan. Hij wordt niet opnieuw berekend. Levert een filter minder producten op dan de positie van de insert, dan verbergt InstantFilter de cel. De HTML blijft staan voor een volgende, vollere pagina.

Eén cel op een vaste plek, hier een actie vóór het vijfde product:

add_action( 'instantfilter_between_cards', function ( int $index, int $per_page ): void {
    if ( $index !== 4 ) {
        return;
    }
    echo '<a class="my-insert" href="/actie">Voorjaarsactie</a>';
}, 10, 2 );

Hetzelfde patroon werkt voor iets anders, bijvoorbeeld een tekstblok om de negen producten (vóór product 9, 18, 27 enzovoort):

add_action( 'instantfilter_between_cards', function ( int $index, int $per_page ): void {
    if ( $index === 0 || $index % 9 !== 0 ) {
        return;
    }
    echo '<aside class="my-insert"><h3>Hulp nodig?</h3><p>Bel ons voor advies.</p></aside>';
}, 10, 2 );

De plugin kent ACF niet. Je leest zelf een veld uit en echoot alleen op de index die je wilt. Hier een afbeelding met link uit optievelden:

add_action( 'instantfilter_between_cards', function ( int $index, int $per_page ): void {
    if ( $index !== 4 ) {
        return;
    }
    $image = get_field( 'grid_blok_afbeelding', 'option' );
    $url   = get_field( 'grid_blok_link', 'option' );
    if ( ! $image || ! $url ) {
        return;
    }
    printf(
        '<a class="my-insert" href="%s"><img src="%s" alt=""></a>',
        esc_url( $url ),
        esc_url( $image['url'] )
    );
}, 10, 2 );

Custom slot

Een custom slot is een blok in de StyleBuilder. Je zet het op de kaart waar de knop of shortcode moet komen. InstantFilter roept daarna de filter instantfilter_card_slot_html aan en plaatst de HTML die jij teruggeeft in dat blok.

De filternaam hoort bij het slot. De standaardnaam is custom_slot_1. Geef je het slot in de builder een andere naam, dan vergelijk je die naam in de callback. Zo kun je twee slots op één kaart verschillend vullen.

add_filter( 'instantfilter_card_slot_html', function ( $html, $slot_name, $product, $node ) {
    if ( 'custom_slot_1' !== $slot_name ) {
        return $html;
    }

    return do_shortcode( '[jouw_wishlist_shortcode]' ); // vervang door de shortcode van je plugin
}, 10, 4 );

Tijdens de filter is global $product het WooCommerce-product van deze kaart. Een shortcode die dat globale product leest, ziet dus de juiste kaart.

• $product['id'] is het variatie-id als de kaart één variatie is. Een wishlist die dit id opslaat, bewaart die variatie en niet het hoofdproduct.
• $product['product_id'] en $product['parent_id'] blijven het hoofdproduct.

De eerste paginalading tekent het slot op de server. Daarna komt dezelfde HTML uit de export, in dezelfde gang als titel en prijs. Daarom hoort bij elk nieuw slot een nieuwe index.

Wishlist

In de StyleBuilder staat een wishlist-blok. Op de bibliotheekkaarten Standaard, Catalogus, Vitrine en Lifestyle zit het hartje rechtsboven, op een witte cirkel. Heeft een bestaande layout dat hartje nog niet, pas de bibliotheeklook dan opnieuw toe. Een nieuwe look krijgt het vanzelf.

InstantFilter kiest zelf een wishlist-plugin als er een actief is, in deze volgorde:

1. YITH WooCommerce Wishlist
2. TI WooCommerce Wishlist
3. WPC Smart Wishlist
4. WCBoost Wishlist

In het blok kun je die automatische keuze laten staan, of één van de vier plugins vastzetten. Staat er geen van deze plugins aan, dan tekent InstantFilter geen knop.

Een product dat al op de verlanglijst staat toont meteen een gevuld hart. Dat blijft zo na filteren en pagineren. Antwoordt YITH dat het product er al op staat, dan kleurt het hart alsnog in.

Bij variaties geldt dit:

• Een kaart die één volledige variatie is, slaat die variatie op.
• Een deelvariatie, bijvoorbeeld alleen de kleur, slaat het hoofdproduct op. De wishlist-plugins kennen geen halve variatie.

Instellingen

InstantFilter → Instellingen — globale instellingen voor indexering, export, zijbalk en weergave. Wijzigingen hier hebben invloed op elke listing, tenzij deze per shortcode worden overschreven.

Index & export

Prestaties (batchgroottes)

• Batchgrootte items — producten per batch tijdens “Producten herladen” (standaard 200).
• Batchgrootte eigenschappen — producten per batch tijdens “Filters bijwerken” (standaard 50, meestal lager dan items).
• Batchgrootte Loop-generatie — grootte van de catalogus-scan bij het genereren van Loop-eigenschappen (standaard 50).

Verlaag de batches als je host een time-out geeft; verhoog ze op dedicated servers voor snellere volledige herindexeringen.

Zijbalkgedrag

• Max. uitgeklapte eigenschappen — hoeveel filters volledig geopend starten; de rest wordt ingeklapt in accordeon-stijl (0 = alles ingeklapt).
• Max. zijbalk-eigenschappen — beperkt het totaal aantal gerenderde filters (standaard 25, 0 = onbeperkt). Voorkomt een enorme DOM bij shops met tientallen Loop-onderdelen.

Labels voor kaartweergave

• Prijsweergave variabel product — Vanaf vs Bereik voor variabele hoofdproducten.
• Weergave aanbiedingsprijs — toon doorgestreepte prijs + aanbiedingsprijs, of alleen de aanbiedingsprijs.
• Placeholder voor verborgen prijs — tekst wanneer een product de prijs verbergt in WooCommerce.
• Labels voor voorraadstatus — pas de teksten voor In voorraad / Niet op voorraad / In nabestelling aan op de kaarten.

Debug

Debug-modus en Debug-log (indien aanwezig) maken uitgebreide logging en de handmatige “Export bouwen”-knop in de header mogelijk. Schakel dit uit op productie, tenzij je een probleem aan het diagnosticeren bent.

Het admin-tabblad Exports verschijnt alleen wanneer WordPress WP_DEBUG is ingeschakeld — dit is voor inspectie door developers, niet voor dagelijkse installatie.

Sorteren

InstantFilter sorteert producten in het overzicht via een sorteer-dropdown in de webshop. Bezoekers kunnen wisselen tussen opties zoals nieuwste, prijs, aanbieding en — wanneer ingeschakeld — Populairste.

Sorteren op populariteit

Populairste sorteert op WooCommerce-verkoopaantallen (total_sales op het parent product). Het is geen pageviews- of review-ranking. Variaties delen het verkoopcijfer van hun parent product.

Inschakelen

1. Ga naar InstantFilter → Instellingen → sectie rond Exportstrategie.
2. Vink Populairste sortering inschakelen aan en sla op.
3. Bouw de export opnieuw (automatisch na indexering als Auto Build Exports aan staat, anders handmatig via de export-flow in admin).

Na inschakelen is Populairste de globale standaard sortering op archief- en listingpagina's, tenzij een listing of URL iets anders afdwingt (zie prioriteit hieronder).

Bij catalogi met meer dan 15.000 gepubliceerde producten toont de instellingenpagina een waarschuwing over extra geheugen in de export-snapshot. De feature blijft bruikbaar; het is geen harde blokkade.

Standaard sortering per listing

Op het tabblad Listings kun je per listing onder Producten sorteren een vaste standaard kiezen. De optie Populairste verschijnt alleen wanneer de globale feature aan staat.

Beschikbare sorteersleutels in admin en frontend:

• date — nieuwste eerst
• price — prijs laag → hoog
• price-desc — prijs hoog → laag
• sale — hoogste korting eerst
• popularity — meest verkocht eerst (alleen wanneer ingeschakeld)

Welke sortering wint?

Van hoog naar laag:

1. URL — ?orderby=popularity (ook price, price-desc, sale, date; legacy WooCommerce: ?orderby=price&order=desc)
2. Listing-default — default_sort op de listing in admin
3. Globale default — popularity wanneer de feature aan staat, anders date

Bezoekers kunnen altijd via de sorteer-dropdown op de pagina wisselen. Die keuze wordt in de URL bewaard.

Sorteren via shortcode & URL

De shortcode [instant_archive] heeft geen orderby- of sort-attribuut. Sortering wordt opgelost via URL, listing-configuratie of de globale default — in dezelfde prioriteit als hierboven.

Listing met vaste standaard sortering

Stel in admin bij de listing Producten sorteren in op Populairste en plaats:

[instant_archive listing_id="42"]

Elke bezoeker op die pagina start met populariteitssortering, tenzij hij via de dropdown of een URL-parameter wisselt.

Landingspagina met sorteer-URL

Link naar een pagina met een vaste sorteervolgorde via query string:

https://jouwshop.nl/top-verkopen/?orderby=popularity
https://jouwshop.nl/aanbiedingen/?orderby=sale
https://jouwshop.nl/shop/?orderby=price-desc

Werkt op elke pagina waar [instant_archive] (of het universele archief) staat — ook zonder aangepaste listing.

Combinatie met listing + URL

[instant_archive listing_id="42" per_page="36"]

Op /merk/nike/?orderby=date wint de URL boven de listing-default. Handig voor campagnelinks die tijdelijk op nieuwste moeten sorteren terwijl de listing zelf op populariteit staat.

Wanneer ververst de volgorde?

Verkoopcijfers worden niet live bij elke pageview herberekend. Ze worden vastgelegd bij de export-build. Na grote verkooppieken: export opnieuw bouwen om de ranking bij te werken. Herindexeren is voor populariteit alleen niet nodig — wel een export-rebuild.

Producten zonder verkoop tellen als 0 en komen achteraan. Bij gelijke sales: tie-break op nieuwste product.

Probleemoplossing

• Geen verschil na inschakelen — export opnieuw gebouwd? Zonder rebuild ontbreekt popularity-data en sorteert alles als 0.
• Vreemde volgorde / alles lijkt even populair — controleer total_sales in WooCommerce (corrupte waarden zoals -1 kunnen ranking verstoren).
• Populairste ontbreekt in dropdown — globale checkbox uit, of export nog niet vernieuwd na inschakelen.
• Shortcode sorteert anders dan verwacht — check URL (?orderby=), listing-default en globale default in die volgorde.

Zie ook Instellingen, Listings en Shortcodes.

Shortcodes

InstantFilter registreert vier shortcodes. Allemaal vereisen ze een geldige licentie en een voltooide indexering.

instant_archive

Volledige shop-ervaring: filters + productoverzicht + paginering. Het meest gebruikte startpunt.

[instant_archive]
[instant_archive listing_id="42"]
[instant_archive card="my-card" per_page="24"]

Context-gevoelig op Woo-archieven. Zonder een listing_id rendert deze shortcode de Universele Archief-listing. Op een echte WooCommerce-archiefpagina (shop, productcategorie, product-tag) beperkt de listing automatisch de filters en producten tot de pagina waarop je je bevindt — dezelfde shortcode toont verschillende voorraad op /shop/, /product-categorie/sneakers/ en /product-tag/sale/.

Op een aangepaste WordPress-pagina (elke URL die geen archief is: landingspagina, builder-template, contentpagina) is er geen archiefcontext om te detecteren. Het Universele Archief valt dan terug op alle producten. Om een aangepaste pagina te beperken, maak je een aangepaste listing aan op het tabblad Listings en geef je het ID door:

[instant_archive listing_id="42"]

instant_filter

Rendert een enkel filter buiten de standaard zijbalk-lay-out.

[instant_filter prop="pa_color"]

Gebruik de eigenschapssleutel uit de Eigenschappentabel (ook te kopiëren via de acties in de admin-rij).

instant_filters

Alleen de filter-zijbalk — plaats filters elders in de pagina-lay-out.

[instant_filters]
[instant_filters group="my-group"]

instant_all

Alle beschikbare filters voor de huidige context.

[instant_all]
[instant_all style="interface"]

stijl: sidebar (standaard) of interface.

Bricks Builder integratie

InstantFilter bevat een volledige native Bricks Builder integratie. Als het Bricks-thema actief is, detecteert InstantFilter dit automatisch en worden vier speciale elementen geregistreerd in het Bricks-elementenpaneel onder de categorie InstantFilter.

Hierdoor hoef je in Bricks-templates geen losse shortcodes of HTML-codeblokken te gebruiken: je sleept de elementen direct in je pagina of archieftemplate met volledige live preview in de Bricks canvas-editor.

De 4 Bricks-elementen

Instellingen in Bricks

Wanneer je een InstantFilter-element selecteert in Bricks, configureer je de opties direct in het linker controlepaneel:

• Listing — Kies welke listing getoond moet worden. Selecteer Universeel voor de standaard shopcontext, of kies een specifieke listing die je hebt aangemaakt onder InstantFilter → Listings.
• Producten per pagina (per_page) — Bepaal hoeveel producten er per pagina worden weergegeven (standaard 24).
• Kaartdesign (Card design) — Laat op Auto staan om de universele template of listing-standaard te volgen, of kies expliciet een kaarttemplate uit je Template Bibliotheek of StyleBuilder.
• Filtergroep (bij IF Filter sidebar) — Optioneel: vul een groepssleutel in om uitsluitend filters uit die specifieke groep te tonen.
• Eigenschap (bij IF Single filter) — Kies direct uit een dropdown met alle geconfigureerde eigenschappen (bijv. pa_color, pa_size of prijs).

Gebruik in Bricks WooCommerce Archieftemplates

Bouw je je WooCommerce winkel- of categoriepagina's met Bricks Templates (type Product Archive)?

1. Open je Product Archive template in de Bricks Builder.
2. Plaats een container en sleep het element IF — Sidebar + Grid erin (of combineer losse IF — Filter sidebar en IF — Grid elementen).
3. Zet de listing op Universeel. InstantFilter detecteert automatisch of de bezoeker zich op /shop/, een specifieke productcategorie of een producttag bevindt en stemt zowel de producten als de filteropties en tellers daar direct op af.
4. Stel de template-voorwaarden in Bricks in (bijv. Entire website WooCommerce product archives).

Styling: Bricks vs. InstantFilter

Om te zorgen dat filtersnelheden te allen tijde onder de 5 milliseconden blijven, werkt InstantFilter met een geoptimaliseerde tweedeling:

• Bricks Style-tab: Gebruik de standaard Bricks-instellingen (Margin, Padding, Achtergrond, Container-breedte) om de buitenste container van het archief naadloos in je paginalay-out te integreren.
• InstantFilter Layouts & StyleBuilder: Het uiterlijk van de productkaarten, facetten, knoppen, kleurstalen en de mobiele lade beheer je centraal in InstantFilter. Deze worden gecompileerd tot ultra-snelle, gehydrateerde client-side templates.

Probleemoplossing

Geen producten in het overzicht

• Voer “Producten herladen” uit — de status-pill mag niet “Geen producten geladen” zeggen.
• Bevestig dat WooCommerce-producten zijn gepubliceerd en binnen je licentie-productlimiet vallen.
• Controleer bij aangepaste listings of de query ID's retourneert (kolom Items op het tabblad Listings).

Filters zijn leeg of aantallen staan op nul

• Voer “Filters bijwerken” uit na het aanmaken of inschakelen van eigenschappen.
• Zorg ervoor dat de eigenschap Referentie overeenkomt met echte productdata (bijv. attribuut heeft waarden op producten).
• Loop-eigenschappen: wacht tot het genereren is voltooid; controleer de lijst met uitgesloten attributen.

Filters werken in de admin-preview maar niet op de site

• Bevestig dat Auto Build Exports is ingeschakeld, of bouw de export opnieuw in debug-modus.
• Leeg de paginacache (WP Rocket, LiteSpeed, etc.) na het indexeren.
• Controleer of de shortcode op de pagina staat die je test — niet alleen in de admin-listing preview.

Filterklikken herladen de pagina of voelen traag aan

• Open DevTools → Netwerk: na de eerste interactie mogen filterklikken geen nieuwe admin-ajax filteraanroepen activeren.
• Als de export niet is geladen, controleer dan de browserconsole op 404-fouten bij exportbestanden.
• Probeer Exportstrategie → Auto in de Instellingen voordat je handmatig overschakelt naar FX of inverted.

Variatiekaarten zijn onjuist of ontbreken

• Voer “Producten herladen” opnieuw uit na wijzigingen in de splitsingsregels.
• explode_unique verbergt variaties zonder eigen afbeelding — dit is verwacht gedrag.
• Controleer zowel het tabblad Variaties als de Geavanceerde instellingen van eigenschappen op conflicterende splitsingsregels.

Licentie- / limietfouten

• Activeer de code opnieuw op het tabblad Licentie; deactiveer deze voordat je van domein wisselt.
• “Limiet bereikt” op knoppen betekent een product-, listing- of site-cap — upgrade via de prijzenpagina.

Kom je er nog niet uit?

Zie de FAQ voor informatie over de proefperiode, facturatie en het restitutiebeleid. Voor hulp bij de implementatie kun je mailen naar tom@instantstack.co met je listing-ID, shortcode-URL en een screenshot van de status-pill in de admin.

Developer-hooks en diepgaande architectuurgidsen zijn gepland voor de sectie Gidsen — deze worden hier pas gelinkt zodra die pagina's bestaan.