Winkelpagina's en de afrekenblokken

Module 2: Installeren en inrichten · Leestijd: 9 minuten

Leerdoel: Na deze les kun je de winkelpagina's van WooCommerce herkennen en goed koppelen, en kies je bewust tussen de blokken en de shortcodes voor winkelwagen en afrekenen.

Kernbegrippen: winkelpagina, winkelwagen, afrekenen, Mijn account, voorwaardenpagina, pagina-instellingen, blokken, shortcodes, blokthema, klassiek thema, compatibiliteit van uitbreidingen, noindex

Vier pagina's met een speciale rol

Een WordPress-site bestaat uit pagina's en berichten (WordPress-cursus, les 4.2). WooCommerce voegt producten toe als eigen berichttype, en geeft een paar gewone pagina's een speciale rol. Die pagina's zien er in de lijst bij Pagina's uit als elke andere pagina, maar WooCommerce weet welke pagina welke taak heeft. Dat staat in de instellingen, niet in de naam of het adres van de pagina.

Omdat de koppeling in de instellingen zit, kun je de pagina's een andere titel en een ander adres geven. Theehuis Example noemt de winkelwagen "Mandje" op /mandje/, en dat werkt, zolang die pagina bij Pagina-instellingen als winkelwagen staat.

Gaat de koppeling mis, dan merk je dat op vreemde plekken. Een paar voorbeelden die vaak voorkomen:

• Iemand verwijdert de pagina Winkelwagen omdat "die er dubbel stond". Daarna komt een bezoeker na In winkelwagen op een foutpagina, en sommige thema's tonen het mandje in de kop niet meer.
• Na een verhuizing of import staat bij Afrekenen een andere pagina gekoppeld dan de pagina met het afrekenblok. De bezoeker ziet een lege pagina en kan niet bestellen.
• Een tweede pagina "Afrekenen-2" ontstaat na een tweede keer de wizard. De ene pagina is gekoppeld, de andere staat in het menu.

Controleer daarom na elke grote wijziging (thema, verhuizing, import) bij Pagina-instellingen welke pagina gekoppeld is, en klik door naar die pagina.

Blokken of shortcodes

Er zijn twee manieren waarop winkelwagen en afrekenen op de pagina komen.

Shortcodes zijn de oude manier: op de pagina staat een korte code tussen haken, zoals [woocommerce_cart] en [woocommerce_checkout]. WooCommerce vervangt die bij het tonen door het formulier. De vormgeving komt van het thema, en heel veel uitbreidingen zijn jarenlang voor deze vorm gemaakt.

Blokken zijn de nieuwe manier: de pagina bevat het blok Winkelwagen of Afrekenen, opgebouwd uit kleinere blokken (adres, verzending, betaalmethode, overzicht, de bestelknop). Je ziet en bewerkt ze in de blokeditor (WordPress-cursus, les 4.1). De blokken praten met de server via de Store API (les 2.4): het formulier werkt direct in de browser, zonder de pagina telkens opnieuw te laden.

Sinds WooCommerce 8.3 (november 2023) krijgt een nieuwe installatie de blokken. Een bestaande winkel die bijwerkt, houdt wat hij had. De shortcodes blijven beschikbaar.

Welke kies je? Een paar vragen helpen:

• Werken je uitbreidingen met de blokken? Dit is de belangrijkste vraag. Een uitbreiding die een veld aan het afrekenen toevoegt (een bezorgdatum, een btw-nummer, een kadobericht), moet voor de blokken apart zijn aangepast. Op de pagina van de uitbreiding staat meestal of ze "compatibel met het afrekenblok" is. In de editor van het afrekenblok kan WooCommerce een melding tonen over actieve uitbreidingen die niet als compatibel zijn aangemerkt.
• Welk thema heb je? Met een blokthema (WordPress-cursus, les 5.1) passen de blokken het best. Met een klassiek thema werken ze ook, maar de vormgeving komt dan minder vanzelf overeen.
• Moet je de bestelknop aanpassen? In de blokken stel je de tekst van de knop in de editor in. Voor de regels die daarover gelden (les 5.4) is dat handig.
• Wil je dat de Store API openbaar is? Bij blokken moet hij bereikbaar zijn; een beveiligingsplugin die de REST API dichtzet, breekt het afrekenen.

Theehuis Example gebruikt geen uitbreidingen die velden toevoegen en heeft een blokthema. Het houdt de blokken. Een andere shop met een bezorgdatumplugin die alleen met de shortcode werkt, kiest tijdelijk de shortcode, en kijkt bij elke grote update van die plugin opnieuw.

Wissel je van vorm, doe dat dan in je testwinkel en test daarna een hele bestelling (les 4.5). WooCommerce heeft bij WooCommerce > Status > Hulpmiddelen een hulpmiddel om ontbrekende winkelpagina's opnieuw aan te maken; dat maakt nieuwe pagina's, het zet bestaande niet om.

Waarom winkelwagen en afrekenen niet in zoekmachines horen

