Het updaten van je WooCommerce winkel moet zorgvuldig gedaan worden. Doe je dit niet, dan zijn de mogelijke gevolgen voor je site niet mals: klanten die je site niet meer kunnen bereiken, orders die niet meer geplaatst kunnen worden of andere glitches waardoor je klanten bij de concurrentie zullen aankloppen. En dat is natuurlijk het laatste wat we willen!

Kortweg zijn er vier manieren hoe de typische winkeleigenaar met updates van WooCommerce omgaat:

  • De cowboy: Deze winkeleigenaren klikken op “Updaten” zonder daar verder over na te denken. Soms gaat dit goed, maar als het fout gaat dan valt hun winkel wel meteen als een kaartenhuis in elkaar.
  • De bankhanger: Zij negeren alle updates en doen alsof ze niet bestaan.
  • De bangerik: Deze winkeleigenaren hebben zoveel verouderde plugins en thema’s, omdat ze als de dood zijn wat er zal gebeuren als ze een update proberen te doen.
  • De held: Als laatste zijn er winkeleigenaren die regelmatig hun sites van updates voorzien, binnen een testomgeving nieuwe releases van WooCommerce testen om vervolgens, als er geen problemen zijn opgetreden, hun live site te updaten.

Het liefste willen we natuurlijk alleen maar helden zien! Misschien ben je er nu nog niet een, maar gelukkig is het niet moeilijk er een te worden! Met de juiste tools, een goede checklist en de nodige automatisering kun je je WooCommerce site moeiteloos up-to-date houden en altijd soepel laten lopen.

In dit artikel zorgen we dat je wegwijs raakt in het proces van het updaten van WooCommerce – van begin tot eind. We gaan je vertellen over de tools die je ervoor kan gebruiken, hoe je veilig zelf WooCommerce bijwerkt en geven we je een grondige test- en updatechecklist.

En vergeet niet dat je uiteindelijke doel is de inkomsten van je winkel te verhogen. Download dus zeker ons gratis e-book met 10 manieren om de conversie van je WooCommerce productpagina te verhogen.

Klaar voor de start? Goed, daar gaan we dan!

Investeer nu tijd om jezelf later veel tijd (en stress) te besparen

Voordat we in de materie duiken, is het goed om bij het begin te beginnen. Best practices leren ons dat je nooit je site moet updaten zonder dat je nieuwe releases eerst grondig hebt getest. Dit geldt helemaal in het geval van WooCommerce en voor alle releases, van grote updates tot kleine patchreleases.

Wees dus bereid om er nu wat tijd in te steken zodat je later veel tijd (en hoofdpijn) bespaart.

Bij het updaten is hoef je niet meteen op de update-knop te drukken. Geef jezelf tijd en zorg ervoor dat je begrijpt welke veranderingen er met de update gepaard gaan en, belangrijker nog, welke impact ze op je site zullen hebben. Door te lezen welke nieuwe features er vrijkomen in de nieuwe versie van WooCommerce, krijg je een beter idee over waar je je op moet voorbereiden.

Om dingen in perspectief te plaatsen en te begrijpen hoe snel een site kapot kan gaan, is het een goed idee om een WooCommerce update te zien vanuit het perspectief van een thema- of pluginontwikkelaar: de WooCommerce Core en de WordPress Core moeten namelijk achterwaarts compatibel te zijn. Na het updaten wil je uiteraard dat alle plugins en thema’s nog werken. En bedenk je nu hoeveel plugins jouw site, of die van je klant gebruikt. Hoe waarschijnlijk is het dat er met een WooCommerce update bepaalde functionaliteiten niet meer werken? Ja, waarschijnlijk weet je het antwoord al: zeer waarschijnlijk.

Daarom het is altijd goed om na een mededeling van een WooCommerce update en voor het doen van een WooCommerce update de changelogs en de WordPress.org support fora eens goed na te lezen.

Het is verder ook heel normaal om niet direct na het uitbrengen van een WooCommerce update je site te updaten, maar eerst op de makers van plugins/thema’s te wachten totdat zij een update hebben uitgebracht van hun eigen WooCommerce gerelateerde producten. Het loont om geduldig te zijn en de tijd te nemen om te kijken of alles compatibel blijft.

Aan de slag met je WooCommerce update

