banner

WooCommerce Techniek

In deze lessenreeks maak je kennis met e-commerceplatforms. Je verdiept je in het platform WooCommerce. Je gaat een nieuwe WordPress installatie maken waarop je Elementor Pro én WooCommerce installeert. Hiermee maak je een werkende webshop. Deze lessenreeks vormt de technische onderbouwing voor het project WooCommerce. 

Na afloop van de lessenreeks wordt je werk beoordeeld op techniek (niet op vormgeving – dit is een andere les). Gebruik deze checklist om je werk te controleren op volledigheid.

Les 1 - E-commerce platformen
Les 2 - Installatie
Les 3 - Producten
Les 4 - Ontwerp je webshop
Les 5 - Winkelwagen & Checkout
Les 6 - Orders, testen en verbeteren
Les 7 – SEO​
Bonus / Verdieping

Les 1 – Welk e-commerceplatform past bij de klant?

Je werkt in een duo. Ieder duo krijgt één e-commerceplatform toegewezen:

Shopify / Wix Stores / WooCommerce / Squarespace / Magento

Jullie worden deze les de experts van dit platform.

Onderzoek eerst hoe jullie platform werkt. Daarna onderzoeken jullie voor drie verschillende klanten hoe geschikt het platform is.

Geef iedere klant uiteindelijk een score:

⭐ = zeer ongeschikt
⭐⭐ = ongeschikt
⭐⭐⭐ = redelijk geschikt
⭐⭐⭐⭐ = geschikt
⭐⭐⭐⭐⭐ = zeer geschikt

Belangrijk: het is niet jullie opdracht om jullie platform te verkopen. Misschien ontdekken jullie juist dat het voor een bepaalde klant géén goede keuze is.

Stap 1 - Leer jullie platform kennen

Zoek eerst uit wat voor platform jullie eigenlijk onderzoeken. Beantwoord minimaal deze vragen:

  • Wat kun je met het platform?
  • Is het speciaal gemaakt voor webshops of kun je er ook gewone websites mee maken?
  • Draait de webshop bij het platform zelf of moet je zelf hosting regelen?
  • Is het open source of commerciële software?

Onderzoek wat een ondernemer ongeveer moet betalen.

Denk bijvoorbeeld aan:

  • abonnement;
  • hosting;
  • domeinnaam;
  • transactiekosten;
  • betaalde templates/themes;
  • apps, plugins of extensies.

Je hoeft geen complete prijslijst te maken. Probeer vooral te ontdekken:

Waar betaalt een ondernemer voor en wanneer kunnen de kosten oplopen?

Onderzoek bijvoorbeeld:

  • Hoe voeg je producten toe?
  • Hoe bouw of ontwerp je de pagina’s?
  • Kun je zonder programmeerkennis een webshop bouwen?
  • Hoeveel technische kennis heb je nodig voor het beheer?
  • Wie regelt updates, beveiliging en hosting?

Kijk in ieder geval naar:

Producten
Kan het platform omgaan met veel producten en varianten?

Betalen
Welke mogelijkheden zijn er voor online betalen? Kan bijvoorbeeld iDEAL worden gebruikt?

Verzending
Kun je verzendmethoden, verzendkosten en verschillende landen instellen?

Ontwerp
Hoeveel vrijheid heb je bij het ontwerpen van de webshop?

Uitbreiden
Kun je extra functies toevoegen met apps, plugins of extensies?

Groeien
Is het platform ook geschikt wanneer een webshop veel groter wordt?

Gebruik betrouwbare bronnen

Zoek niet alleen naar één website die zegt dat een platform “fantastisch” of “slecht” is. Gebruik minimaal drie bronnen.

Kijk bijvoorbeeld naar:

  • de officiële website/documentatie van het platform;
  • actuele prijzen;
  • onafhankelijke vergelijkingen;
  • bestaande webshops die het platform gebruiken;
  • ervaringen van gebruikers.

Controleer vooral of informatie actueel is.

AI mag helpen bij het zoeken of begrijpen van informatie, maar is geen bewijsbron. Controleer belangrijke informatie bij de oorspronkelijke bron.

Stap 2 - Zoek sterke én zwakke punten

Bepaal samen minimaal:

  • 3 sterke punten van jullie platform
  • 3 beperkingen/nadelen van jullie platform

Probeer specifiek te zijn.

Dus liever niet:

“Shopify is makkelijk.”

Maar bijvoorbeeld:

“Hosting, beveiliging en software-updates worden door Shopify geregeld. De ondernemer hoeft hiervoor dus geen eigen server te beheren.”

En niet:

“WooCommerce is flexibel.”

Maar:

“WooCommerce kan met WordPress-plugins worden uitgebreid, waardoor veel extra webshopfunctionaliteit kan worden toegevoegd.”

Stap 3 - Beoordeel de drie klanten

Nu gebruiken jullie het onderzoek om te bepalen voor wie jullie platform geschikt is.

Een kledingmerk verkoopt ongeveer 500 producten.

  • verschillende maten en kleuren;
  • verkoop in meerdere Europese landen;
  • veel kortingsacties;
  • professionele uitstraling is belangrijk;
  • veel vrijheid bij het ontwerp;
  • de webshop moet de komende jaren
    kunnen groeien.

Score: ⭐ tot ⭐⭐⭐⭐⭐

Leg uit waarom.

Een maker wil ongeveer 20 zelfgemaakte producten online verkopen.

  • klein budget;
  • weinig technische kennis;
  • beheert de webshop zelf;
  • verkoopt voornamelijk in Nederland;
  • wil snel kunnen beginnen.

Score: ⭐ tot ⭐⭐⭐⭐⭐

Leg uit waarom.

Een groot bedrijf verkoopt ongeveer 20.000 producten.

  • veel bezoekers en bestellingen;
  • meerdere medewerkers beheren de webshop;
  • verschillende landen, talen en valuta;
  • koppeling met voorraad, administratie en logistiek;
  • hoge eisen aan snelheid en betrouwbaarheid;
  • veel maatwerk en koppelingen met andere
    systemen.

Score: ⭐ tot ⭐⭐⭐⭐⭐

Leg uit waarom.

Leerdoelen

Na deze les:

  • kun je uitleggen wat een e-commerceplatform is;
  • ken je verschillende e-commerceplatformen en belangrijke verschillen daartussen;
  • kun je onderzoeken wat de mogelijkheden, beperkingen en kosten van een platform zijn;
  • kun je bepalen of een platform past bij de wensen en omvang van een klant;
  • kun je jouw advies onderbouwen met argumenten en bronnen.

Tijdsplanning

  • 0-10 min Intro e-commerceplatformen
  • 10-20 min Opdracht, klanten en onderzoeksvragen
  • 20-60 min Onderzoek in duo’s
  • 60-70 min Expertteams vormen
  • 70-80 min Gezamenlijke presentatie maken
  • 80-110 min 5 presentaties × 3 min
  • 110-120 min WooCommerce + vooruitblik