Een winkelwagen is voor elke bezoeker anders, en voor een zoekmachine altijd leeg. Een lege winkelwagen in de zoekresultaten helpt niemand. WooCommerce zet daarom op de pagina's winkelwagen, afrekenen en Mijn account zelf een noindex: de zoekmachine mag de pagina bezoeken, maar neemt hem niet op in de zoekresultaten. Je ziet het in de broncode als:

<meta name='robots' content='noindex, follow' />

Een SEO-plugin of thema kan die regel overschrijven. Dat is zelden bedoeld. In de opdracht van deze les controleer je of hij er staat.

Diezelfde drie pagina's mogen ook niet in de paginacache. WooCommerce stuurt er kopregels bij die caches vertellen dat ze de pagina niet mogen bewaren. Hoe je controleert dat je cache zich daaraan houdt, komt in les 6.4.

Wat een bezoeker zonder winkelwagen ziet

Open je de afrekenpagina zonder iets in je winkelwagen, dan gebeurt er iets anders dan met spullen erin:

• Met de blokken toont de afrekenpagina meestal een melding dat de winkelwagen leeg is, met een knop terug naar de winkel.
• Met de shortcode stuurt WooCommerce je vaak door naar de winkelwagen.

Beide zijn normaal. De controle in deze les houdt er rekening mee: het programma plaatst nooit iets in je winkelwagen en kijkt alleen naar wat een bezoeker zonder winkelwagen te zien krijgt.

In de praktijk: zo ziet het eruit in WooCommerce

Bij andere thema's en hosters werkt het vergelijkbaar; alleen de vormgeving verschilt.

1. Ga naar WooCommerce > Instellingen > Geavanceerd (Advanced) en open Pagina-instellingen (Page setup). Noteer welke pagina bij Winkelwagen, Afrekenen, Mijn account en Algemene voorwaarden staat.
2. Klik bij Pagina's op elk van die pagina's en controleer of het blok (of de shortcode) erop staat.
3. Open de afrekenpagina in de editor. Klik op het blok Afrekenen en bekijk de onderdelen in de lijstweergave: contactgegevens, verzendadres, verzendopties, betaalopties, notitie, voorwaarden, de knop.
4. Kijk in de editor van het afrekenblok (en bij de uitbreidingen zelf) of er een melding staat over uitbreidingen die niet compatibel zijn met de blokken.
5. Open de winkelwagen in een privévenster en bekijk de broncode (Ctrl+U): zoek naar noindex.

Samenvatting

• WooCommerce geeft vier pagina's een rol (winkel, winkelwagen, afrekenen, Mijn account) plus de voorwaardenpagina; de koppeling staat in de instellingen, niet in de naam.
• Na een verhuizing, import of themawissel controleer je de koppelingen bij Pagina-instellingen.
• Nieuwe winkels krijgen sinds WooCommerce 8.3 de blokken; de shortcodes bestaan nog. Kies op basis van je uitbreidingen en thema.
• De blokken hebben de Store API nodig; zet de REST API niet dicht.
• Winkelwagen, afrekenen en Mijn account krijgen van WooCommerce een noindex en horen niet in de cache.

Quiz

Opdracht

Opdracht A2.2: Je winkelpagina's. Vul het adres van je (test)winkel in en de adressen van je winkelwagen, afrekenpagina en Mijn account (pad, zoals /winkelwagen/, of de volledige URL op dezelfde host). Het programma vraagt elke pagina één keer op, zonder cookies en zonder iets in de winkelwagen te leggen.

Per pagina is het goed als:

• de pagina via https met status 200 antwoordt;
• de HTML een kenmerk van WooCommerce bevat: voor de winkelwagen het blok wp-block-woocommerce-cart of de body-klasse woocommerce-cart, voor afrekenen wp-block-woocommerce-checkout of woocommerce-checkout, voor Mijn account woocommerce-account of een inlogformulier van WooCommerce;
• er een noindex staat (meta robots of kopregel X-Robots-Tag).

Stuurt de afrekenpagina met een lege winkelwagen door naar de winkelwagen die je hebt ingevuld, dan is dat ook goed.

Oranje: geen noindex (kijk of een SEO-plugin of je thema hem weghaalt); de pagina gebruikt de shortcode in plaats van het blok (geen fout, wel de vraag of dat een bewuste keuze is). Rood: een foutstatus zoals 404, een pagina zonder WooCommerce-kenmerk (koppel de juiste pagina bij Pagina-instellingen), een doorsturing naar een andere host, of http zonder https.

Schrijf daarna voor jezelf op welke vorm (blokken of shortcode) je gebruikt en waarom.

Verder lezen

• Gratis WordPress-cursus 5.1: Thema's: blokthema's en klassieke thema's
• Gratis WordPress-cursus 4.2: Pagina's, berichten, categorieën en tags
• Gratis WordPress-cursus 4.1: De blokeditor
• WooCommerce 8.3: blokken standaard voor nieuwe winkels (developer.woocommerce.com, Engels): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• De Store API (developer.woocommerce.com, Engels): https://developer.woocommerce.com/docs/apis/store-api/