WooCommerce Webshop: Alles wat je moet weten over een WooCommerce WordPress webshop in 7 stappen!

Wij krijgen regelmatig de vraag “wat kost een WordPress webshop”? Deze vraag is niet direct te beantwoorden omdat dit per webshop verschillend is. Elke WooCommerce webshop heeft haar eigen benodigde functionaliteiten, eisen en custom attributen. Desalniettemin gaan we in dit artikel het proces naar een snelle en converterende WooCommerce webshop toelichten. Daarnaast geven we je een uniek inzicht in de investering die daarbij komt kijken.

De beschrijving die we in dit artikel geven is gericht om je meer inzicht te geven in de nodige werkzaamheden die leiden tot een webshop die resultaat behaalt. Daarom lichten we het proces toe dat wij gezamenlijk met onze klanten doorlopen om een converterende WooCommerce webshop te bouwen. Uiteraard is iedere webshop maatwerk en kan de tijd/investering anders zijn per project, maar onze beschrijving is een goede richtlijn met een realistisch kostenplaatje.

Stap 1: Kennismaking om een WordPress webshop te laten maken

Twee van de belangrijkste aspecten aan een goede samenwerking met een developer zijn de “klik” en de manier van werken. Je gaat met iemand in zee omdat je een langdurige samenwerking tegemoet gaat. Laat staan dat je ook nog een redelijke investering in zowel tijd als geld moet doen. Er moet dus een gevoel van vertrouwen en wederzijdse motivatie zijn. Wanneer de klik goed voelt en de manier van werken aansluit op de verwachting, dan zal de samenwerking succesvol zijn. Wanneer je dit gevoel niet hebt met de mogelijke samenwerkende partij, dan moet je hier eerlijk over zijn. Dit principe geldt voor beide kanten van de samenwerking. Zowel de developer als de klant moeten aanvoelen dat ze gezamenlijk de wedstrijd ingaan, met de neuzen dezelfde kant op. Het belangrijkste in een samenwerking is het plezier in het werk, wat uiteindelijk zorgt voor het beste resultaat.

Hoe zit dit er in de praktijk uit bij ons?

Bij Klik & Steen gaat het als volgt. Bij de eerste kennismaking doen wij er alles aan om onze potentiële klant, maar vooral ook de klant van onze klant te leren kennen. We stellen diepgaande vragen om te achterhalen wat de doelstellingen, manier van werken en de “persoonlijkheid” van de onderneming is. Op deze manier kunnen wij alvast een duidelijk beeld schetsen van de mogelijke WooCommerce opzet, strategie en vervolgstappen. Aan het einde van dit gesprek weten we beiden of we een goede match voor elkaar zijn. Zo zei onze klant het Nederlands Debat Instituut het volgende over ons:

“In mijn samenwerking met Klik & Steen heb ik gemerkt dat ze er erg goed in zijn om op een kundige manier aan het begin van het traject veel tijd te investeren, om je goed te leren kennen. Met name heel goed te doorgronden wat de vraag is die je hebt en vervolgens daar een traject op ontwikkelen om ervoor te zorgen dat die vraag beantwoord wordt.”

Op dit soort quotes zijn wij natuurlijk erg trots. Dit soort matches komen al snel naar voren in deze eerste stap van je WooCommerce webshop. Wanneer je hier dus een soortgelijk gevoel hebt bij een partij, dan weet je dat je goed zit!

Stap 2: De inventarisatie van het WooCommerce project

Wanneer we een match zijn, dan inventariseren we alle details van je specifieke vraag. We brengen je korte- en lange termijn doelen in kaart. Daarnaast kijken we naar je doelgroep, jouw verwachting van het traject en de type gebruikers die van jouw WooCommerce webshop gebruik moeten gaan maken. Wanneer je nog niet zeker bent over bepaalde onderdelen binnen deze stap van het traject, dan kun je gebruik maken van onze jarenlange ervaring binnen E-commerce en online marketing. Hier passen we namelijk de relevante modellen en vergelijkbare trajecten toe, om jouw doelstellingen te verduidelijken.