Wat lever je op?

Maak een korte presentatie van maximaal 3 minuten.

Jullie hoeven niet alles wat jullie onderzocht hebben te presenteren. Kies de informatie die de klas nodig heeft om jullie platform met de andere platformen te kunnen vergelijken.

Verplichte structuur presentatie

± 30 seconden

Laat zien:

  • naam platform;
  • wat voor systeem het is;
  • voor welk soort gebruiker/bedrijf het bedoeld is;
  • één voorbeeld van een echte webshop die het gebruikt.

± 60 seconden

Bespreek kort:

  • kosten;
  • gebruiksgemak / benodigde technische kennis;
  • ontwerpvrijheid;
  • uitbreidingsmogelijkheden;
  • belangrijkste sterke punten;
  • belangrijkste beperkingen.

Niet ieder gevonden detail hoeft genoemd te worden. Vertel wat belangrijk is om dit platform met andere platformen te vergelijken.

± 60 seconden

Laat jullie drie scores tegelijkertijd zien:

KlantScore (voorbeeld)
A – Kledingmerk⭐⭐⭐⭐⭐
B – Starter⭐⭐⭐
C – Grote retailer⭐⭐

Geef bij iedere score één belangrijk argument.

± 30 seconden

Maak deze zin af:

“Wij zouden dit platform vooral aanraden voor…”

en:

“Wij zouden een ander platform overwegen wanneer…”

Vermeld onderaan de slide jullie bronnen.

Les 2 – Installatie

Wij gaan werken met de betaalde versie van Elementor (Elementor Pro). Samen met het thema Hello Elementor en de Woocommerce plugin geeft je dit volledige vrijheid voor het ontwerpen van de vormgeving en functionaliteit van je webshop.

Stap 1 - Installatie WordPress

  1. Log in op de hostingomgeving door te klikken op de SURFConext knop linksboven.
  2. Bovenin zie je een rode balk met de melding “Klik hier om een licentie aan te schaffen of te verlengen.” Klik hierop.
  3. Je ziet je eigen gegevens staan (komen automatisch uit het systeem van school). Klik rechts op “Licentie aanschaffen” en kies je studentlicentie.
  4. Ga akkoord met de voorwaarden.

Let op:  het activeren gaat niet automatisch meteen door — dit gebeurt in groepjes van 10 studenten per minuut. Het kan dus een paar minuten duren (meestal binnen 5 minuten) voordat je eigen omgeving klaarstaat, zeker als de hele klas tegelijk inlogt. Gewoon even geduld hebben, dat is normaal.

Hier niets wijzigen: Bestandsbeheer (rechtstreeks bestanden aanpassen), Domeinbeheer/DNS en CLI (command line interface/terminal). Deze zijn vrij technisch en niet nodig voor dit project. Loop je ergens tegenaan, vraag het dan aan je docent in plaats van hier zelf in te grijpen.

  1. Ga in het menu links naar “WordPress Toolkit” en klik daar op “Installeren”.
  2. Locatie: installeer WordPress in een submap, niet direct in de hoofdmap. Geef de installatiemap de naam “woo”.
    Zo blijft je server overzichtelijk en kun je later gemakkelijk meerdere WordPress-installaties naast elkaar hebben — bijvoorbeeld één voor oefenen en één voor je examen.
  3. Sitenaam: vul een titel in. Dit kun je later altijd nog aanpassen.
  4. Plugin/themaset: Laat staan op “geen” — je bouwt je site zelf op met je eigen thema en plugins.
  5. Taal: staat standaard op Engels, dat is prima. Wil je Nederlands? Dat pas je later aan in de WordPress-instellingen zelf.
  6. Versie: laat deze gewoon op de laatste versie staan.
  7. WordPress-beheerder: kies hier een gebruikersnaam en wachtwoord voor je wordpress beheerder account. Gebruik je schoolemail. Belangrijk:  sla je inloggegevens meteen veilig op (bijvoorbeeld in een wachtwoordmanager of je eigen notities).

Wachtwoord vergeten? Ga naar “Instellingen” bij je installatie — daar kun je je WordPress-wachtwoord opnieuw instellen.

  1. Bij de database-instellingen hoef je zelf niets te veranderen — er worden automatisch een databasenaam, voorvoegsel, gebruikersnaam en wachtwoord voor je aangemaakt. Belangrijk: sla je databasenaam en gebruikersgegevens meteen veilig op (bijvoorbeeld in een wachtwoordmanager of je eigen notities).
  1. Deze instellingen mag je laten staan op de standaardwaarden.
  2. Klik onderaan op de knop Installeren.
    De installatie pakt een paar duizend bestanden uit, dus dit duurt even. Dat is normaal, gewoon geduld hebben.
  3. Zodra je “Installatie voltooid” ziet, is je WordPress-site klaar. Er wordt gevraagd of je vanuit de hostingomgeving Plugins wil installeren, kies hier “Nee, bedankt”.
  1. Vanaf het overzicht van je installatie kun je direct inloggen op je WordPress-dashboard via de knop “Aanmelden“.

Vanaf hier werk je verder zoals je gewend bent: plugins installeren, thema aanpassen, pagina’s bouwen, enzovoort.

  1. Ga vanuit het WordPress Dashboard naar Appearance > Themes. Installeer en activeer het thema Hello Elementor.
  2. Klik op de overige thema’s en kies Verwijderen
  3. Je ziet boven in beeld een banner die vraagt om het installeren van de plugin die bij dit thema hoort, namelijk Elementor. Klik op Installeer Elementor.
    Let op: Je wordt na installatie naar een promotiepagina van Elementor geleid. Klik in de browser op de Back button om terug naar WordPress te gaan.

Stap 2 - Installatie Woocommerce

  1. Log in op je WordPress-dashboard.
  2. Ga naar Plugins > Nieuwe plugin toevoegen.
  3. Zoek op “WooCommerce”.
  4. Klik op “Nu installeren” en daarna op “Activeren”.

Zodra je activeert, start automatisch de WooCommerce Setup Wizard.

  1. Klik op “Set up my store” (niet overslaan — dit scheelt je later handwerk).
  2. Geef aan wat het beste bij je situatie past (bijvoorbeeld dat je een winkel opzet voor jezelf).
  3. Vul je winkelgegevens in: naam van je winkel, wat je verkoopt, locatie (Nederland) en je e-mailadres.
  4. Bij de aanbevolen “gratis functies” (betalingen, verzending, belasting, marketing): vink je alles uit. Je stelt verzending, belasting en betalen straks zelf handmatig in, zodat je precies snapt wat er gebeurt.
  5. Rond de wizard af. Je komt op het overzicht met een setup-checklist terecht — die mag je verder negeren, je doorloopt de instellingen hieronder zelf.
  1. Ga naar WooCommerce > Instellingen. Het tabblad “Algemeen” staat standaard open.
  2. Vul bij “Winkeladres” het adres in dat bij je winkel/project hoort.
  3. Zet “Verkooplocatie(s)” en “Verzendlocatie(s)” op Nederland (of wat past bij je opdracht).
  4. Onder “Belasting en kortingsbonnen”: vink “Belastingtarieven en -berekeningen inschakelen” aan. Hierdoor verschijnt (nadat je op “Wijzigingen Opslaan” klikt) een apart tabblad “Belastingen” waar je de btw-tarieven kunt instellen.
  5. Onder “Valuta-opties”: zet “Valuta” op Euro (€).