Er zijn vier belangrijke stadia in het updateproces van WooCommerce, elk met een eigen stappenplan. Het lijkt misschien wat veel, maar we beloven dat het elke keer dat je het doorloopt, weer een stukje makkelijker wordt en sneller gaat. Laten we samen deze vier stappen voor het updaten van WooCommerce doorlopen.

WooCommerce updaten: De juiste tools gebruiken

Laten we eerlijk zijn: het handmatig testen van WooCommerce is lastig en kost veel tijd. Het is dan ook de reden dat zoveel mensen het helemaal niet doen of het niet fatsoenlijk doen en dus fouten op hun sites over het hoofd zien.

Gelukkig zijn er tools waarmee je sneller kan testen en het minder saai wordt. Na jaren ervaring en heel veel WooCommerce updates getest te hebben, zijn dit de tools die wij aanbevelen. Laten we ze een voor een eens bekijken.

Testsite

Daar valt niet over te onderhandelen. Je mag je live site nooit direct na een nieuwe release van WooCommerce bijwerken.

Testsites bieden een veilige testomgeving waar je vrij bent om dingen kapot te maken (meestal zonder gevolgen). Hier kun je WooCommerce updates uitvoeren, nieuwe versies testen en zien hoe je site zou kunnen reageren voordat je je live site bijwerkt.

Als je geen testlocatie heeft, kan Kinsta je helpen — we bieden een gratis testomgeving voor elke site, evenals maximaal vijf premium testomgevingen als één niet genoeg is.

Tools voor visuele vergelijkingen

Hoe weet je of je site veranderd is na een WooCommerce update? Als je een grote site draait met tientallen pagina’s, dat kan het veel tijd kosten om kleine aanpassingen in de opmaak of widgets die het niet meer doen op te sporen.

Met tools voor visuele vergelijkingen zoals WP Boom, die we in deze demonstratie zullen gebruiken, kun je een snapshot van je site maken, op “update” drukken en dan een tweede snapshot maken om snel te zien wat er veranderd is

wp boom
WP Boom

Een visuele verandering hoeft trouwens niet meteen te betekenen dat bepaalde functionaliteit op je site mist, maar wel dat er iets aan de hand kan zijn.

End-to-end testtools

Waar tools voor visuele vergelijkingen je kunnen helpen om snel veranderingen in de opmaak of design van je site te spotten, gaan end-to-end testtools een stap verder. Ze testen de daadwerkelijke functionaliteit van je site en geven meer zekerheid wanneer iets wel of niet werkt.

Rondklikken op je site om dingen te testen, door bijvoorbeeld iets in je winkelwagen te plaatsen en een bestelling af te ronden, kost tijd. Deze taken gaan snel vervelen als je al 100 keer WooCommerce updates hebt getest.

Met end-to-end testtools kun je dit proces automatisch laten verlopen, waardoor het grotendeels voor je uit handen wordt genomen.

Nu dat Robot Ninja ermee ophoudt zullen we je twee andere tools laten zien.

De eerste is Ghost Inspector:

ghost inspector
Ghost Inspector

De tweede end-to-end testtool is Usetrace:

usetrace website
Usetrace

Dit een andere geautomatiseerde end-to-end testtool voor WooCommerce die je op zowel je test- als live site kunt gebruiken. Verderop in dit artikel laten we je zien hoe je ze in kunt stellen. WooCommerce heeft ook een paar E2E tests die je kunt gebruiken als je een ontwikkelaar bent.

Back-uptools

Eigenlijk moet je regelmatig back-ups van je site moeten maken. Als je geïnteresseerd bent in back-ups van databases, dan bevelen we je WP Migrate DB Pro aan, of WP-CLI voor snelle exports.

Als je klant bent van Kinsta, dan profiteer je van onze automatisch dagelijkse back-ups, handmatige back-uppunten en lange back-upbewaartermijnen bij al onze pakketten:

MyKinsta backups
MyKinsta back-ups

Nu je de juiste tools hebt, is het tijd voor de voorbereidingen.

WooCommerce updaten: Voorbereiding (7-stappen checklist)

Als je wilt dat je WooCommerce update soepel verloopt, dan is het doen van de nodige voorbereidingen een must. Het is een beetje werk, maar als je het eenmaal een keer hebt gedaan, dan gaat het de volgende keer ongetwijfeld een stuk sneller en eenvoudiger. Dit zijn de 7 voorbereidende stappen die we aanbevelen.

