Een variabel product toevoegen in je WooCommerce webshop is super handig, wanneer je producten verkoopt waarbij je klanten bepaalde opties kunnen kiezen voordat ze gaan bestellen. Maar hoe werkt dat nou? Je ziet het in deze video of leest het in 7 heldere stappen hieronder.

Wat is een variabel product?

Dikke kans dat je dat al weet, maar zo niet dan leggen we het natuurlijk graag even aan je uit.

Een variabel product is een product met variabelen. Een product waarbij diverse product opties mogelijk zijn.

Denk hierbij bijvoorbeeld aan kleding, waarbij je uit verschillende maten en kleuren kan kiezen. Maar het kan ook zeker gelden voor fietsen, elektronica, auto’s, accessoires en veel meer productsoorten.

Waarom een variabel product toevoegen in WooCommerce?

• Een variabel product geeft overzicht en duidelijkheid. Je webshop bezoeker ziet direct dat het product meerdere opties heeft en kan zijn favoriet direct aangeven en vervolgens bestellen. Dit zorgt voor een grotere conversie.
• Het product hoeft maar 1 keer ingevoerd te worden, wat veel tijd scheelt.
• Wanneer je je producten maar 1 keer hoeft in te voeren loop je geen risico op dubbele teksten op je website. Dubbele teksten (duplicate content) zijn funest voor je SEO.

Hoe werkt het toevoegen van een product met product opties in WooCommerce?

In de basis voer je producten in als een simpel product, dat is de standaard instelling in WooCommerce. Een simpel product is een product zonder keuze opties. Gewoon het product zoals het er staat.

Een variabel product, dat is andere koek.

We leggen je uit hoe het toevoegen van een variabel product werkt.

Stap 1: de product eigenschappen

Ga naar Producten > Eigenschappen. Daar maak je de producteigenschappen aan die je bezoeker moet kiezen (bijvoorbeeld kleur en maat).

Stap 2: de variabelen toevoegen

Wanneer je de eigenschappen aangemaakt hebt, moeten ook de beschikbare variabelen aangegeven worden. Dat zijn de eigenlijke keuze opties die een klant heeft je bezoeker heeft, zoals groen, blauw, rood, S, M of L. Deze variabelen geef je in door aan de rechterkant op “voorwaarden instellen” te drukken

Het resultaat ervan is dat je je product opties terug ziet bij je variabelen:

Stap 3: product toevoegen

Daarna ga je naar Producten > Product toevoegen.

Je voert een titel in, een korte omschrijving, lange omschrijving, kiest een uitgelichte afbeelding en categorie. Dat is de basis, zo voer je alle producten in.

Stap 4: product type kiezen

Bij productopties kies je in het veld producttype voor Variabel product.

Dit veranderd de layout van de velden daaronder:

Stap 5: product opties

Nu ga je de specifieke product opties toevoegen aan je product. Ga hiervoor naar het tabblad eigenschappen en kies hier een van de eigenschappen die je eerder aangemaakt hebt (dus bijvoorbeeld kleur en maat).

Kies of je de eigenschap wilt weergeven op de productpagina (meestal wel) en of je de eigenschap ook wilt gebruiken voor variaties (ook hier is dat meestal wel van toepassing, anders kunnen je bezoekers de optie niet kiezen). Druk daarna op de button Eigenschappen opslaan.

Als je alle opties ingegeven hebt, ziet het er (ongeveer, afhankelijk van jouw specifieke variabelen) als volgt uit:

Let op: wil je kunnen filteren op product eigenschappen (dus bijvoorbeeld op kleur, zodat men in de webshop alleen de gele producten te zien krijgt), dan moet je de globale eigenschappen gebruiken. Gebruik je bij ieder product een custom eigenschap, dan zal het filter niet gaan werken.

Stap 6: de variaties instellen

Nu je al je product opties ingegeven hebt, ga je door naar het tabblad variaties.