Let op:  klik onderaan altijd op “Wijzigingen opslaan” voordat je naar een ander tabblad gaat — anders ben je je invoer kwijt.

  1. Ga naar WooCommerce > Instellingen > Verzending > Verzendzones.
  2. Klik op “Zone toevoegen”, geef een naam (bijvoorbeeld “Nederland”) en kies de regio.
  3. Klik op “Wijzigingen opslaan”.
  4. Open je zone, klik op “Verzendmethode toevoegen” en kies bijvoorbeeld “Vast tarief” (Flat Rate).

Verzendkosten laten meebewegen met gewicht?  Een vast tarief is standaard hetzelfde bedrag voor iedereen. Automatisch laten meebewegen met het exacte gewicht is geen gratis kernfunctie — de officiële “Weight Based Shipping”-uitbreiding van WooCommerce is een betaalde losse plugin. Het gratis alternatief: maak bij Instellingen > Verzending > Verzendklassen categorieën aan (bijvoorbeeld Licht / Middel / Zwaar), ken elk product de juiste klasse toe, en stel per klasse een ander tarief in bij je vaste-tarief-methode. Dat is minder fijnmazig dan een echte gewichtsformule, maar wel gratis en ruim voldoende voor dit project.

  1. Ga naar WooCommerce > Instellingen > Betalingen.
  2. Je hoeft hier nog niets te doen. Hier verschijnt Mollie als optie zodra je de Mollie-plugin apart hebt geïnstalleerd en geactiveerd — dat is geen onderdeel van WooCommerce zelf.
  1. WooCommerce maakt bij installatie automatisch vier pagina’s aan: Shop, Winkelwagen, Afrekenen en Mijn account.
  2. Ga naar Pagina’s in je WordPress-dashboard om ze te controleren.

Let op: de lijst met verplichte pagina’s uit de projectomschrijving bevat ook nog Home, Product, Over ons en Contact. Product is geen aparte pagina die je aanmaakt — dit sjabloon wordt automatisch gebruikt zodra je een product toevoegt onder Producten in het dashboard. Home, Over ons en Contact maak je zelf aan onder Pagina’s.

Stap 3 - Installatie Elementor Pro

Voordat je begint:  Elementor Pro is een betaalde licentie die je zelf aanschaft en zelf betaalt. De kosten bedragen 75-90 euro (afhankelijk van valutakoers eventuele belastingen). Zorg dat je een geldig e-mailadres en een betaalmethode hebt (bijv. creditcard, PayPal of iDEAL, afhankelijk van wat elementor.com aanbiedt).

  1. Ga naar elementor.com/pricing/.
  2. Kies minimaal het plan “Advanced Solo” (1 website, inclusief eCommerce/WooCommerce-functies).

Let op, dit is de belangrijkste stap:  Koop niet het goedkoopste plan “Essential”! Dat plan bevat sinds eind 2023 geen WooCommerce Builder meer (geen widgets voor product, winkelmandje en afrekenen). Voor dit project heb je minimaal “Advanced Solo” nodig.

  1. Klik bij “Advanced Solo” op de koopknop.
  2. Maak een Elementor-account aan (of log in) met je eigen e-mailadres.
  3. Rond de betaling af.

Check ook:  of er automatisch een jaarlijkse verlenging aanstaat. Wil je dat niet, zet dit dan uit in je accountinstellingen zodra je de aankoop hebt afgerond.

  1.  
  1. Log in op my.elementor.com (het overzicht van je account).
  2. Ga naar “Subscriptions” (Abonnementen). Daar vind je je licentiesleutel en de downloadlink voor het bestand elementor-pro.zip.
  3. Download het elementor-pro.zip bestand naar je computer.

Belangrijk:  bewaar je licentiesleutel en accountgegevens veilig (bijvoorbeeld in een wachtwoordmanager). Deel ze met niemand — wie de sleutel heeft, kan hem op een site activeren.

Elementor Pro werkt bovenop de gratis basisplugin van Elementor. Zonder die basisplugin werkt Pro niet.

  1. Ga in je WordPress-dashboard naar Plugins > Nieuwe plugin toevoegen.
  2. Zoek op “Elementor” — kies de gratis plugin die gemaakt is door Elementor.com zelf (niet een addon van een andere partij).
  3. Klik op “Nu installeren” en daarna op “Activeren”.
  1. Ga naar Plugins > Nieuwe plugin toevoegen > Plugin uploaden.
  2. Kies het elementor-pro.zip bestand dat je in stap 2 hebt gedownload.
    Let op: Op Mac wordt een gedownloade ZIP file meteen uitgepakt naar een folder. Rechtsklik deze “Elementor Pro” folder en kies Comprimeer, om er weer een ZIP van te maken.
  3. Klik op “Nu installeren” en daarna op “Activeren”.
  1. Na het activeren zie je een melding of een nieuw menu-item “Elementor” met de optie “Connect & Activate” of “License”.
  2. Log in met je Elementor-account, of vul je licentiesleutel handmatig in, en klik op activeren.
  3. Controleer of het gelukt is: ga naar Elementor > Instellingen. Je zou daar Pro-functies moeten zien.
  1. Open of maak een pagina en klik op “Bewerken met Elementor”.
  2. Zoek in de lijst met widgets naar “Producten”, “Winkelmandje” of “Afrekenen” (Cart/Checkout).

Zie je deze widgets niet?  Dan is waarschijnlijk het verkeerde abonnement gekocht (bijvoorbeeld Essential in plaats van Advanced Solo). Ga naar my.elementor.com en upgrade je abonnement — je hoeft de plugin dan niet opnieuw te installeren, alleen de licentie te upgraden.

Eén licentie = meestal één website:  wil je later een aparte oefen- of examenomgeving gebruiken, dan moet je de licentie eerst deactiveren op de oude site (via je account op my.elementor.com) voordat je hem op de nieuwe site activeert.

  1. Ga vanuit het WordPress Dashboard naar Appearance > Themes. Installeer en activeer het thema Hello Elementor.
    Let op: Je wordt mogelijk na de installatie naar een promotiepagina van Elementor geleid. Klik in de browser op de Back button om terug naar WordPress te gaan.

