Gratis 25 belangrijke tips voor jouw website

Plus nog meer tips waarmee je jouw website vandaag nog kunt verbeteren!

Werken met variabele producten in WooCommerce


Verkoop je met een WooCommerce webshop een dienst of product waar je variaties op hebt? Bijvoorbeeld een t-shirt in verschillende kleuren en/of verschillende maten? Dan is het natuurlijk niet zo handig als je voor elke maat en kleur een apart product moet maken.

Gelukkig is dat ook niet nodig; met de variabele product functie in WooCommerce kun je bij producten variaties toevoegen. De bezoeker kan dan op de productpagina kiezen uit de verschillende opties. In zal je hieronder laten zien hoe je dit kunt instellen. Als voorbeeld heb ik een t-shirt toegevoegd in mijn webshop, die ik (zogenaamd) in verschillende maten en kleuren wil verkopen.


01. Voeg het product toe in je dashboard

Log in bij je dashboard en voeg het product toe (afbeelding, teksten, titel, etc.), zoals je dat normaal gesproken ook zou doen. Als je daarna iets naar onder scrollt, zie je allerlei opties. Bij “Product Data” kies je de onderste optie: Variabel product.

Variabele producten in WooCommerce


02. Voeg attributen toe

Als je nog een klein beetje verder naar onder scrollt, zie je het kopje “Attributen“, waar je attributen kunt toevoegen. Een attribuut is een soort variatie. Klik op de grijze knop “Toevoegen”. Er komen dan nieuwe opties tevoorschijn. Vul bij “Naam” de naam van je attribuut in, in het geval van mijn voorbeeld is dat “Maat”. Bij “Waarden” kun je de verschillende variaties toevoegen. In mijn geval is dat dus: S, M, L, XL. Vul de waarden achter elkaar in, met een rechtopstaand streepje ertussen (zie voorbeeld). Vink de optie “Gebruikt voor variaties” aan.

WooCommerce webshop variaties op product

De attribuut is nu toegevoegd aan het systeem, maar nog niet aan het product. De bezoeker ziet nu dus nog niet de verschillende variaties.


03. Voeg de variaties toe

Ga naar het kopje “Variaties“, die staat onder het kopje “Attributen”. Klik op de grijze knop “Ga” om een variatie toe te voegen. Er komen dan wederom enkele dingen tevoorschijn, waaronder een hekje met nummer en een dropdown. Aan het einde van dat balkje vind je een pijltje. Als je op het pijltje klikt, komen er meer opties tevoorschijn. Het gaat nu om de opties die zullen gelden voor álle variaties (in mijn geval alle maten). Bij “Normale prijs” kun je een prijs invullen voor het product. Ik heb 25,99 euro ingevuld. De t-shirts zijn dan 25,99 euro per stuk, ongeacht de maat.

Variabel product in WooCommerce webshop

Het staat nu automatisch ingesteld dat men eerst een maat moet kiezen voordat ze het product kunnen toevoegen aan de winkelwagen. Wil je dat er automatisch 1 van de variaties is geselecteerd? Dit kun je instellen bij “Standaard Formulierwaarden“.


04. Meerdere variaties toevoegen

Wil je met meerdere variatie typen werken? Dat kan. Herhaal het proces hierboven. Zo kun je de bezoeker bijvoorbeeld de maat én kleur laten kiezen.

WooCommerce variabele producten gebruiken


05. Verschillende prijzen voor verschillende variaties

Hebben de variaties verschillende prijzen? Geen probleem. Dat kun je eenvoudig toevoegen. Volg eerst stap 1 en stap 2 zoals hierboven beschreven. Stap 3 gaat echter een klein beetje anders.

Klik wederom op de grijze knop “Ga”. Er komen enkele opties tevoorschijn. Klik op de dropdown naast het hekje en nummer. Je ziet dan de verschillende variaties (in mijn geval verschillende maten). Klik op één van de variaties. Klik vervolgens weer op het zwarte pijltje aan het einde van de balk en vul de prijs in voor deze variatie. In mijn geval kies ik voor de maat S en de prijs maak ik 23,99 euro. Zodra je dit hebt ingevuld kun je klikken op “Wijzigingen opslaan”.

Maar.. Je hebt nu slechts 1 variatie toegevoegd. De andere variaties voeg je op dezelfde manier toe; klik weer op de grijze knop, etc. Vergeet niet het product op te slaan zodra je klaar bent met bewerken 😉

Je hebt nu de verschillende variaties toegevoegd met verschillende prijzen. Zodra men een andere variatie (andere maat) selecteert, veranderd automatisch de prijs.

Variaties in producten WooCommerce


06. Verschillende foto’s bij de variaties

Je kunt eventueel ook verschillende foto’s toevoegen bij de verschillende variaties. Bijvoorbeeld een foto van het rode shirt. Zodra men dan de optie “Rood” selecteert, veranderd de productfoto naar de foto die jij hebt geupload. De foto voeg je toe door bij de variatie de klikken op het icoontje van de afbeelding. Als je bij één of meerdere variaties geen foto toevoegt, wordt automatisch de uitgelichte afbeelding weergegeven.

Werken met WooCommerce variabele producten

Wil je meerdere foto’s laten zien per variatie? Daar is een premium plugin voor: WooCommerce Additional Variation Images. Wil je in plaats van een simpele dropdown een wat uitgebreider systeem? Met de premium plugin WooCommerce Varation Swatches and Photos kun je dit instellen.


07. Variaties gebruiken voor up-selling

Deze functie in WooCommerce kun je natuurlijk ook gebruiken voor andere dingen dan maten, kleuren, etc. Je kunt het ook gebruiken voor up-selling. Stel je bied cursussen of diensten aan via je webshop. Dan zou je bijvoorbeeld als variatie je dienst + iets extra kunnen toevoegen. M.a.w. “voor een kleine extra prijs krijg je dit en dit er ook bij” (ik noem maar een voorbeeldje).

Ik (Sandra Boon van Boon Webdesign) ben jouw partner in crime voor WordPress websites en online marketing. Voor ondernemers bouw ik BoonTheme WordPress websites - de perfecte mix tussen kant-en-klaar en maatwerk. Daarnaast bouw ik ook online leeromgevingen voor mijn klanten.