Stap 1: Maak jezelf (opnieuw) wegwijs met de site die je gaat updaten

Als je niet goed weet hoe je site normaal zou moeten functioneren (bijvoorbeeld als het een site is van een nieuwe klant), maak dan aantekeningen. Dit geeft je veel meer rust wanneer je niet meer weet hoe de site eigenlijk zou moeten functioneren (en dit gebeurt vaker dan je zou denken).

Ik raad je ook aan een lijst van de belangrijke URL’s en de functionaliteit van je site (en klanten) te maken. Hier horen belangrijke pagina’s op je site bij te zitten, zoals je thuispagina, categorie en product, ‘mijn account’, winkelwagen , en checkout pagina’s.

Stap 2: Zorg dat je actuele back-ups van je huidige site hebt

Als je back-ups niet actueel zijn, dan is het hoog tijd om een nieuwe back-up te maken. Maak jezelf indien nodig opnieuw wegwijs met je back-uptool. Het belangrijkste is om te checken of de back-up goed werkt en ervoor te zorgen dat je weet hoe je een eerdere snapshot van je site terug kan herstellen.

Stap 3: WP Boom instellen

Het duurt maar een minuutje om deze tool in te stellen. Als je geheugen je in de steek laat en je geen goede notities hebt gemaakt (het kan iedereen overkomen), dan kan WP Boom je met de schermafbeeldingen van je site verder helpen. Zie ze als een soort van ‘before’ foto’s bij advertenties over gewichtsverlies.

Je wil beginnen met het maken van de eerste snapshot van je site, zodat je visueel een soort basisverslag hebt van je testsite van vóór de update.

Over het algemeen is het niet mogelijk om schermafbeeldingen te maken van de checkout (je hebt daarvoor producten nodig in je winkelwagen) en beveiligde pagina’s, maar daarbij helpen de volgende tools.

Opmerking: We laten je verderop in deze post zien hoe je WP Boom kan instellen en gebruiken.

Stap 4: Je geautomatiseerde testingtool instellen

Als je WooCommerce handmatig wil testen, dan is dit het punt waar je een lijst van testscenario’s wil maken, zoals: je site openen, een product toevoegen aan je site, een product toevoegen aan je winkelwagen, naar de checkout gaan, betalingsgegevens invoeren, etc.

Gelukkig kunnen zowel Ghost Inspector als Usetrace dit allemaal automatisch voor je doen. We leggen je zo uit hoe je deze tools in kunt stellen.

Stap 5: Identificeer alle overige delen van je site die je wilt testen

De volgende stap is om alle overige delen van je site te identificeren die je wilt testen, waarbij je je baseert op de lijst van belangrijkste URL’s en functionaliteiten die je eerder gemaakt hebt. Dit kunnen functionaliteiten zijn als contactformulieren en pop-ups, of elementen als slideshows en galerijen.

Je kunt deze dingen handmatig testen. Als je technischer ingesteld bent, dan kun je ook deze stap proberen te automatiseren.

Stap 6: Check wat er nieuw is in de WooCommerce versie waarnaar je updatet

Het is ook een goed idee om te zien welke nieuwe updates en features er beschikbaar zijn in de versie WooCommerce waar je naar updatet. Kijk in het bijzonder of je plugins en thema er compatibel mee zijn.

Zoals we eerder zouden, het is echt de moeite waard om nu wat tijd hierin te steken om jezelf later veel tijd en stress te besparen. We adviseren je de volgende dingen na te kijken: de berichtgeving over de release op WooCommerce.com, changelogs, GitHub problemen en de supportfora van WordPress.

Stap 7: Kloon je live site op je testomgeving

Als je plugins gebruikt die een testfeature hebben, zoals WooCommerce Subscriptions, zet deze dan in of schakel ze gewoon uit. Je wil ook e-mails uitschakelen.

Check nu nog een keer dat je testomgeving je live site zo goed mogelijk nabootst. We stellen ook voor om op dit punt de WordPress debugging modus in te schakelen om te helpen met de nodige troubleshooting.