Bij gebruik van de gratis versie van Elementor (en het thema Hello Elementor) kan je de WooCommerce-kernpagina’s — productpagina, winkelmandje, checkout — niet aanpassen; die vallen terug op de kale standaard-WooCommerce-templates. 
In dit geval raad ik je Storefront aan — het officiële, gratis WooCommerce-thema. Winkelmandje, checkout en productpagina’s zijn uit de doos al met de juiste WooCommerce-classes gestyled, en het is hét thema waar de meeste WooCommerce-tutorials over child themes, CSS-overrides en template-hooks op gebaseerd zijn. Geen betaalde plugin nodig, je kunt de styling via WooCommerce-templates/CSS aanpassen.

Stap 4 - Je omgeving opschonen en instellen

  1. Ga naar Weergave > Thema’s en verwijder alle thema’s behalve Hello Elementor.
  2. Ga naar Plugins en verwijder (indien aanwezig) “Hello Dolly” en “Akismet Anti-spam” — deze heb je niet nodig voor dit project.
  1. Ga naar Instellingen > Permalinks.
  2. Kies de optie “Berichtnaam”.
  3. Klik op “Wijzigingen opslaan”.

Belangrijk, sla deze stap niet over:  zonder deze instelling krijg je straks 404-foutmeldingen op je productpagina’s, winkelmandje en afrekenpagina. WooCommerce werkt niet goed met de standaard permalink-structuur.

  1. Ga naar Instellingen > Algemeen en vul een duidelijke sitetitel en ondertitel in (niet de standaardtekst “Just another WordPress site”).
  2. Zet de tijdzone op Amsterdam.
  3. Verwijder het standaard voorbeeldbericht “Hallo wereld!” (onder Berichten) inclusief de bijbehorende reactie, en de voorbeeldpagina (onder Pagina’s).
  1. Ga naar Elementor → Editor → Instellingen → Performance → Load Google Fonts Locally en zet deze op Enable (lokaal laden in plaats van van Google’s servers laden) — relevant voor privacy/AVG.
  2. Loop via Elementor > Instellingen > Features één keer de lijst met experimentele functies door, zodat je weet wat er aan- en uitstaat.
  1. Ga naar WooCommerce > Instellingen > Geavanceerd > tabblad “WooCommerce.com” en zet “Enable tracking” (het delen van gebruiksgegevens) uit.
  2. Controleer bij WooCommerce > Instellingen > Geavanceerd > Pagina-instellingen of Shop, Winkelwagen, Afrekenen en Mijn account goed gekoppeld staan aan de juiste pagina’s.
  3. Optioneel: stel bij WooCommerce > Instellingen > Producten naar wens in of klanten productreviews mogen achterlaten.
  1. Verklein je productfoto’s voordat je ze uploadt (bijvoorbeeld maximaal 1500 pixels breed) in plaats van de originele camerabestanden te gebruiken.

Waarom dit belangrijk is:  je hebt maar 2GB opslagruimte. Een paar grote originele foto’s kunnen die ruimte al aardig vullen, en dan loop je vast net op het moment dat je verder wilt werken.

Leerdoelen

Na deze les kun je:

  • zelfstandig een lege hostingomgeving inrichten tot een werkende WordPress-installatie;
  • uitleggen wat WooCommerce aan WordPress toevoegt, en de basisinstellingen (valuta, btw, verzending) correct configureren;
  • het verschil benoemen tussen gratis en betaalde Elementor-functionaliteit, en zelfstandig een Elementor Pro-licentie aanschaffen en activeren;
  • een nieuwe installatie opschonen en instellen volgens een vaste kwaliteitsstandaard (permalinks, thema’s/plugins, privacy-instellingen).

Tijdsplanning

  • 0-10 min Intro klassikaal
  • 10-30 min WordPress installeren
  • 20-55 min WooCommerce installeren
  • 55-90 min Elementor Pro aanschaffen en installeren
  • 90-110 min Omgeving opschonen en instellen
  • 110-120 min Afronding

Wat lever je op?

Aan het eind van deze les staat er een werkende, opgeschoonde omgeving. Controleer zelf (of laat de docent meekijken via de studentomgeving):

  • WordPress werkt (geïnstalleerd in een submap):
    • Permalinks staan op “Berichtnaam”
    • Geen standaard voorbeeld content meer aanwezig
    • Hello Elementor actief, geen overbodige thema’s/plugins
  • WooCommerce werkt:
    • valuta op euro, 
    • btw ingeschakeld, 
    • minimaal 1 verzendzone met verzendmethode.
  • Elementor Pro werkt (geactiveerd en gekoppeld aan een licentie):
    • WooCommerce-widgets zijn zichtbaar in Elementor.

Bronnen

Woocommerce
Elementor
Bug-fix

In de laatste versie van Elementor Pro (v4.3.0+) zit een bug waardoor je een php foutmelding op de frontend ziet bij het gebruik van de Woocommerce plugin. Dit is niet erg maar wel irritant. Waarschijnlijk wordt dit met een volgende update opgelost, maar tot die tijd is er deze fix:

  1. Ga in de serveromgeving naar Bestanden en open httpdocs/woo/wp-content/. (woo is de installatiemap, deze kan bij jou anders heten of niet bestaan — in dat geval staat wp-content rechtstreeks in httpdocs)
  2. Klik op het blauwe plusje bovenaan en maak daar een map mu-plugins aan als die nog niet bestaat. Open de map.
  3. Download dit bestand naar je computer en sleep het in de map mu-plugins (uploaden).
  4. Herlaad een front-end pagina. De foutmelding zou nu weg moeten zijn.

Les 3 – Producten

In deze les gaan we de site vullen met producten. Je hebt hiervoor teksten en foto’s nodig van je producten. Wanneer je deze nog niet hebt, gebruik dan dummy content. We focussen ons op de techniek: hoe werkt het?

Stap 1 - Categorieën en product aanmaken

  1. Ga naar Producten > Categorieën.
  2. Vul een naam in (bijvoorbeeld passend bij je eigen webshop-idee) en klik op “Nieuwe categorie toevoegen”.
  3. Herhaal dit voor een tweede categorie.
  1. Ga naar Producten > Nieuw product toevoegen.
  2. Vul een producttitel in.
  3. Vul bij “Korte beschrijving” (rechts, onder de categorie) een paar zinnen in.
  4. Vul in het grote tekstvak een uitgebreidere productbeschrijving in.
  5. Vul bij “Productgegevens” > “Algemeen” > “Reguliere prijs” een bedrag in.
  1. Vink rechts, bij Productcategorieën, de categorie aan die bij dit product past.
  2. Klik rechts op “Productafbeelding instellen” en kies of upload je hoofdfoto.
  3. Klik daarboven op “Productgalerij” > “Productgalerijafbeeldingen toevoegen” en voeg minimaal 3 foto’s toe.
  4. Klik daarboven op “Product Afbeelding” > “Product afbeelding toevoegen” en kies een foto. Deze is straks in het product overzicht te zien.
  5. Klik op “Publiceren”.