Een goede en duidelijke inventarisatie is cruciaal voor het fundament van je webshop en daarmee het resultaat. Wanneer de doelstellingen, wensen en eisen duidelijk zijn, stellen wij een projectofferte op. De offerte is een directe vertaling van de inventarisatie, planning en investering van het project. Tot slot wordt er in de offerte ook duidelijk beschreven wat wij wel en ‘niet’ doen. Zo kom je nooit voor verrassingen te staan en weet je precies waar je aan toe bent.

Stap 3: Kick-off van het project

Wanneer de offerte akkoord is voor beide partijen, dan gaan we aan de slag! De eerste stap binnen de kick-off is de conceptsessie. Onze conceptsessies vormen de basis voor een samenwerking van gelijkwaardige begrippen en verwachtingen. We nodigen de klant uit bij ons op kantoor, waar we op de whiteboard muur gezamenlijk de belangrijkste pagina’s gaan wireframen.

Hierdoor koppelen we de kennis van onze klant binnen zijn/haar vakgebied, met onze expertise binnen marketing en development. De combinatie van kennis en kunde van onze klanten met die van ons, zorgt voor een ijzersterke samenwerking. Het is per definitie “co-creatie”, hierdoor weten beide partijen precies wat de inhoud en verwachte uitwerking van de webshop zal zijn.

Wireframing als basis van je WooCommerce webshop

Het wireframen doen we met behulp van de MBTI-methode, zodat je WooCommerce webshop pagina’s worden ingericht voor elk type bezoeker. De MBTI methode onderscheid 4 soorten bezoekers:

• Competitief
• Spontaan
• Methodisch
• Humanistisch

Iedere soort bezoeker gedraagt zich anders op een webshop. Een competitieve bezoekers beslist snel en rationeel, gebaseerd op feiten en de waarde voor hem of haar. Een spontane bezoeker maakt een snelle beslissing op basis van emotie. Een methodische bezoeker is geïnteresseerd in feiten maar wel van het gehele proces, zo gedetailleerd mogelijk. De humanistische bezoeker neemt zijn tijd en wil graag veel details. Echter zijn de beslissingen wel meer gebaseerd op emotie. Elke van de 4 types zullen je WordPress webshop bezoeken en elk type wil op een andere manier gebruik maken van je webshop.

Elk type is natuurlijk ook een potentiële klant. Dus hoe kun je met al deze 4 verschillende bezoekers rekening houden? Zo zijn bijvoorbeeld USP lijstjes en een zoekveld, geschikt voor de competitieve bezoeker. Een humanistische bezoeker ziet graag mensen terug op de website en kijkt meer naar reviews of interacties. Kortom, er zijn eindeloze voorbeelden van hoe je elke bezoeker tevreden kunt houden. Om deze tevredenheid te verzekeren bij jouw specifieke doelgroep, ontwikkelen we hiervoor wireframes. Hiermee tekenen we zodanig de conversiepaden van jouw bezoekers uit, zodat ze rekening houden met elke soort bezoeker. Voor ieder wat wils, voor een optimale gebruikservaring, met een gewenste sturing van conversie in het achterhoofd.

Wat doen we met data, knoppen en kleuren?

Wanneer de verschillende pagina’s zijn ingedeeld en getekend zijn, wordt er ook nog gekeken naar relevante data uit het verleden. Met name de specifieke data die toegepast kan worden om toekomstige resultaten optimaal te genereren. Waar wil je dat een bezoeker op klikt? En wat wil je dat een bezoeker op je webshop doet? Welke conversietypen hebben jouw prioriteit?