Let op: Tijdens het plaatsen van je site in de testomgeving, wil je geen bestellingen mislopen. Om dit te voorkomen raden we je aan om je WooCommerce winkel kort in de onderhoudsmodus te zetten. Dit zorgt ervoor dat er geen bestellingen geplaatst kunnen worden terwijl je met je site bezig bent.

WooCommerce updaten: Updaten en testen op je testsite (7-stappen checklist)

Nu je alles voorbereid hebt en klaar bent voor de volgende stap komt het leuke deel: het updaten van je testsite. Het mooie aan testsites is dat het niet uitmaakt of je site kapot gaat, omdat het slechts een kopie is. Laten we eens kijken welke stappen bij dit proces horen.

Stap 1: Neem een snapshot van je site met WP Boom

Het eerste dat je moet doen is een snapshot maken van je site met WP Boom. Dit geeft je een visueel basisbestand van je testsite voor de update.

Stap 2: Draai je testtool en zorg ervoor dat je tests slagen

Zoals we eerder al hebben gezegd, je kunt een end-to-end testtool als Ghost Inspector of Usetrace gebruiken om je tests te automatiseren. Verderop in dit artikel laten we je zien hoe deze tools te gebruiken en te checken of je tests slagen.

Stap 3: Update je plugins en thema

In de voorbereidende fase gaven we ook al aan dat het belangrijk is te checken dat je plugins en thema compatibel zijn met de nieuwste versie van WooCommerce waarna je updatet. Als je opmerkt dat je plugins of thema verouderd zijn en niet meer compatibel zijn met de nieuwste versie van WooCommerce, dat is het tijd ze te updaten naar een versie die wel compatibel is.

Stap 4: Update WooCommerce op je testsite

Nadat je je plugins en thema’s hebt bijgewerkt en er geen compatibiliteitsproblemen meer zijn, ben je klaar om je testsite naar de nieuwste versie van WooCommerce te updaten. Je testsite updaten stelt je in staat om enige problemen te identificeren en op te lossen voordat je de WooCommerce update op je live site uitvoert.

Stap 5: Check de logs voor foutmeldingen

Nadat je je plugins en thema’s en WooCommerce geüpdatet hebt is het verstandig om je logs te checken op foutmeldingen als gevolg van de updates. Doe een snel scan om te zorgen dat je nog steeds je homepagina en adminsectie kunt bezoeken.

Als je een ‘white screen of death’ krijgt je of vastzit in een niet-herstelbare situatie, is het nu het moment om terug te gaan naar de vorige snapshot van je site. Je kunt hierbij zelf het probleem proberen op te lossen of hulp zoeken.

Stap 6: Maak een tweede snapshot om veranderingen te vergelijken

Als het allemaal goed gaat, draai dan nogmaals WP Boom om een tweede snapshot te maken. Vergelijk de snapshots van voor en na de update om te zien wat er is veranderd.

Het mooie van WP Boom is dat je het laat zien hoeveel je site veranderd is sinds de laatste update.

Tussen beide snapshots kan je site visueel 7% zijn veranderd. Dit betekent natuurlijk niet meteen dat je site niet meer werkt, maar het kan wel betekenen dat je sommige stijlen aan moeten passen.

Stap 7: Draai Ghost Inspector of Usetrace nogmaals om ervoor te zorgen dat alles naar behoren loopt.

Doe nu nog een test met Ghost Inspector of Usetrace (of welke end-to-end testtool je ook gebruikt) om ervoor te zorgen dat je checkoutprocedure naar behoren functioneert. Je kunt ook handmatige of geautomatiseerde checks uitvoeren op bepaalde features van je site, zoals het contactformulier.

Als iets niet werkt zoals verwacht, dan is dit het moment om er wat aan te doen.

Als je zelfgeschreven code je op site hebt lopen (dus code die niet beheerd wordt door een derde plugin/extensie-ontwikkelaar), dan zul je het probleem zelf moeten oplossen en ervoor moeten zorgen dat deze fixes toegepast zijn op je live site voordat of nadat je de update draait (dat hangt van het probleem af).

Versiebeheerzoals het uploaden van je site naar Git, helpt je de veranderingen beter te beheren. Je kan problemen tegenkomen met plugins en thema’s. Hoe en waar je deze kan rapporteren, hangt af van welke plugins en thema’s je gebruikt en het soort ondersteuning dat je hierbij hebt aangeschaft. Mocht er iets aan de hand zijn, dan zal je waarschijnlijk moeten wachten op een nieuwe release van je plugins/thema om daarna het proces nog een keer te doorlopen. Eventueel kan je zelf proberen om het probleem op te lossen en de code te veranderen.