Let op:  staat het product nog op “Concept”? Dan is het niet zichtbaar in de shop — controleer dit bij twijfel.

Stap 2 - Variabele product eigenschappen

Voordat je begint: dit is de belangrijkste stap van vandaag: de opdracht vraagt dat een klant écht iets kan kiezen (bijvoorbeeld een kleur of maat), dus niet slechts één vast product model/type.

  1. Ga naar Producten > Nieuw product toevoegen en vul een titel in.
  2. Kies bij “Productgegevens” de optie “Variabel product” in plaats van “Eenvoudig product”.
  1. Ga naar het tabblad “Kenmerken” (Attributes).
  2. Klik op “Aangepast kenmerk toevoegen” en geef het een naam (bijv. “Kleur” of “Maat”).
  3. Vul de mogelijke waarden in, gescheiden door het teken | (bijvoorbeeld: Rood | Blauw | Groen).
  4. Zorg dat “Gebruikt voor variaties” is aangevinkt.
  5. Klik op “Kenmerken opslaan”.
  1. Ga naar het tabblad “Variaties”.
  2. Klik op “Variaties genereren” om automatisch alle combinaties aan te maken.
  3. Open elke variatie en vul minimaal een prijs in.
  4. Klik op “Wijzigingen opslaan”.

Meest gemaakte fout:  een variatie zonder prijs — die verschijnt dan niet in de shop, ook al lijkt de rest van de instelling goed.

  1. Vink een categorie aan en voeg net als bij stap 1 drie foto’s toe.
  2. Klik rechts op “Publiceren”.

Stap 3 - Kortingsproduct en controle

  1. Open een bestaand product (eenvoudig of variabel).
  2. Vul bij “Productgegevens” > “Algemeen” > “Actieprijs” een lager bedrag in dan de reguliere prijs.
  3. Klik op “Bijwerken”.
  1. Bezoek je Shop-pagina als bezoeker (niet ingelogd als beheerder).
  2. Controleer of je minimaal 3 producten ziet, verdeeld over minimaal 2 categorieën.
  3. Controleer of het kortingsproduct een “Sale!”-badge toont.
  4. Open het variabele product en controleer of je zelf een keuze kunt maken voordat je het in de winkelwagen kunt leggen.

Leerdoelen

Na deze les kun je:

  • productcategorieën aanmaken en producten daaraan koppelen;
  • een eenvoudig product aanmaken in WooCommerce met titel, beschrijving, prijs en meerdere foto’s;
  • een variabel product instellen met een kiesbare eigenschap (bijv. kleur of maat) die een klant zelf kan selecteren;
  • een product met korting/actieprijs instellen;
  • controleren of producten en categorieën goed zichtbaar zijn op de Shop-pagina, vanuit klantperspectief.

Tijdsplanning

  • 0-10 min Klassikale intro
  • 10-40 min Categorieën en product aanmaken
  • 40-80 min Een variabel product met kiesbare eigenschappen 
  • 90-105 min Kortingsproduct instellen en Shop controleren
  • 105-120 min Afronden

Wat lever je op?

  • Minimaal 2 productcategorieën aangemaakt, elk gekoppeld aan minimaal 1 product
  • Minimaal 3 producten aangemaakt en gepubliceerd (niet als Concept blijven staan)
  • Elk product heeft een titel, beschrijving, en 3 foto’s (hoofdfoto + minimaal 2 galerijfoto’s)
  • Minimaal 1 product is een variabel product met een kiesbare eigenschap (bijv. kleur/maat) die een klant zelf kan selecteren
  • Minimaal 1 product heeft een actieprijs, zichtbaar met Sale-badge
  • Alle producten zijn zichtbaar op de Shop-pagina, gefilterd op categorie te bekijken

Les 4 – Ontwerp je webshop

Het gaat in deze les om de techniek: snappen hoe je een WooCommerce-sjabloon opbouwt en welke widgets erbij horen. Een mooi eindresultaat is niet het doel; de daadwerkelijke vormgeving (kleuren, lay-out, huisstijl) hoort bij een ander vak.

TIP: Stel kleur en lettertype onder global settings in op basis van je style tile.

Let op: dit werkt niet met de gratis versie van Elementor. De Theme Builder en alle WooCommerce-widgets (Archive Title, Loop Grid, de Single Product-widgets) bestaan niet in gratis Elementor — en ook niet in de goedkoopste Pro-licentie “Essential”. Je hebt minimaal de licentie “Advanced” nodig (zie les 2). 

Stap 1 - De Theme Builder: hoe werkt het?

  1. Ga naar Elementor > Theme Builder (Sjablonen > Themabouwer).
  2. Bekijk welke sjabloontypes er zijn, onder andere: Single Post, Single Page, Archive, Single Product en Products Archive.
    Let op: Cart, Checkout en My Account staan hier bewust niet tussen — dat zijn vaste pagina’s, geen sjabloon (zie de vooruitblik verderop).

Onthoud dit principe:  één sjabloon per type = automatisch toegepast op alle bijbehorende pagina’s/producten. Dat is de kern van de hele les.

Stap 2 - Een Products Archive-sjabloon maken

  1. Ga naar Elementor > Theme Builder.
  2. Klik bij “Products Archive” op “Add New” (of “Nieuwe toevoegen”).
    Dit is het WooCommerce-specifieke sjabloontype voor de Shop-pagina en productcategorieën. Kies niet het algemene “Archive”-type (dat is voor blog- en andere archieven).
  3. De Elementor Editor opent met een venster om een item uit een Library te kiezen. Sluit dit.
  4. Klik linksboven in de editor op de knop “Products Archive Settings” en geef je sjabloon een duidelijke naam.
  1. Sleep de widget “Archive Title” bovenaan de pagina.
    1. Klik vlak voor de title op het sleutel-icoon (settings) en vink “Include context” uit. De pagina toont nu als titel “Shop”.
  2. Voeg de WooCommerce-widget “Products” toe.
  3. Maak enkele aanpassingen aan de vormgeving van de Products Widget.
  1. Klik op “Publish” (“Publiceren”).
  2. Stel bij de weergavevoorwaarden in: “Shop Page”.
  3. Klik op “Save & Close”.

Controleer vanaf de frontend:  bezoek je Shop-pagina en kijk of je eigen sjabloon wordt getoond, met daarin al je producten uit les 3.

Stap 3 - Een Single Product-sjabloon maken

  1. Ga naar Elementor > Theme Builder.
  2. Klik bij “Single Product” op “Add New”.
  3. De Elementor Editor opent met een venster om een item uit een Library te kiezen. Sluit dit.
  4. Klik linksboven in de editor op de knop “Single Product Settings” en geef je sjabloon een duidelijke naam.
  1. Voeg de widget “Product: Product Images” toe (toont je 3 foto’s als galerij).
  2. Voeg de widget “Product: Product Title” toe.
  3. Voeg de widget “Product: Product Price” toe (toont automatisch de prijs inclusief btw, afhankelijk van je btw-instellingen uit les 2).
  4. Voeg de widget “Product: Add To Cart” toe — bij een variabel product verschijnt hier automatisch de keuzemogelijkheid uit eigenschappen.
  5. Voeg de widget “Product: Additional Information” toe voor de productspecificaties.
  1. Klik op “Publish”.
  2. Stel bij de weergavevoorwaarden in: “Include: Products”.
  3. Klik op “Save & Close”.