Al deze verschillende pagina’s en buttons tekenen we uit in de wireframes. De conversiepaden worden opgebouwd om elke soort bezoeker niet alleen te begeleiden, maar ook daadwerkelijk actie te laten ondernemen. De reden waarom je niet direct aan de slag gaat met kleuren of afbeeldingen, is omdat we aan het begin moeten focussen op het belangrijkste onderdeel. Namelijk: de conversie! Een mooi sausje (het visuele design) komt in de volgende stap.

Stap 4: Design of niet?

Het design van je WooCommerce WordPress webshop is van belang bij het overtuigingsproces van je bezoekers en moet goed aansluiten bij de algehele look & Feel van je bedrijf. Je wilt niet alleen een converterend design hebben, het moet ook dezelfde “taal” spreken als jouw organisatie. Wanneer je kiest voor een kleine tot middelgrote WooCommerce webshop dan adviseren wij (afhankelijk van het beschikbare budget) om de wireframes niet volledig “pixel perfect” om te zetten naar een design. Echter kun je dan beter direct over gaan tot het bouwen van de webshop vanaf de getekende wireframes.

Dit bespaart tijd en geld, wat uitgegeven kan worden aan het optimaliseren van de resultaten van de webshop. Heb je budget vrijgesteld en wil je vooraf op de pixel, nauwkeurig de wireframes en designs uitgewerkt hebben aan de hand van wat precies past binnen je huisstijl? Dan kan dat uiteraard ook.

Stap 5: Development

Wanneer de wireframes uitgewerkt zijn (op het bord of digitaal), dan gaan we over tot het bouwen van de webshop. Dit doen we altijd op een testomgeving en het liefst op dezelfde server als de toekomstige live-locatie van de webshop. Dit doen wij om de webshop tijdens het bouwen al te optimaliseren en om te voorkomen dat verschillende server-instellingen bij livegang kunnen zorgen voor problemen. Het development proces bestaat uit verschillende stappen. Zo installeren we dus eerst WordPress en WooCommerce.

Op basis van de wireframes gaan we de pagina’s opbouwen en stijlen. Hiervoor gebruiken we in veel gevallen een “pagebuilder” waardoor de klant (jij) de pagina’s na oplevering makkelijk zelf kan beheren en aanpassen. Naast het opzetten van de pagina’s bouwen/installeren we de benodigde plug-ins die noodzakelijk zijn om de bezoeker tot zijn doel te leiden. Daarnaast zorgen deze functionaliteiten er ook voor dat de beheerder van de webshop kan uitvoeren wat er is afgesproken in het voortraject.

Data, doorontwikkeling en relevante werkzaamheden voor een WooCommerce webshop

Uiteraard houden wij tijdens het ontwikkelen rekening met schone code, verschillende browsers, verschillende apparaten en de integraties met eventuele externe systemen. Daarnaast is het vaak belangrijk dat de data vanuit de oude webshop overgezet wordt naar de nieuwe webshop. Data als klantgegevens, orders, producten en content pagina’s. In deze stap zit het meeste maatwerk omdat iedere webshop andere wensen heeft met betrekking tot functionaliteiten, beheerderswensen, koppelingen met externe systemen, marketing gerelateerde opties etc. Onderstaand een aantal basis werkzaamheden die eigenlijk op iedere webshop van toepassing zijn:

• Bouwen, stylen en inrichten van de besproken pagina’s
• Payment provider koppelen
• Verzend provider koppelen
• Cookie melding
• Google e-commerce tracking
• Google tag manager + aanverwante tags instellingen.

Stap 6: Content vullen en testen

Wanneer de functionaliteiten en pagina’s zijn gebouwd, is het van uiterst belang om alles nauwkeurig te testen. Werkt alles zoals je het bedacht had en doet alles wat het moet doen? Bij klanten verdelen wij dit in een ALFA-test (intern) en een BETA-test waarbij zowel intern als extern getest wordt. Door deze doorgrondige filters zorgen we ervoor dat er geen mogelijke risico’s achterblijven. Zo wordt de webshop getest op verschillende browsers, versies en apparaten. Zodra je door de site heen kan klikken krijg je er meer “feeling” mee en kom je in veel gevallen tot nieuwe en wellicht betere inzichten.