Het goede nieuws is dat je live site nog gewoon werkt en je klanten nog steeds aankopen kunnen doen. Verder kun je zoveel tijd nemen als je wilt om het proces te herhalen totdat alles naar behoren werkt.

WooCommerce updaten: Updaten en testen op je live site (7-stappen checklist)

Nu je testsite is bijgewerkt en naar behoren functioneert – alle functies werken (weer) en de fouten zijn opgelost – kun je verder gaan met het updaten van je live site.

Laten we eens kijken welke stappen er zijn voor het updaten van je live WooCommerce site. Veel van die stappen zijn hetzelfde als die je tijdens de testfase gedaan hebt.

Stap 1: Maak een back-up van je live site

De eerste stap is een back-up maken van je live site. Het is belangrijk dat je deze stap niet overslaat. Als je een Kinsta gebruiker bent, dan heb je verschillende back-upmogelijkheden tot je beschikking. Je kunt ook een back-upplugin gebruiken.

Stap 2: Neem nog een snapshot van je site

Vervolgens zul je met WP Boom nog een snapshot van je site moeten maken. Dit geeft je een visueel basisbestand van je live site van vóór de update.

Stap 3: Draai Ghost Inspector of Usetrace om ervoor te zorgen dat je tests geslaagd zijn

Ook hier kun je, afhankelijk van of je een Chrome extensie of online tool wilt gebruiken om je tests op te slaan, zowel Ghost Inspector of Usetrace gebruiken. Deze geeft je nog een baseline van je site van voordat je de update hebt uitgevoerd.

Step 4: Synchroniseer en push je veranderingen naar live

De volgende stap is om de veranderingen tussen de test- en live site te synchroniseren. Hoe je dit doet, hangt af van hoe je test- en live omgevingen werken. Het is mogelijk dat je zelf de plugins en code opnieuw moet bijwerken.

Als je klant bent van Kinsta, dan kun je met één klik al je wijzigingen naar live pushen:

De MyKinsta push van test naar live
De MyKinsta push van test naar live

Vergeet niet je WooCommerce winkel eerst uit de onderhoudsmodus te halen.

Stap 5: Check je logs voor foutmeldingen

Zodra je de update gesynchroniseerd hebt, check je je errorlogboek nogmaals om te kijken of er niet onverhoopt toch problemen zijn voorgevallen. Verifieer dat je nog steeds je homepagina en adminsectie kunt betreden.

Net zoals bij de testsite kun je in het geval van een ‘white screen of death’ of een andere niet-herstelbare foutmelding het beste terugkeren naar de vorige back-up van je site en proberen het probleem op te lossen of om hulp vragen.

Stap 6: Maak opnieuw een snapshot met WP Boom

Draai WP Boom nogmaals om een tweede set aan snapshots te hebben. Vergelijk de snapshots van voor en na de update om te zien wat er veranderd is.

Stap 7: Draai Ghost Inspector of Usetrace nogmaals om ervoor te zorgen dat alles naar behoren werkt

Doe nogmaals een test met je geautomatiseerde tool om ervoor te zorgen dat alles naar behoren functioneert. Je kunt op dit moment ook handmatige of geautomatiseerde checks doen op alle functionaliteiten van je site, zoals het contactformulier.

Als je alle problemen, zoals conflicten tussen je eigen code met die van plugins, van het updaten van je testsite hebt verholpen, dan zouden er in deze fase niet echt problemen meer moeten optreden.

Stap 8: Doe een laatste visuele check

Je bent nu bijna klaar. Het enige wat je nog moet doen is je lijst met belangrijkste URL’s nakijken en zorgen dat de functionaliteiten hier goed werken.

Als het er allemaal goed uitzien, dan ben je klaar! Je bijgewerkte WooCommerce is nu live.

Aan de slag met WP Boom

WP Boom is een visuele test- en vergelijkingstool die speciaal is gebouwd voor WordPress. Zodra je de tool hebt ingesteld, kun je schermafbeeldingen vergelijken van voor en na het updaten van je site en meldingen ontvangen als automatische updates visuele veranderingen op je sites veroorzaken:

