In deze tutorial gaan we productfilters maken in onze WooCommerce webshop zodat we straks producten kunnen filteren op bijvoorbeeld kleur en maat. Het productfilter gaan we plaatsen als widget in de shop sidebar van de je webshop. Je moet natuurlijk wel wat hebben om op te filteren, daarom beginnen we eerst met het toevoegen van producteigenschappen.
Laten we beginnen!
Producteigenschappen
Wat zijn producteigenschappen?
Een belangrijke manier om producten te groeperen, is om eigenschappen (attributen) te gebruiken. Er zijn twee toepassingen van deze producteigenschappen in WooCommerce;
- De eerste is via de WooCommerce-widgets. “WooCommerce gelaagde navigatie” werkt op basis van eigenschappen (attributen). Als je deze widget toevoegt aan een sidebar, dan kunnen klanten de producten in je webshop filteren op basis van een eigenschap.
- De tweede is via variabele producten. Om een variabel product te maken, moet er eerst een eigenschap voor het product worden ingesteld. Deze eigenschappen kunnen vervolgens worden gebruikt om een onderscheid te maken tussen verschillende variaties. Meer info: Variabele producten.
Als je bijvoorbeeld kleding verkoopt, zijn twee logische producteigenschappen ‘kleur’ en ‘maat’, zodat mensen in categorieën kunnen zoeken naar een kleur die past bij hun stijl, type en kleding die beschikbaar zijn in hun maat.
Producteigenschappen toevoegen / bewerken
Globale eigenschappen instellen
Ga naar Producten> Eigenschappen om eigenschappen toe te voegen, te bewerken en te verwijderen.
- Geef een naam aan de eigenschap.
- Voeg een slug toe; (Optioneel); dit is de URL-vriendelijke versie van de naam.
- Activeer Archieven mocht je dit nodig vinden. Als dit is ingeschakeld dan kun je een productpagina laten zien met alle producten met deze eigenschap. Als je dit bijvoorbeeld hebt ingeschakeld en ‘zwart’ is een van de opties onder ‘kleur’, kun je https://jouwwinkel.nl/pa_color/zwart/ aan je menu (of een andere plek of link) toevoegen om alleen zwarte kleding weer te geven – pa staat voor “Product Attribute.”
- Selecteer een standaard sorteervolgorde. Kies tussen “Naam”, “Naam (numeriek)”, “Termijn ID” of “Aangepaste volgorde” waar je zelf kunt beslissen hoe de volgorde loopt door de termen in de lijst te slepen en neer te zetten bij het configureren van de sorteer voorwaarden.
- Selecteer eigenschap toevoegen.
- De eigenschap wordt toegevoegd in de tabel aan de rechterkant, maar zonder waarden.
- Selecteer de tekst “Voorwaarden instellen” om producteigenschappen toe te voegen.
- Voeg vervolgens de nieuwe “Eigenschap naam” toe, waarbij “Eigenschap naam” automatisch de naam gebruikt die je in de vorige stap aan de producteigenschap hebt gegeven.
- Voeg zoveel waarden toe als je wil.
[tm_message_box style=”warning” icon_type=”linea_svg” icon_linea_svg=”linea-arrows-info”]Globale eigenschappen kun je in de webshop op verschillende producten toepassen.[/tm_message_box]
Globale eigenschappen
Om een globale eigenschap te gebruiken:
- Selecteer er een uit de dropdown
- Kies Alles selecteren om alle eigenschappen aan het variabel product toe te voegen (indien van toepassing).
- Vink het vakje Gebruikt voor variaties aan om WooCommerce te vertellen dat het voor je product variaties is.
Aangepaste eigenschappen die specifiek zijn voor het product
Je kunt ook eigenschappen toevoegen die specifiek zijn voor dit product:
- Selecteer Custom producteigenschap en Toevoegen.
- Geef de eigenschap een naam (bijvoorbeeld kleur),
- Stel waarden in gescheiden door een pipe teken (bijv. Rood|Grijs|Zwart)
- Schakel het selectie vakje Gebruikt voor variaties in.
- Sla de eigenschappen op.
Filteren op eigenschappen
Nu we de producteigenschappen hebben ingesteld, gaan we WooCommerce filter widgets in de shop sidebar plaatsen zodat bezoekers de producten in de shop kunnen gaan filteren op Kleur en Maat. Ook voegen we terwijl we toch al bezig zijn een prijsfilter toe.
- Om te beginnen ga je naar Weergave > Widgets.
- Selecteer of je een dropdown wilt of lijst weergave.
- Opslaan.
Wat de klant ziet
Aan de voorkant van je WooCommerce webshop ziet het er nu als volgt uit;
Toch liever een grafische kleur keuze?
Heb je liever dat mensen een kleur aan kunnen klikken voor je productvariatie? Kies dan voor een plugin die dat voor je doet.
Bijvoorbeeld deze: https://wordpress.org/plugins/woo-variation-swatches/
Tot slot
Je hebt met bovenstaande uitleg globale producteigenschappen ingesteld om daar vervolgens widgets voor aan te maken, en die gebruikt kunnen worden om de producten in je webshop te filteren. Heb je vragen over deze handleiding? Stuur een mail naar support@eskamedia.nl of start een chat.