Hoe WooCommerce werkt

Module 1: Voordat je begint · Leestijd: 10 minuten

Leerdoel: Na deze les kun je uitleggen hoe WooCommerce in WordPress werkt en waar producten, bestellingen, de winkelwagen en de geplande taken staan.

Kernbegrippen: producttype, berichttype product, bestellingen (HPOS), winkelpagina's, sessie en winkelwagen, Store API, REST API, Action Scheduler, transactionele mails, uitbreidingen

Een plugin die van je site een winkel maakt

In de WordPress-cursus (les 1.2 en 1.3) zag je hoe een pagina ontstaat: de webserver geeft het verzoek aan PHP, PHP laadt WordPress, de plugins en het thema, haalt gegevens uit de database en maakt er HTML van. WooCommerce voegt zich in dat proces als een grote plugin. Het brengt vier dingen mee:

1. Gegevens: producten, bestellingen, klanten, belastingtarieven, verzendzones.
2. Pagina's: de winkel, de winkelwagen, het afrekenen en Mijn account.
3. Processen: een winkelwagen per bezoeker, betalingen via een betaalprovider, mails, voorraad bijwerken, geplande taken.
4. Ingangen voor programma's: de Store API en de REST API.

Wie weet waar deze onderdelen zitten, kan later een fout veel sneller vinden. Daarom kijken we er nu één voor één naar.

Producten: een eigen berichttype

WordPress kent berichttypen: pagina's en berichten zijn er twee van (WordPress-cursus les 4.2). WooCommerce voegt het berichttype product toe. Een product staat dus, net als een pagina, in de tabel met berichten, met zijn extra gegevens (prijs, SKU, voorraad, gewicht) als metagegevens. Categorieën en tags van producten zijn eigen taxonomieën, los van die van je blog.

Elk product heeft een producttype. In de kern zijn dat enkelvoudig, gegroepeerd, extern (een link naar een andere winkel) en variabel. De vinkjes virtueel (niets te verzenden) en downloadbaar (een bestand na betaling) kun je daarbij aanzetten. Een variabel product heeft variaties, zoals een theepot in drie kleuren; elke variatie is een eigen item met een eigen prijs en voorraad. Module 3 gaat hier dieper op in.

Bestellingen: eigen tabellen (HPOS)

Vroeger bewaarde WooCommerce bestellingen ook als berichten. Bij drukke winkels werd dat traag, omdat bestellingen en blogberichten dezelfde grote tabel deelden. Daarom kwam HPOS (High-Performance Order Storage): bestellingen in eigen tabellen, zoals wc_orders, wc_order_addresses en wc_orders_meta (met het tabelvoorvoegsel van je site ervoor). Sinds WooCommerce 8.2 (oktober 2023) staat HPOS aan bij elke nieuwe installatie. Een oudere winkel blijft op de oude opslag tot je zelf overschakelt bij WooCommerce > Instellingen > Geavanceerd > Functies.

Waarom moet je dit weten? Om drie redenen:

• Back-ups: bestellingen staan niet in je bestanden maar in de database. Een back-up zonder database is voor een shop waardeloos (les 6.2).
• Uitbreidingen: een oudere uitbreiding die bestellingen nog als bericht leest, werkt niet goed met HPOS. WooCommerce waarschuwt bij de plugin als die niet compatibel is.
• Terugzetten: zet je een back-up van gisteren terug, dan verdwijnen de bestellingen van vandaag. Dat is bij een shop veel erger dan bij een blog (les 6.2).

De winkelwagen: per bezoeker anders

Een gewone pagina is voor iedere bezoeker gelijk. De winkelwagen niet. Zodra een bezoeker iets in de winkelwagen legt, start WooCommerce een sessie: een cookie (wp_woocommerce_session_ gevolgd door een code) in de browser en een regel in een sessietabel in de database. Zo weet de shop bij het volgende verzoek welke winkelwagen bij deze bezoeker hoort.

Twee gevolgen die je later terugziet:

• Winkelwagen, afrekenen en Mijn account mogen nooit in een paginacache terechtkomen, anders ziet de ene bezoeker de winkelwagen van de ander. WooCommerce stuurt op die pagina's zelf kopregels mee die caching verbieden (les 6.4).
• Een shop die bij elke bezoeker al een sessie start, ook zonder winkelwagen, maakt de paginacache van de hele site nutteloos. Dat is een veelvoorkomende fout van thema's en uitbreidingen.

De winkelpagina's en de blokken