Daar kies je de optie “Variaties voor alle eigenschappen toevoegen“. Op deze manier worden alle mogelijke opties (en dat kunnen er soms nogal wat zijn) automatisch toegevoegd, in batches van maximaal 50 per keer. Heb je in totaal meer dan 50 product opties (het aantal variabelen van optie 1 X het aantal variabelen van optie 2), dan kies je de hierboven genoemde optie nogmaals, net zo lang totdat alle variaties zijn weergegeven (dat geeft WooCommerce zelf aan).

Het resultaat in het geval van dit voorbeeld is dat we 9 variaties hebben (3 kleuren X 3 maten). Het resultaat ziet er dan zo uit:

Stap 7: product eigenschappen toevoegen per variatie

Als laatste moet je nu voor iedere variatie de product eigenschappen zoals prijs (en eventueel aanbiedingsprijs per variabele), productafbeelding en eventueel de voorraad ingeven. Om dit te kunnen doen ga je op de regel van een variatie staan en klik je deze open.

Nu kan je de prijs ingeven, de specifieke product afbeelding uploaden, de voorraad ingeven en meer andere product specifieke eigenschappen toevoegen.

Let op: dit moet je voor iedere product variatie (dus voor iedere regel bij je variaties) ingeven. Doe je dit niet, dan zal WooCommerce niet goed werken.

Het resultaat van een variabel product in je WooCommerce webshop

Als resultaat in je webshop zie je nu een product waarbij je bezoeker een aantal opties moet kiezen, voordat het product in het mandje geplaatst kan worden:

Wanneer je bezoeker bij beide opties een keuze gemaakt heeft, veranderd ook de afbeelding (mits je iedere variatie een afbeelding hebt mee gegeven):

Op deze manier kan je heel overzichtelijk je bezoeker laten weten dat er meerdere opties zijn voor het product, waarbij er ook nog eens gemakkelijk te zien is welke opties er zijn.

Een visuele upgrade voor je product met product opties

Wil je het allemaal wat netter stylen en de opties visueel maken voor je bezoeker? Dan raden we je de Variation Swatches and Photos plugin aan. Deze hebben we ook gebruikt bij de webshop van Pixels en Stiksels.

De opties die je je bezoekers biedt zijn dan wat duidelijker en gemakkelijker te kiezen:

 

Door het gebruiksgemak binnen je webshop te vergroten, verhoog je de conversie van je webshop.

Vaste waardes instellen voor een product met opties

Wanneer je alle variaties van een product hebt aangemaakt, is het aan je klant om de gewenste opties op de frontend te selecteren. Standaard zijn er geen waardes geselecteerd:

De webshop bezoeker moet dus echt zelf een keuze maken, alvorens het product toegevoegd kan worden in de winkelwagen. Maar soms kan het handig zijn dat er al een vaste waarde is ingesteld, die men alleen nog maar hoeft aan te passen.

Dat doe je door in WooCommerce standaard formulierwaarden toe te passen:

Dankzij deze optie staat er standaard een waarde ingevuld, zodat je gebruiker daar geen omkijken naar heeft.

Kijk wel goed of deze optie voor jouw product wel handig is. Je wilt tenslotte niet dat men de velden over het hoofd ziet en per ongeluk een item in verkeerde maat of kleur besteld.

Een vaste prijs tonen bij variabel product in WooCommerce

Wanneer je gebruik maakt van variabele producten, die ook nog eens van elkaar verschillen in prijs, laat WooCommerce automatisch de hele price range zien.

Dat ziet er nogal rommelig uit en is bovendien niet heel erg duidelijk naar de gebruiker toe. Zo’n prijsstelling kan veel vragen oproepen en men kan geheel onterecht denken dat het product duurder is dan dat ze wensen.

Gelukkig is dit simpel op te lossen. Door deze plugin toe te voegen, wordt alleen de laagste prijs van het product getoond.

De daadwerkelijke prijs van een eventueel duurder product wordt wel gewoon zichtbaar wanneer er voor die betreffende variatie gekozen wordt.

Heb je vragen over een variabel product toevoegen in WooCommerce? Laat het ons weten in de comments hieronder, we beantwoorden je vraag graag en heel snel.