Naast het testen van de webshop is het nu belangrijk om de webshop te vullen met content. Omdat de content voor een groot gedeelte bepalend is voor de look & feel en conversie nemen wij hier altijd het voortouw in. Zo zorgen wij ervoor dat de homepage, productoverzicht pagina, product detailpagina, winkelwagen en checkout volledig in orde zijn. Wanneer we de afspraak hebben gemaakt om content en overige data  te importeren, is dit ook het moment voor die specifieke stap. Verder is het nu aan de klant om zelf met de webshop aan de slag te gaan en alle aandachtspunten te noteren in ons overzichtelijke projectmanagement systeem Monday.

Stap 7: Livegang van de WooCommerce webshop

Nu alle pagina’s, afbeeldingen, video’s en producten geplaatst en getest zijn, kunnen we de website koppelen aan de “Live-URL”. Wanneer er nog een laatste testronde is uitgevoerd, moeten de 301-redirects worden ingesteld. Zorg ervoor dat alle URL’s die je niet meeneemt in de migratie, een 301-redirect krijgen. Check een maand nadat je alle redirects hebt ingesteld of hier “hits” op zijn geweest. Zo kun je alle 301’s die niet gebruikt worden weer verwijderen, om zo het overzicht te behouden en geen onnodige redirects instelt.

Technische optimalisatie

Na alle handmatige tests, is het tijd voor de eerste technische analyse. Wij maken gebruik van gespecialiseerde software waarmee je alle technische fouten van je website kunt achterhalen. Onderdelen die onder andere getest worden zijn:

• 404 pagina’s
• Afbeeldingen zonder ALT teksten
• Missende META data
• Snelheidsoptimalisatie mogelijkheden
• HTTPS status van al je pagina’s (% coverage)
• Gezondheid van je linkstructuur
• En overige technische SEO aspecten ter optimalisatie

Snelheid

Tijdens de ontwikkeling is er al rekening gehouden met de snelheid van de website. Toch ligt hier nog een belangrijk punt na livegang. Om de snelheid van de webshop optimaal te krijgen, treffen we de volgende maatregelen met betrekking tot performance:

• Varnish implementatie op de server
• Cloudfare CDN implementatie
• Javascript en CSS combining
• Javascript en CSS minification
• GZIP compressie
• Afbeelding compressie
• Pagina compressie

Ready, set, go!

De champagne mag open, want de Woocommerce webshop is live! Nu alles is afgerond, gaat het spel beginnen. Komen de aannames die je in het voortraject hebt gedaan overeen met de werkelijkheid? Meten is weten! Zo ja, goed werk, ga verder met het optimaliseren van je pagina’s, traffic en conversie. Zo niet, analyseer je data en ga kijken hoe je dit zo snel mogelijk kan oplossen. Uiteraard laten wij je niet in de steek, wij helpen je namelijk vanaf het eerste gesprek met het behalen van jouw gewenste doelstellingen en ambities.

WooCommerce webshop: alle investeringen op een rijtje

Zoals je kunt lezen komt er toch behoorlijk wat kijken bij het opzetten van een professionele WooCommerce webshop. In tegendeel tot de algemene verwachting is het dus meer dan alleen het installeren van een template met wat kleine aanpassingen. Bovenstaand is een korte samenvatting van de werkzaamheden die wij uitvoeren. Onderstaand een samenvatting van de bovengenoemde investeringen. Zoals al eerder aangegeven is dit een inschatting die op veel webshops van toepassing is. Aangezien elke online ondernemer anders is, met eigen producten, eigen functionaliteiten en eigen eisen, zijn de werkelijke kosten compleet afhankelijk van de situatie. Door op de knop onderaan dit artikel te drukken, kun je ontdekken wat een WooCommerce webshop zou kosten voor jouw specifieke situatie, wensen en doelstellingen.