Bij de installatie maakt WooCommerce vier pagina's: Winkel, Winkelwagen, Afrekenen en Mijn account. Sinds versie 8.3 (november 2023) gebruiken nieuwe installaties voor winkelwagen en afrekenen blokken; oudere winkels gebruiken vaak nog shortcodes. Beide werken. Het verschil is belangrijk voor uitbreidingen: een uitbreiding die iets aan het afrekenen toevoegt, moet de variant ondersteunen die jij gebruikt. Les 2.2 laat zien hoe je dat nagaat.

Twee ingangen voor programma's: Store API en REST API

WooCommerce heeft twee programmeerbare ingangen, en het verschil is voor de veiligheid belangrijk:

Dat de Store API publiek is, is geen lek: het is precies wat elke bezoeker in de winkel ziet, alleen in een vorm die programma's kunnen lezen. Probeer het met je eigen shop: open https://shop.example.com/wp-json/wc/store/v1/products in je browser (met je eigen adres) en je ziet je producten als JSON. De REST API daarentegen hoort zonder sleutel dicht te zijn. Les 2.4 controleert beide.

Achter de schermen: Action Scheduler en mails

Veel werk in een shop gebeurt niet terwijl de klant wacht, maar later. WooCommerce gebruikt daarvoor de Action Scheduler: een wachtrij van geplande taken, zoals het annuleren van een onbetaalde bestelling na de ingestelde tijd, het versturen van webhooks of het bijwerken van rapporten. Je ziet de wachtrij bij WooCommerce > Status > Geplande acties. Deze taken draaien op WP-Cron, dat alleen loopt als er bezoekers zijn. Bij een rustige shop kan dan werk blijven liggen; les 7.3 laat zien hoe een echte cron dat oplost.

Daarnaast verstuurt WooCommerce transactionele mails: een mail aan jou bij een nieuwe bestelling, en mails aan de klant bij ontvangst, verzending, terugbetaling of een nieuw account. Komen die niet aan, dan denkt de klant dat er iets mis is. Les 6.1 regelt de bezorgbaarheid.

In de praktijk: zo ziet het eruit in WooCommerce

In het WordPress-beheer van Theehuis Example verschijnen na installatie drie nieuwe menu's: WooCommerce (bestellingen, klanten, instellingen, status), Producten en Analytics (in recente versies soms onder WooCommerce). Bij WooCommerce > Status vind je de serveromgeving, de databasetabellen, de geplande acties en de logboeken. Dat scherm heb je straks vaak nodig. De stappen zijn bij elke hoster gelijk, omdat ze in WordPress zelf zitten.

Samenvatting

• WooCommerce brengt gegevens, pagina's, processen en twee programmeerbare ingangen mee.
• Producten zijn een eigen berichttype; bestellingen staan bij nieuwe winkels in eigen tabellen (HPOS, standaard sinds 8.2).
• De winkelwagen werkt met een sessie per bezoeker; daarom mogen winkelwagen, afrekenen en Mijn account niet in de cache.
• De Store API is publiek en toont wat elke bezoeker ziet; de REST API hoort zonder sleutel dicht.
• Geplande taken lopen via de Action Scheduler en WP-Cron; mails zijn deel van het bestelproces.

Quiz

Opdracht

Opdracht A1.2: Draait deze site op WooCommerce? Vul een domein in, kies ja of nee, en schrijf op welk bewijs je zag (bijvoorbeeld "generator" of "wc/store/v1"). Het programma haalt de homepage op, leest de REST-index (/wp-json/, alleen de lijst met namespaces) en vraagt /wp-json/wc/store/v1/products?per_page=1 op. Het herkent WooCommerce aan een meta generator met WooCommerce, de namespace wc/store/v1 in de REST-index, een werkende Store API, bestanden uit /wp-content/plugins/woocommerce/ of de body-klasse woocommerce. Groen: je keuze klopt en je bewijs komt voor in de kopregels, de HTML, de REST-index of het Store API-antwoord; je ziet dan ook het aantal producten en de valuta. Oranje: je keuze klopt, maar je bewijs vinden we niet terug. Rood: je keuze klopt niet. Probeer het eerst op je eigen shop en daarna op een shop die je kent. Er wordt niets in een winkelwagen gelegd en niets verstuurd.

Verder lezen

Waar stappen in een paneel staan, gelden ze voor WebOké; bij andere aanbieders werkt het vergelijkbaar.

• Gratis WordPress-cursus 1.2: Onder de motorkap: webserver, PHP en database
• Gratis WordPress-cursus 1.3: Bestanden, wp-config en de database
• Gratis WordPress-cursus 4.2: Pagina's, berichten, categorieën en tags
• High-Performance Order Storage (developer.woocommerce.com, Engels): https://developer.woocommerce.com/docs/features/orders/high-performance-order-storage/
• Store API (developer.woocommerce.com, Engels): https://developer.woocommerce.com/docs/apis/store-api/
• Action Scheduler (Engels): https://actionscheduler.org/