Controleer vanaf de frontend:  open het variabele product uit les 3 en controleer of je daar zelf een kleur/maat kunt kiezen voordat je ‘in winkelwagen’ klikt.

Vooruitblik: Cart en Checkout

Cart, Checkout en My Account werken anders dan de sjablonen die je vandaag hebt gemaakt: het zijn vaste, losse pagina’s (geen sjabloon dat op meerdere producten wordt toegepast).

Je bewerkt ze straks rechtstreeks via Pagina’s > “Bewerken met Elementor”, met de widgets “WooCommerce Cart”, “WooCommerce Checkout” en “WooCommerce My Account”.

Leerdoelen

Na deze les kun je:

  • uitleggen hoe de Elementor Theme Builder werkt: sjabloon, widgets en weergavevoorwaarden;
  • een Archief-sjabloon samenstellen voor de Shop-pagina met de juiste widgets;
  • een Single Product-sjabloon samenstellen met widgets voor naam, foto’s, specificaties, prijs/btw en keuze uit eigenschappen;
  • herkennen dat de Cart- en Checkout-sjablonen dezelfde werkwijze gebruiken (voorbereiding op les 5).

Tijdsplanning

  • 0-10 min Klassikale intro
  • 10-25 min De Theme Builder: hoe werkt het?
  • 25-60 min Een Archief-sjabloon maken voor de Shop-pagina
  • 60-100 min Een Single Product-sjabloon maken
  • 100-110 min Vooruitblik: Cart en Checkout
  • 110-120 min Afronden

Wat lever je op?

Aan het eind van deze les staan er twee werkende sjablonen:

  • Een Archief-sjabloon is gepubliceerd en gekoppeld aan de Shop-pagina, met minimaal een titel en een productraster.
  • Een Single Product-sjabloon is gepubliceerd, gekoppeld aan alle producten, met minimaal: titel, foto’s, prijs en een ‘in winkelwagen’-knop.
  • Bij het variabele product (uit les 3) is de eigenschappen-keuze zichtbaar en werkend op de productpagina.

Les 5 – Winkelwagen & Checkout

Let op: ook hier is minimaal “Advanced” nodig.  Net als in les 4 werken de widgets “WooCommerce Cart”, “WooCommerce Checkout” en “WooCommerce My Account” niet met de gratis versie van Elementor, en ook niet met de goedkoopste Pro-licentie “Essential”. Zonder minimaal de licentie “Advanced” (zie les 2) is stap 3 van deze les niet uit te voeren.

Stap 1 - Verzendzone en verzendklassen instellen

Voordat je begint: we gebruiken in de hele klas dezelfde opzet: één verzendzone genaamd “Nederland”, en precies drie verzendklassen: Licht, Middel, Zwaar. Elke klasse moet een merkbaar ander bedrag hebben (minimaal €1 à €2 verschil) — welk product in welke klasse valt en de precieze bedragen bepaal je zelf.

  1. Ga naar WooCommerce > Instellingen > Verzending > Klassen.
  2. Klik op “Verzendklasse toevoegen” en maak drie klassen aan met exact deze namen: Licht, Middel, Zwaar.
  3. Klik op “Wijzigingen opslaan”.
  1. Ga naar Producten > Alle producten en open een product. Klik op het tabblad “Verzending”.
  2. Kies bij “Verzendklasse” de klasse die bij dit product past.
  3. Klik op “Bijwerken”. Herhaal dit voor al je producten.
  1. Ga naar WooCommerce > Instellingen > Verzending > Verzendzones.
  2. Heb je nog geen zone? Klik op “Zone toevoegen”, vul als naam “Nederland” in en kies bij regio “Nederland”. Klik op “Wijzigingen opslaan”.
  3. Heb je in les 2 al een zone aangemaakt? Open die en controleer dat de naam “Nederland” is.
  1. Open binnen je zone de verzendmethode “Vast tarief” (of voeg deze toe als hij er nog niet is).
  2. Laat het basisbedrag staan zoals het is, of zet het op €0,00 als je de prijs volledig door de klassen wilt laten bepalen.
  3. Vul bij elke klasse een bedrag in dat merkbaar verschilt van de andere (minimaal €1 à €2 verschil).
  4. Klik op “Opslaan”.

Controleer vanaf de frontend:  leg een product van elke klasse apart in je winkelwagen en ga naar afrekenen. De verzendkosten moeten per klasse merkbaar verschillen, en het totaalbedrag in de winkelwagen moet meebewegen.

Stap 2 - Stripe aanmaken en koppelen (testmodus)

Voordat je begint: Stripe vraagt voor een testaccount alleen een e-mailadres en wachtwoord — geen KVK, ID of bankrekening zoals bij Mollie. Je doorloopt hiervoor een korte aanmelding bij Stripe zelf, rechtstreeks vanuit de plugin.

  1. Ga in je WordPress-dashboard naar Plugins > Nieuwe plugin toevoegen.
  2. Zoek op “WooCommerce Stripe Payment Gateway” (de officiële plugin van WooCommerce/Stripe).
  3. Klik op “Nu installeren” en daarna op “Activeren”.
  4. Kies voor een test-account.
  1. Ga naar WooCommerce > Instellingen > Betalingen en klik bij Stripe op “Beheren” (of “Instellingen voltooien”).
  2. Open het tabblad “Instellingen” en klik op “Configure connection” (“Verbinding instellen”).
  3. Kies het tabblad “Test” en klik op “Create or connect a test account” (“Testaccount aanmaken of koppelen”).
  4. Je wordt doorgestuurd naar Stripe. Kies hier bewust voor “Leeg account gebruiken” (onder “Sla de configuratie over door een leeg testaccount te koppelen”) — dit geeft direct een werkend testaccount met testgegevens, zónder dat je een echt account hoeft aan te maken of tweestapsauthenticatie (2FA) hoeft in te stellen.
  5. Klik op “Connect” en keer terug naar je WordPress-dashboard.
  1. Ga naar WooCommerce > Instellingen > Betalingen > Stripe > Instellingen.
  2. Vink in de sectie “Algemeen” de optie “Enable test mode” (“Testmodus inschakelen”) aan.
  3. Scroll naar beneden en klik op “Wijzigingen opslaan”.
  1. Leg een product in je winkelwagen en ga naar afrekenen.
  2. Kijk of Stripe (bijvoorbeeld als kaartbetaling) verschijnt als betaalmethode, met een melding dat testmodus actief is.
  3. Rond de testbestelling af met testkaartnummer 4242 4242 4242 4242, een willekeurige toekomstige vervaldatum en een willekeurige 3-cijferige CVC.

