WooCommerce checkout aanpassen

Door Marc geplaatst op 23 augustus 2022 (Aangepast op 27 juni 2023)

De checkout-pagina (ook wel: afrekenpagina) is de laatste drempel voor een bezoeker om een aankoop in de webshop te doen. Het aantal bezoekers die op dit eindstation van het aankoopproces afhaken, wil je uiteraard zo laag mogelijk houden.

De standaard WooCommerce checkout-pagina is niet bepaald indrukwekkend en de kans is groot dat je hier iets aan wilt veranderen. Standaard is het in WooCommerce niet eenvoudig om de afrekenpagina aan te passen.

WooCommerce biedt wel een betaalde plugin aan om de checkout aan te passen. Maar betaalde plugins van WooCommerce zijn niet persé altijd de beste oplossing. En waarom betalen als het ook gratis kan?

In artikel leg ik meerdere soorten aanpassingen aan de afrekenpagina uit. Ik maak daarbij zoveel mogelijk gebruik van gratis oplossingen.

Velden aanpassen op checkoutpagina

Soms zijn de velden op de checkout-pagina gewoon niet helemaal naar wens. Wil je een of meerdere velden toevoegen, namen van velden aanpassen of juist velden verwijderen? Dan raad ik deze plugin aan. Met deze checkout field manager pas je eenvoudig de velden aan. Daarnaast maak je er ook conditionele velden mee. Dit is normaal vaak een betaalde functionaliteit.

Ik stoor me er soms aan dat de standaard afrekenpagina wat ‘Amerikaans’ overkomt, waardoor je een webshop met WooCommerce al snel herkent. Er wordt bijvoorbeeld gevraagd naar een provincie terwijl we dat in Nederland niet gewend zijn. Verder staat er in het optionele veld voor huisnummertoevoeging de tekst: Appartement, suite, unit enz. Mijn voorkeur gaat uit naar eenvoudigweg: huisnummertoevoeging.

Velden aanpassen op afrekenpagina, zo pak je dit aan:

Ga in WordPress naar Plugins > Nieuwe plugin en zoek naar checkout field manager. Installeer de plugin (van QuadLayers) door op Nu installeren te klikken. Na enkele ogenblikken verschijnt de knop Activeren. Klik ook daarop. De plugin is nu geïnstalleerd.

In het menu van WooCommerce verschijnt nu een extra optie: Afrekenen. Klik hier op om verder te gaan.

Conditionele velden toevoegen op checkoutpagina

Soms is het handig om bepaalde invulvelden op de afrekenpagina pas te tonen als aan een specifieke voorwaarde is voldaan, zoals het aanvinken van een checkbox. Een goed voorbeeld hiervan is wanneer je wilt weten of een klant een zakelijke of particuliere klant is. Als de klant kiest voor ‘zakelijk’, wil je mogelijk ook een invulveld tonen voor de bedrijfsnaam en het BTW-nummer.

Standaard biedt WooCommerce geen ondersteuning voor dit soort conditionele velden op de afrekenpagina. Gelukkig kun je gebruikmaken van de Checkout Field Manager-plugin om dit wel mogelijk te maken.

Stap 1: Installeren en openen plugin Checkout Field Manager

• Open je WordPress-beheerdersdashboard en ga naar de plugin-marktplaats.
• Zoek naar “Checkout Field Manager” van quadlayers.
• Klik op de knop “Installeren” en wacht tot de installatie is voltooid.
• Activeer de plugin zodra deze is geïnstalleerd.
• Nadat je de plugin hebt geactiveerd, navigeer je naar het WooCommerce-menu aan de linkerkant van je dashboard.
• Klik op “Afrekenen” en selecteer het tabblad “Facturering” in het bovenste menu.

Stap 2: Veld “soort klant” toevoegen

• Klik op de knop “Nieuw veld toevoegen“.
• Zoek naar de optie “Type” voor het nieuwe veld en selecteer “Radio” uit de keuzelijst.
  Radiobuttons zijn keuzeknoppen waarmee gebruikers één optie uit een lijst kunnen selecteren. Het geselecteerde item wordt weergegeven als een bolletje of een cirkel.
• In het veld “Label” vul je “Soort klant” in.
• Nu nog de klantsoorten aanmaken. Klik in het menu (links) op opties.
• Vul “Particulier” in het veld voor de eerste optie en klik op de knop “Nieuwe optie toevoegen“.
• Voer “Zakelijk” in als tweede optie.
• Optioneel: Als je wilt dat “Particulier” standaard is geselecteerd, vink je het vakje “Standaard” aan naast de optie “Particulier“. Je kunt dit aanpassen op basis van je specifieke voorkeuren. Als je voornamelijk zakelijke klanten hebt, kun je beter “Standaard” selecteren bij “Zakelijk“.
• Klik op “Opslaan” om het nieuwe veld op te slaan.

Stap 3: Extra invulvelden toevoegen

In dit voorbeeld wil ik dat er twee extra velden verschijnen indien het om een zakelijke klant gaat: Bedrijfsnaam en BTW-nummer.

• Klik op de knop “Nieuw veld toevoegen“.
• Laat het Type staan op “Text”
• Bij het label vul je “Bedrijfsnaam” in.
• Rechts zie je “Voorwaardelijk” staan. Vink deze optie aan. Nu heb je aangegeven dat de weergave van het invulveld “bedrijfsnaam” afhankelijk is van de input van een ander veld.
• We moeten nu aangeven van welk veld “bedrijfsnaam” afhankelijk is. Kies bij “Hoofd” voor de optie “Soort klant“.
• Kies vervolgens bij “Soort klant” voor “Zakelijk“.
• Sla het nieuwe veld op met de knop “Opslaan“.

Het invulveld “Bedrijfsnaam” wordt op de checkoutpagina alleen getoond indien men bij soort klant kiest voor: “Zakelijk“.

bt succesvol een conditioneel veld met radiobuttons ingesteld in WooCommerce met behulp van de Checkout Field Manager (Checkout Manager) van quadlayers.

Bestand uploaden in checkoutpagina

Moet de klant een ontwerp of iets dergelijks uploaden bij het afrekenen?

Woocommerce One Page Checkout

WooCommerce Multi Page Checkout

One click up sell

De one click up sell is een methode die wellicht nog niet heel erg bekend is. Hierbij bied je na de betaling van de bestelling een relevante aanbieding aan die de klant met slechts 1 klik kan aanschaffen. De klant hoeft dan niet opnieuw de betaling af te ronden.

Huh, kan dat?! Ja dat kan.

Wat er feitelijk op de achtergrond gebeurt is dat je bij de up sell het bedrag middels een incasso in rekening brengt. Met de vorige aankoop heeft de klant dan al een akkoord gegeven voor een incasso. Het is wellicht wat een bijzondere methode, maar het is wettelijk gewoon toegestaan.

Een nadeel is, dat klanten een incasso altijd kunnen storneren, waar je als ondernemer niet op zit te wachten.

Betaalpagina testen

Test altijd of de aanpassingen ook daadwerkelijk werken zoals je in gedachten had.