“Ik heb drie keer op de knop gedrukt en mijn winkelwagen is nog steeds leeg.” Zo’n bericht via het contactformulier is vaak het eerste teken. U probeert het zelf, ingelogd als beheerder, en bij u werkt alles. De klant zal wel iets verkeerd doen, denkt u. Totdat de tweede en de derde melding binnenkomen.

Een winkelwagen die leeg is in WooCommerce nadat een product is toegevoegd, is een klassieker met bijna altijd dezelfde achtergrond: de shop onthoudt niet wie de bezoeker is. WooCommerce houdt de winkelwagen bij in een sessie die aan een cookie hangt. Als die cookie niet wordt gezet, of als de pagina uit een cache komt die van geen enkele bezoeker iets weet, is de winkelwagen elke keer weer leeg. In dit artikel leg ik uit hoe u dat vaststelt en oplost.

Hoe WooCommerce een winkelwagen onthoudt

Zodra een bezoeker iets in de winkelwagen legt, doet WooCommerce twee dingen. Het zet een cookie in de browser met een sessie-ID, en het bewaart de inhoud van de winkelwagen in de database onder dat ID. Bij elke volgende pagina leest de shop de cookie, zoekt de sessie op en toont de bijbehorende winkelwagen. Ingelogde klanten hebben daarnaast een winkelwagen die aan hun account hangt.

Alles wat die keten onderbreekt, geeft een lege winkelwagen. De cookie wordt niet gezet, de cookie wordt niet meegestuurd, de pagina komt uit een cache die de cookie negeert, of de sessie in de database wordt te snel opgeruimd. Vier schakels, en de eerste stap is uitzoeken welke breekt.

Reproduceren: doe het als een klant

Test nooit als ingelogde beheerder. Caching en sessies gedragen zich dan anders. Open een privévenster of een andere browser, ga naar een productpagina en voeg iets toe. Let op:

  • Verschijnt er een melding “toegevoegd aan winkelwagen”? Zo nee, dan mislukt het verzoek al.
  • Toont het winkelwagenicoontje in de koptekst het juiste aantal?
  • Is de winkelwagen leeg zodra u naar de winkelwagenpagina gaat, of pas na het navigeren naar een andere pagina?
  • Werkt het wel op uw telefoon via mobiel internet (dus buiten uw kantoornetwerk)?

Werkt het wel in de ene browser en niet in de andere, of wel mobiel en niet op de desktop, dan zit het vrijwel zeker in de cache. Werkt het nergens, dan is het eerder een sessie- of cookieprobleem.

Oorzaak 1: paginacache op de winkelwagenpagina

De meest voorkomende oorzaak. Een cacheplugin of servercache bewaart een kopie van de winkelwagenpagina en serveert die aan iedereen. Die kopie is gemaakt op een moment dat de winkelwagen leeg was, en dat ziet dus elke bezoeker. Het product is wel toegevoegd (in de database staat het netjes), maar de pagina laat het niet zien.

Oplossen: sluit de pagina’s winkelwagen, afrekenen en mijn-account uit van caching. De meeste cacheplugins doen dat automatisch voor de standaardpagina’s van WooCommerce, maar niet als u de pagina’s een andere slug heeft gegeven of een eigen winkelwagenpagina heeft gebouwd. Controleer ook servercaching bij uw host (Varnish, NGINX FastCGI) en Cloudflare; die weten niet welke pagina’s van WooCommerce zijn tenzij u het ze vertelt.

De sessiecookie van WooCommerce moet in de browser terechtkomen. Dat mislukt als er al uitvoer naar de browser is gestuurd voordat WooCommerce de cookie kan zetten, bijvoorbeeld door een spatie of foutmelding in een pluginbestand. Het kan ook misgaan als de cookie-instellingen niet kloppen met het domein: een shop die op zowel www als zonder www bereikbaar is, of die van http naar https is verhuisd zonder de site-URL bij te werken.

Herkennen: in de ontwikkelaarsconsole van de browser onder Applicatie of Opslag, Cookies, ontbreekt een cookie die begint met “wp_woocommerce_session”. Oplossen: controleer of de site-URL en WordPress-URL exact overeenkomen met hoe de shop wordt geopend, en zet een omleiding in van de ene variant naar de andere. Kijk in het foutenlog naar meldingen over “headers already sent”.

Oorzaak 3: een cookiebanner die te veel blokkeert

Sommige cookiebanners blokkeren álle cookies totdat de bezoeker toestemming geeft, ook functionele. De sessiecookie van WooCommerce is functioneel en mag altijd, maar de banner weet dat niet. De klant die op “weigeren” klikt, kan dan niet meer winkelen.

Oplossen: voeg de WooCommerce-cookies toe aan de lijst met noodzakelijke cookies in uw cookieplugin. Dat is niet alleen technisch nodig, het is ook hoe de regels bedoeld zijn.

Oorzaak 4: sessies worden te snel opgeruimd

WooCommerce bewaart sessies standaard twee dagen. Sommige optimalisatieplugins ruimen de sessietabel agressiever op, en een objectcache (Redis, Memcached) die vol zit of verkeerd is ingesteld, kan sessies kwijtraken. Symptoom: de winkelwagen werkt, maar is na een paar minuten of na het openen van een andere pagina leeg.

Oplossen: controleer de instellingen van databaseopruimplugins en, als u objectcaching gebruikt, of de opslag niet vol zit. Dit is werk voor iemand met servertoegang.

Oorzaak 5: een thema of plugin die de knop kaapt

Soms is het verzoek zelf het probleem: een thema met een eigen “toevoegen”-knop, een snelweergaveplugin of een JavaScript-fout waardoor het verzoek nooit wordt verstuurd. Dan is de winkelwagen niet leeg omdat hij niet getoond wordt, maar omdat er echt niets is toegevoegd.

Herkennen: geen melding “toegevoegd” en rode regels in de Console. Oplossen: zoek de fout op in de Console, sluit de productpagina’s uit van JavaScript-optimalisatie en test met het standaardthema Storefront om het thema uit te sluiten.

Volgorde en praktijk

Begin bij de cache (oorzaak 1), dan de cookie (2 en 3), dan pas het diepere werk (4 en 5). In onze ervaring is het in ruwweg drie van de vier gevallen de cache, en dan is het in een kwartier opgelost. Gaat het na het oplossen van de winkelwagen ook mis op de afrekenpagina, lees dan verder in het artikel over een afrekenpagina die blijft laden; de oorzaken overlappen.

Een boekwinkel uit Leiden merkte dit probleem pas na drie weken, toen een vaste klant belde. De host had bij een serververhuizing servercaching ingeschakeld zonder uitzonderingen voor WooCommerce. De omzet was in die weken ruwweg gehalveerd, terwijl er geen enkele foutmelding was. Sindsdien loopt er bij hen een wekelijkse testbestelling, wat een van de vaste controles is binnen specialistisch WooCommerce-onderhoud.

Volgende stap: open nu een privévenster, voeg een product toe en kijk of het blijft staan. Dat is de hele test.