wp boom 1
WP Boom

Meld je aan voor een gratis account om met WP Boom aan de slag te gaan. Na het invullen van je e-mailadres en wachtwoord zal een scherm verschijnen dat je zal helpen om met een nieuwe site te verbinden:

Het aanmeldingsformulier voor WP Boom
Het aanmeldingsformulier voor WP Boom

Zodra je je gegevens hebt ingevoerd en op Create Site hebt geklikt, zal WP Boom beginnen met het maken van de eerste snapshot van je site. Dat zal ongeveer 2 minuten, maar hangt wel af van hoeveel pagina’s je site heeft.

Een WP Boom snapshot
Een WP Boom snapshot

Als dit proces is afgerond, ververs dan de pagina. Als je op de naam van je site klikt, zul je een overzicht van je snapshot zien, inclusief de datum waarop deze is genomen is en hoeveel pagina’s er op je site stonden:

Een meest recente snapshot van WP Boom
Een meest recente snapshot van WP Boom

Als je zover bent om een tweede snapshot te maken, ga dan terug naar het WP Boom dashboard. Selecteer de site waarvan je een snapshot wilt maken en klik op Snapshot Selected Sites.

Een paar handige functies van WP Boom zijn de mogelijkheid om wekelijkse snapshots en e-mailoverzichten in te plannen, waarmee je alle visuele veranderingen op je site bij kunt houden. Dit is vooral zinvol als je veel sites beheert en automatische updates hebt lopen.

Geautomatiseerde testtools: Ghost Inspector en Usetrace

Het is belangrijk om de functionaliteit op je hele WooCommerce site en niet alleen de checkout te testen, wanneer je ervoor wil zorgen dat alles op je site naar behoren werkt na het doen van updates.

Als je ze niet hebt getest, hoe weet je anders of een door een klant ingevuld contactformulier of een livechat werkt?

Het is eenvoudig om handmatige tests te doen: klik binnen verschillende delen van je site, vul formulieren in en gebruik je livechat.

Om je verder te helpen dit proces te automatiseren, kun je allereerst een lijst van belangrijkste functionaliteiten samenstellen, samen met de instructies om de tests handmatig uit te voeren (bijvoorbeeld: “open site, navigeer naar contactpagina, vul formulier in, etc.”). Dit zorgt ervoor dat je niets overslaat als je een handmatige test aan het doen bent.

Als je het proces liever automatiseert, meer zicht wilt hebben op je geautomatiseerde tests of een meer gepersonaliseerde site of functionaliteit wilt hebben, dan adviseren we je Ghost Inspector en/of UseTrace eens te bekijken.

Beide zijn er geschikt voor mensen die niet overweg kunnen met PHP en niet in scripts en code willen duiken. Wat betreft het controleren van de checkoutfuncties op je site, bieden ze soortgelijke functies.

Voor welke optie je gaat, hangt uiteindelijk ervan af of je liever een Chrome extensie of een online tool wilt gebruiken om je tests uit te voeren. Als je een ontwikkelaar bent en je het niet erg vindt om met code aan de slag te gaan, dan is Codeception een uitstekende keuze.

Aan de slag met Ghost Inspector

Ghost Inspector is een tool die je kunt gebruiken om het testen van je WooCommerce site te automatiseren en waarmee je kan zorgen dat deze goed blijft functioneren. Het beste van alles is dat je geen programmeerervaring nodig hebt en ook geen ervaring hoeft te hebben in het gebruiken van dergelijke testtools.

Ghost Inspector werkt door een Chrome of Firefox extensie toe te voegen aan je browser. Vervolgens registreert de extensie je site en voert de tests automatisch uit.

Om te beginnen, ga naar de Ghost Inspector website en op klik  Start Your Free Trial. Voer je gegevens in en selecteer dan Create Account:

De aanmeldingspagina van Ghost Inspector
De aanmeldingspagina van Ghost Inspector

Dit zal je sturen naar een welkomstpagina. Klik onderaan de pagina op de Install Test Recorder knop:

Installeer de Ghost Inspector test recorder
Installeer de Ghost Inspector test recorder

Dit opent de Chrome Web Store in een nieuw tabblad. Selecteer Add to Chrome:

