Een filter toevoegen aan je WooCommerce-webshop

Je hebt producten aangemaakt in je Woocommerce shop en je hebt product eigenschappen aangemaakt en ingesteld. Hier leggen we je uit hoe je ervoor zorgt dat je deze producteigenschappen kunt gebruiken om filters in te stellen in je shop.

1. De woocommerce sidebar inschakelen

Allereerst is het belangrijk om de woocommerce sidebar in te schakelen. Hiermee zorg jij dat er op je shoppagina ruimte komt voor de productfilters die we zo gaan instellen. Deze instellingen zijn terug te vinden in je thema instellingen. Waar deze staan, zijn afhankelijk van je thema. In het geval van het thema gebruiken we het thema Salient. Hier staan de thema instellingen wanneer je ingelogd bent in de achterkant van Wordpress, maar het komt ook vaak voor dat je thema instellingen zich bevinden onder het kopje customizer bovenaan je scherm wanneer je op de voorkant van je website zit (maar wel bent ingelogd). Wij kiezen in het voorbeeld voor een sidebar aan de linkerkant van de producten. Hier willen we dat de filters gaan plaatsvinden.

2. De filters instellen

Wanneer je stap 1 hebt voltooid is het tijd om de filters in te stellen. Dit doe je bij de widgets. Deze kun je vinden onder het kopje weergave. In ons voorbeeld maken we gebruik van de plugin ‘’classic widgets’’. Hierdoor behoud je bij de widget omgeving de originele widget look in plaats van nieuwste versie van Wordpress.

In ons voorbeeld gaan we een filter toevoegen waardoor de bezoeker kan filteren op kleur. Links zie je het vakje ‘’Filter producten op attribuut’’. Deze sleep je naar de widget area van ‘’ Woocommerce Sidebar’’. Bij het attribuut selecteer je op welke producteigenschap je wil filteren. In ons voorbeeld selecteren we hier dus kleur. Bij weergavetype selecteer je lijst wanneer je wilt dat het filter in de shop weergegeven wordt als een lijst. De andere optie die je hebt is om hem weer te geven als dropdown. Bij zoektype heb je de keuze tussen ‘’en’’ of ‘’of’’. Bij de keuze ‘’en’’ betekent dit dat een bezoeker meerdere filters kan selecteren, dus bijvoorbeeld filteren op kleur, filteren op maat en de shop laat enkel producten zien die voldoen aan alle filters. Vergeet niet dat je bij de titel invoert ‘’Filter op kleur’’.

3. Het resultaat

Wanneer je nu kijkt in je shop, zul je zien dat dit filter actief is. Enkel de kleuren waaraan producten zijn toegekend zullen worden weergegeven. Dus heb jij wel de kleur geel toegevoegd, maar hebben geen producten deze kleur toegekend gekregen? Dan zal deze niet worden weergegeven. Het resultaat ziet er zo uit:

Filters werken het best als je producten goed zijn ingedeeld. Lees daarom ook categorieën aanmaken in WooCommerce en eigenschappen aan producten toevoegen. Wil je dat wij je webshop bouwen of onderhouden, kijk dan bij webshop laten maken.