Belangrijk om te weten:  zolang testmodus aanstaat, wordt er nooit echt geld afgeschreven — ook niet bij een “geslaagde” testbetaling. Je kunt de testbetaling ook terugzien in je Stripe-dashboard (de testmodus-schakelaar staat daar linksboven).

Stap 3 - Cart- en Checkoutpagina stylen

Voordat je begint: dit hoeft nu niet mooi te zijn — het gaat erom dat de juiste widgets functioneren. De daadwerkelijke vormgeving hoort bij een andere les. Let op: dit gaat via Pagina’s, niet via de Theme Builder — Cart en Checkout zijn vaste pagina’s.

  1. Ga naar Pagina’s en open de pagina “Cart” (door WooCommerce automatisch aangemaakt).
  2. Klik op “Bewerken met Elementor”. Verwijder de tekstwidget met de WP content en vervang deze door de widget “WooCommerce Cart” — deze bevat automatisch de winkelwagentabel, verzendkosten en btw-totaal.
  3. Klik op “Publiceren”.
  1. Ga naar Pagina’s en open de pagina “Checkout” (door WooCommerce automatisch aangemaakt).
  2. Klik op “Bewerken met Elementor”. Verwijder de tekstwidget met de shortcode en vervang deze door de widget “WooCommerce Checkout” — deze bevat automatisch de klantgegevens, het besteloverzicht en de betaalopties.
  3. Klik op “Publiceren”.

Controleer vanaf de frontend:  doorloop een testbestelling en kijk of winkelwagen en afrekenen er functioneel uitzien: verzendkosten, btw-totaal en Stripe moeten allemaal zichtbaar zijn.

Leerdoelen

Na deze les kan de student:

  • een verzendzone met verzendklassen instellen, zodat de verzendkosten per product kunnen variëren en zichtbaar zijn in de winkelwagen;
  • de officiële WooCommerce Stripe-plugin installeren en een gratis testaccount koppelen, zodat er een werkende testbetaalflow ontstaat;
  • de Cart- en Checkoutpagina stylen met de juiste widgets (functioneel, zonder styling-eis);
  • zijn tussenproduct beoordelen aan de hand van een vaste checklist.

Tijdsplanning

  • 0-10 min Klasikale introductie
  • 10-35 min Verzendzone en verzendklassen instellen
  • 35-60 min Stripe installeren en koppelen (test-account)
  • 60-80 min Cart- en Checkoutpagina stylen
  • 80-90 min Korte controle
  • 90-115 min Tussenproductbeoordeling
  • 115-120 min Afronden

Wat lever je op?

Aan het eind van deze les staat er een tussenproduct dat aan onderstaande punten voldoet. Controleer dit zelf, of laat de docent meekijken via de studentomgeving:

  • Minimaal 3 producten zichtbaar op de Shop-pagina, waaronder 1 variabel en 1 kortingsproduct 
  • Single Product-sjabloon toont naam, foto’s, prijs+btw en (bij het variabele product) de keuze-eigenschappen
  • Minimaal 2 verzendklassen ingesteld met verschillende kosten, zichtbaar bij het afrekenen
  • Totale verzendkosten zichtbaar in de winkelwagen
  • Totale btw zichtbaar in de winkelwagen
  • Stripe zichtbaar en te selecteren als betaalmethode bij het afrekenen (testmodus)
  • Bevestigingsmail ontvangen na een testbestelling
  • Cart- en Checkoutpagina aanwezig met de juiste widgets (functioneel, geen styling-eis) 

Les 6 – Orders, testen en verbeteren

Stap 1 - Volledige klantflow testen

  1. Open je webshop in een incognito-/privévenster (niet ingelogd als beheerder).
  2. Open het variabele product en kies zelf een eigenschap (bijv. kleur/maat).
  3. Leg het product in je winkelwagen.
  4. Controleer in de winkelwagen: is de verzendkeuze zichtbaar, en veranderen de verzendkosten en het btw-totaal mee?
  5. Ga naar afrekenen, vul je gegevens in en betaal via Stripe (testmodus) met testkaart 4242 4242 4242 4242.
  6. Controleer of je op een bedankpagina met orderoverzicht terechtkomt.
  7. Controleer of je een bevestigingsmail hebt ontvangen (check ook je spam-map).

Stap 2 - Bestellingen controleren in de backend

  1. Ga naar WooCommerce > Bestellingen.
  2. Open je eigen testbestelling.
  3. Controleer of het product, de gekozen eigenschap, het verzendbedrag, het btw-bedrag en de betaalstatus allemaal kloppen.

Stap 3 - Problemen herkennen en oplossen

  1. Geen verzendopties zichtbaar bij het afrekenen? Controleer of er een verzendmethode aan je zone is toegevoegd (les 5).
  2. Stripe niet zichtbaar als betaalmethode? Controleer of je een testaccount hebt gekoppeld en “Enable test mode” is aangevinkt (les 5).
  3. Geen keuzemogelijkheid uit eigenschappen op de productpagina? Controleer of het product écht op “Variabel product” staat en de variaties een prijs hebben (les 3 en 4).
  4. Geen bevestigingsmail ontvangen? Controleer je spam-map, en controleer bij WooCommerce > Instellingen > E-mails of de e-mail “Bestelling ontvangen” is ingeschakeld.

Leerdoelen

Na deze les kan de student:

  • de volledige klantflow end-to-end doorlopen en testen, van product tot bevestigingsmail;
  • bestellingen terugvinden en controleren in de WooCommerce-backend;
  • veelvoorkomende problemen herkennen en zelfstandig oplossen;
  • zijn eindproduct beoordelen aan de hand van een vaste checklist.

Tijdsplanning

  • 0-10 min Klassikale introductie
  • 10-40 min Volledige klantflow testen
  • 40-60 min Bestellingen controleren in de backend
  • 60-90 min Problemen herkennen en oplossen
  • 90-120min Eindproductbeoordeling

Wat lever je op?

Eindproductbeoordeling
Controleer de volledige klantflow aan de hand van deze checklist:

  • Shop-pagina toont minimaal 3 producten in minimaal 2 categorieën, met 1 product in de aanbieding
  • Productpagina toont naam, beschrijving, 3 foto’s, specificaties, prijs+btw en (bij het variabele product) keuze uit eigenschappen  
  • Product succesvol in winkelwagen te leggen
  • Keuze uit verschillende verzendmethoden mogelijk, met verzendkosten zichtbaar in de winkelwagen  
  • Totale btw zichtbaar in de winkelwagen  
  • Betalen via Stripe (testmodus) werkt volledig, tot en met de bedankpagina  
  • Bevestigingsmail ontvangen na de bestelling  
  • Bestelling correct terug te vinden in WooCommerce > Bestellingen, met juiste status, product en bedrag 