De Ghost Inspector Chrome extensie toevoegen
De Ghost Inspector Chrome extensie toevoegen

De Ghost Inspector extensie zal automatisch aan je browser worden toegevoegd en zal rechtsboven in je browser te zien zijn. De eerste keer dat je erop klikt, zul je je inloggegevens in moeten vullen:

Inloggen op de Ghost Inspector Chrome extensie
Inloggen op de Ghost Inspector Chrome extensie

Ververs je browser. Als je klaar bent om een test te draaien, ga dan naar je WooCommerce site (zorg ervoor dat je hier uitgelogd bent) en klik op de browserextensie.

In het vervolgkeuzemenu, selecteer de “Create a new test” en klik op de Start Recording knop:

De Ghost Inspector ‘start recording' knop
De Ghost Inspector ‘start recording’ knop

Terwijl je je site afgaat en deze test, zal Ghost Inspector al je acties opnemen. Zodra je klaar bent, klik dan nogmaals op de extensie en dan op I’m Finished Recording:

 De Ghost Inspector ‘finished recording’ knop
De Ghost Inspector ‘finished recording’ knop

Geef je test een naam en sla deze op. Als je View My Test selecteert, dan zal je naar het Ghost Inspector dashboard worden gestuurd:

Het Ghost Inspector dashboard
Het Ghost Inspector dashboard

Hier kun je alle testinformatie bekijken. Daar vind je een lijst van de door jou ondernomen stappen en de mogelijkheid om ze te bewerken. Ook staat er of de tests geslaagd zijn en welke stappen je moet nakijken als ze niet zijn geslaagd. Bekijk de Ghost Inspector documentatie voor meer informatie.

Aan de slag met Usetrace

Als je een geautomatiseerde testtool wilt gebruiken die niet bij een specifieke browser hoort, dan is Usetrace een goed alternatief. Met deze tool maak je zogenaamde ’traces’ aan tijdens het opnemen van je workflow; dit gebeurt door middel van de online editor van Usetrace. Die kun je dan gebruiken om je site automatisch te testen.

Bezoek om te beginnen de Usetrace website en klik op Sign Up and Start Testing Now. Nadat je een account hebt aangemaakt, word naar het Usetrace dashboard gestuurd. Selecteer Start by creating a new trace:

Het Usetrace dashboard
Het Usetrace dashboard

In het scherm links staat de lijst met je ’trace’ stappen en instellingen. Rechts op het scherm is de site te zien die je aan het testen bent. Klik op Record Steps om te beginnen:

Neem de 'trace' stappen op
Neem de ’trace’ stappen op

Het programma zal dan je interacties op je site opnemen. Bij elke actie, zoals het toevoegen van een product aan je winkelwagen of het invullen van een contactformulier, wordt er links een controlepunt toegevoegd aan de lijst van ’trace’ stappen.

Als je klaar bent, klik dan op de Save Steps knop:

Een Usetrace test
Een Usetrace test

Om het hele stappenplan af te lopen om te zien of alles goed werkt, selecteer je Run Trace links in de hoek:

De Run Trace knop in Usetrace
De Run Trace knop in Usetrace

Als de test klaar is zul je een bericht zien dat deze succesvol afgerond is:

Een Usetrace succesbericht
Een Usetrace succesbericht

Klik op de knop Details om meer over elke stap te weten te komen of selecteer OK als je klaar bent. Kijk voor meer informatie of hulp naar de Usetrace documentatie.

Samenvatting

Met de juiste tools, een goede voorbereiding en een gedegen checklist zul je geen problemen moeten hebben met het testen en implementeren van WooCommerce updates. Om de stress rond het updaten van WooCommerce weg te halen, is het belangrijk het proces op te breken, zoals wij hier hebben gedaan. Wij hopen dat deze handleiding je een goede basis heeft gegeven om je WooCommerce site up-to-date te houden.

We willen ten slotte nog vermelden dat het belangrijk is om ook de transactionele e-mails van je winkel te testen, wat weer een heel ander proces is.

Nu is het jouw beurt: Gebruik jij visualisatie- of screenshottools tijdens het updaten van WooCommerce en WordPress? Wat voor tools en workflows gebruik jij tijdens updates? Deel je ervaringen in het opmerkingenveld hieronder!

Matteo Duò Kinsta

Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.