Weergave en stijl

Wat het doet

Het filterblok volgt standaard de kleuren van je thema. Op de Stijl-pagina geef je hem je eigen huisstijl, voor de hele shop in één keer. Bijvoorbeeld: de vinkjes en de schuifbalk in je merkkleur, met een lichte achtergrond achter de koppen van de filterblokken.

Wat de bezoeker merkt

Waarden aanvinken ververst de productlijst direct, zonder dat de pagina herlaadt. Werkt JavaScript niet, dan gaat alles via de Filteren-knop en werkt het nog steeds. Met “Wis filters” begint de bezoeker opnieuw.

Tussen verschillende filters geldt EN: categorie kaars EN kleur rood. Binnen een filter geldt OF: rood OF blauw. Dat is wat mensen intuïtief verwachten.

De filterkeuze staat in de URL, dus een gefilterde pagina is deelbaar en bruikbaar in een campagne. De terug-knop van de browser doet gewoon wat hij hoort te doen.

Filteren op een hoofdcategorie vindt ook producten die alleen in een subcategorie zitten. Op mobiel blijft de filterbalk altijd binnen het scherm.

Aanzetten

Pure Shop Filter > Stijl

Vanaf de pagina Instellingen kom je er ook met de knop Stijl in de paginakop of via de zijbalk.

Instellingen

Alle vormgeving zit op één plek. De pagina heeft vier blokken. Kleuren kies je met een kleurenkiezer, maten vul je in pixels in (maximaal 60). Een veld dat je leeg laat volgt je thema. Sla op met “Stijl opslaan”.

Koppen (titel plus pijltje). Tekstkleur, Tekstkleur bij hover, Achtergrond, Achtergrond bij hover, Padding (px), Hoek-radius (px), Pijl-kleur en Pijl-kleur bij hover.

Opties en accenten. Tekstkleur opties, Accent-kleur (vinkjes, schuifbalk, actieve pills, schuifje), Teller-badge tekstkleur, Teller-badge achtergrond en Kleur “Toon meer”-link.

Facet-blokken. Achtergrond, Randkleur en Hoek-radius (px). Dit zijn de kaders om elk filter.

Filter-knop en wis-link. Achtergrond, Tekstkleur en Randkleur van de knop, dezelfde drie bij hover en Kleur “Wis filters”.

Je hebt Elementor dus niet nodig om je filters bij je thema te laten passen.

Met Elementor

Gebruik je de widget “Pure: Productfilters”, dan wint die widget met zijn eigen Stijl-tab van de Stijl-pagina, per element. Dat is handig voor een afwijkende zijbalk of landingspagina.

De Stijl-tab heeft de secties Koppen, Tekst en accenten, Facet-blokken en Filter-knop. Daar stel je ook de typografie van de koppen en de knop in, de padding per blok en de ruimte tussen de blokken.

Globale kleuren uit je Elementor site-kit werken daarbij gewoon, ook op de koppen en de “Toon meer”-knop. De styling loopt via CSS-variabelen, zodat een thema met eigen knop- en kop-stijlen er niet dwars doorheen fietst.

Welke filters er staan en hoe ze eruitzien stel je niet in de widget in, maar onder Pure Shop Filter > Instellingen > Filters.

Zie je je instellingen niet terug

Loop deze drie na, in deze volgorde. Draait de site de nieuwste versie van de plugin? Heb je in Elementor “Bestanden en gegevens wissen” gedraaid? Is je hosting-cache geleegd?

Het versienummer staat op Pure Shop Filter > Instellingen > Index. De Stijl-pagina zelf werkt buiten de CSS-bestanden van Elementor om, dus die is meestal niet de boosdoener.

Terug naar Pure Shop Filter