Les 7 – SEO

Stap 1 - Yoast SEO installeren en instellen

  1. Ga naar Plugins > Nieuwe plugin toevoegen.
  2. Zoek op “Yoast SEO”.
  3. Klik op “Nu installeren” en daarna op “Activeren”.
  1. Volg de configuratiewizard die na activering verschijnt (of ga naar Yoast SEO > Instellingen).
  2. Vul bij de organisatiegegevens een naam en (indien gewenst) een logo in.

Stap 2 - Titel en meta-description per pagina en product instellen

  1. Open een pagina om te bewerken.
  2. Scrol naar beneden naar het Yoast SEO-blok (of zoek het in de zijbalk bij de blok-editor).
  3. Vul bij “SEO title” een unieke, beschrijvende titel in (streef naar 50-60 tekens).
  4. Vul bij “Meta description” een korte, aantrekkelijke omschrijving in (streef naar 140-160 tekens).
  5. Werk de pagina bij.
  1. Open een product om te bewerken.
  2. Vul op dezelfde manier de SEO title en meta description in, specifiek voor dit product.
  3. Werk het product bij. Herhaal dit voor al je producten.

Let op de kleurindicator:  Yoast toont een groene, oranje of rode indicator bij de lengte van je titel/omschrijving — gebruik dit als richtlijn, niet als harde eis.

Stap 3 - Overige SEO-checks: alt-teksten, permalinks, koppenstructuur

  1. Open een product en klik op een van de productfoto’s in de Mediabibliotheek.
  2. Vul bij “Alternatieve tekst” een korte, beschrijvende tekst in (bijvoorbeeld: “Rode sneaker, zijaanzicht”).
  3. Herhaal dit voor alle foto’s van al je producten.
  1. Open een productpagina op je eigen site.
  2. Controleer of de URL leesbaar is (bijvoorbeeld /product/rode-sneaker) en niet uit een ID-nummer bestaat.
  3. Klopt dit niet? Ga dan naar Instellingen > Permalinks en controleer of “Berichtnaam” nog steeds geselecteerd is (zie les 2).
  1. Bezoek een pagina als bezoeker en klik met de rechtermuisknop op “Paginabron weergeven”.
  2. Zoek naar precies 1 <h1>-tag per pagina.
  3. Controleer of onderliggende koppen logisch met <h2> en <h3> zijn opgebouwd, niet willekeurig door elkaar.

Leerdoelen

Na deze les kan de student:

  • Yoast SEO installeren en gebruiken;
  • een unieke SEO-titel en meta-description instellen per pagina en per product;
  • alternatieve teksten toevoegen aan productfoto’s;
  • controleren of permalinks leesbaar zijn en de koppenstructuur logisch is.

Tijdsplanning

  • 0-10 min Klassikale introductie
  • 10-30 min Yoast SEO installeren en instellen
  • 30-75 min Titel en meta-description per pagina en product instellen
  • 75-110 min Overige SEO-checks: alt-teksten, permalinks, koppenstructuur
  • 110-120min Afronden

Wat lever je op?

Controleer je hele webshop aan de hand van deze checklist:

  • Elke pagina en elk product heeft een unieke, beschrijvende SEO-titel
  • Elke pagina en elk product heeft een ingevulde meta-description
  • Alle productfoto’s hebben een ingevulde alternatieve tekst
  • Permalinks zijn leesbaar (bijv. /product/productnaam, geen ID-nummer)
  • Elke pagina heeft precies 1 H1, met logische H2/H3 daaronder waar relevant

Bonus / Verdieping

Deze onderdelen horen niet bij een vaste les, maar zijn wel onderdeel van de bonusitems uit de projectomschrijving. Kies zelf welke je oppakt, in de volgorde die je wilt.

Bonusitem 1 - Werkende chatfunctie

Welke plugin? Tawk.to is een volledig gratis livechat-plugin: onbeperkt gesprekken, onbeperkt gebruikers, geen verplichte upgrade. Andere “gratis” chat-plugins hebben vaak een maandelijkse limiet (bijvoorbeeld 50-100 gesprekken).

  1. Ga naar tawk.to en maak een gratis account aan.
  2. Volg de wizard om je eigen ‘property’ (website) aan te maken.
  1. Ga in je WordPress-dashboard naar Plugins > Nieuwe plugin toevoegen.
  2. Zoek op “Tawk.To Live Chat”.
  3. Klik op “Nu installeren” en daarna op “Activeren”.
  1. Log in de plugin-instellingen in met je Tawk.to-account.
  2. Kies de property die je hebt aangemaakt.
  3. Bezoek je site en controleer of de chatwidget rechtsonder verschijnt.

Bonusitem 2 - Gast-afrekenen

  1. Ga naar WooCommerce > Instellingen > Accounts en privacy.
  2. Vink onder “Afrekenen” de optie “Gastafrekenen inschakelen” (“Enable guest checkout”) aan.
  3. Klik op “Wijzigingen opslaan”.

Controleer vanaf de frontend:  ga naar afrekenen in een incognitovenster en controleer of je kunt bestellen zonder een account aan te maken.

Bonusitem 3 - 'Mijn account'-omgeving stylen

‘Mijn account’ is, net als Cart en Checkout (les 5), een vaste pagina — géén Theme Builder-sjabloon. Je stylet ‘m rechtstreeks op dezelfde manier.

  1. Ga naar Pagina’s en open de pagina “Mijn account” (door WooCommerce automatisch aangemaakt).
  2. Klik op “Bewerken met Elementor”.
  3. Verwijder de tekstwidget met de shortcode en vervang deze door de widget “WooCommerce My Account”.
  4. Stel de widget en de omliggende pagina naar wens vorm (kleuren, lay-out, huisstijl).
  5. Klik op “Publiceren”.

Leerdoelen

Na deze les kan de student:

  • Yoast SEO installeren en gebruiken;
  • een unieke SEO-titel en meta-description instellen per pagina en per product;
  • alternatieve teksten toevoegen aan productfoto’s;
  • controleren of permalinks leesbaar zijn en de koppenstructuur logisch is.

Tijdsplanning

  • 0-10 min Klassikale introductie
  • 10-30 min Yoast SEO installeren en instellen
  • 30-75 min Titel en meta-description per pagina en product instellen
  • 75-110 min Overige SEO-checks: alt-teksten, permalinks, koppenstructuur
  • 110-120min Afronden

Wat lever je op?

Controleer je hele webshop aan de hand van deze checklist:

  • Elke pagina en elk product heeft een unieke, beschrijvende SEO-titel
  • Elke pagina en elk product heeft een ingevulde meta-description
  • Alle productfoto’s hebben een ingevulde alternatieve tekst
  • Permalinks zijn leesbaar (bijv. /product/productnaam, geen ID-nummer)
  • Elke pagina heeft precies 1 H1, met logische H2/H3 daaronder waar relevant

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.