De volledige gids over afrekenen in WooCommerce – velden aanpassen, templates veranderen en afrekenen op één pagina

WooCommerce is een veelzijdige en krachtige plugin waarmee je van je WordPress website in mum van tijd een dynamische webshop maakt. Maar als je probeert het aantal achtergelaten winkelkarretjes te verminderen, meer conversies wilt hebben en je omzet wil vergroten, dan is het tijd om eens goed te kijken naar je WooCommerce afrekenpagina.

Er zijn ontelbaar veel manieren om de afrekenpagina in WooCommerce te stijlen en vorm te geven. Of je nou net bent begonnen aan je eerst online winkel en probeert te begrijpen hoe deze pagina precies werkt, of dat je de afrekenervaring voor je bestaande WooCommerce site wil verbeteren, met dit artikel gaan we je helpen.

We zullen uitleggen wat de WooCommerce afrekenpagina precies is en hoe deze werkt. Vervolgens zullen we je alle mogelijkheden uitleggen voor het stijlen en veranderen van de pagina, waardoor je deze maximaal kan benutten voor het verbeteren van je conversies, via plugins, code, thema’s of andere manieren.

Laten we er meteen mee beginnen!

Een overzicht van de WooCommerce afrekenpagina

Wanneer je voor het eerst je WooCommerce winkel opzet maakt de plugin automatisch een afrekenpagina of betaalpagina voor je. Wanneer je deze bekijkt op de front-end van je site, zal je zien dat dit een vrij simpele pagina is:

Standaard vraagt WooCommerce je klanten alleen om basisgegevens. Dit zijn bijvoorbeeld:

• Betaalgegevens
• Voornaam en achternaam
• Bedrijfsnaam
• Adres (Plaats, land, provincie en postcode)
• Telefoonnummer
• E-mail
• Opmerkingen bij de bestelling
• Privacybeleid

Dit is allemaal belangrijke informatie om op je WooCommerce afrekenpagina te hebben. Het zijn de gegevens die nodig zijn om de aankoop van je klant af te ronden, en om de betaling te kunnen verwerken.

Maar in deze pagina vind je niets dat je conversies verbetert of tot minder achtergelaten winkelkarretjes leidt. Daarnaast biedt de standaardpagina niet altijd de meest belangrijke of relevante informatie over je bedrijf. Er zijn daarom veel WooCommerce websitebeheerders die graag het ontwerp en de inhoud van de betaalpagina willen veranderen.

Voordat we de verschillende manieren bekijken waarop je dat kan doen met WooCommerce, zijn er een paar dingen die je moeten weten.

We moeten het daarom hebben over waar je deze pagina vindt, wat de verschillende standaardinstellingen en features zijn die bij de WooCommerce plugin horen.

Waar vind je de standaard betaalpagina en instellingen van WooCommerce

WooCommerce maakt automatisch een betaalpagina voor je winkel zodra je de plugin activeert. Je kan deze vinden door te gaan naar Pages > Checkout binnen je admindashboard:

Je kan deze pagina op dezelfde manier bewerken als andere WordPress content. Zo kan je bijvoorbeeld de titel en permalink van de pagina veranderen, een uitgelichte afbeelding toevoegen, de eigenschappen van de pagina veranderen, etc. Verder gebruikt het de [woocommerce_checkout] shortcode:

Er zijn een handjevol standaardopties voor het configureren van deze pagina, die je onder meer kan vinden onder WooCommerce > Settings > Advanced:

In dit venster kan je onder Page Setup een andere pagina selecteren als afrekenpagina voor je winkel. Je hebt ook de mogelijkheid om een beveiligde HTTPS verbinding te verplichten.

Op de pagina General kan je kortingscodes activeren die bij het afrekenen gebruikt kunnen worden, en bepalen hoe de belasting berekend wordt.

Onder het tabblad Accounts & Privacy kan je ook enkele andere opties vinden voor het maken van profielen en het afrekenen voor gasten:

Daaronder vind je een deel Privacy policy waarin je de tekst voor het privacybeleid kan veranderen die op de afrekenpagina staat.

Naast deze standaard instellingen heb je weinig andere mogelijkheden in de WooCommerce plugin voor het aanpassen van je betaalpagina. Gelukkig zijn er nog andere manieren waarop je de weergave en functionaliteit kan aanpassen.

Waarom je de WooCommerce afrekenpagina zou willen veranderen

De afrekenpagina is het laatste dat je klanten zien voordat ze hun aankoop afronden. Die pagina kan dus het verschil zijn tussen een conversie, of dat ze je website gewoon verlaten.

Daarom is het essentieel om ervoor te zorgen dat je WooCommerce afrekenpagina goed ontworpen is, en zodanig functioneert dat je conversies maximaliseert. Er zijn verschillende manieren waarop je de ervaring van je bezoekers kan verbeteren zoals:

• Het veranderen van ontwerp en de paginatemplate
• Het maken van een afrekenproces van één pagina
• Toevoegen, verwijderen of verplaatsen van velden
• De labels van velden en teksten bij knoppen veranderen
• Vereisen dat sommige velden ingevuld worden
• Automatisch gratis verzending activeren
• Producten direct aan de afrekenpagina linken

Of je nou de standaardpagina helemaal opnieuw wil doen of alleen wat kleine aanpassingen wil doen, het belangrijkste is dat je dit eenvoudig en met een gerust hart kan doen. Gelukkig heb je daarvoor verschillende mogelijkheden.

Manieren om de WooCommerce afrekenpagina aan te passen

Er zijn verschillende manieren om je WooCommerce betaalpagina aan te passen. De beste manier hangt af van verschillende zaken, zoals de specifieke aanpassing die je voor ogen hebt, en hoe goed je kan programmeren.

Enkele manieren waarop je de WooCommerce afrekenpagina kan verbeteren, zijn bijvoorbeeld:

• WooCommerce features, blocks, en shortcodes. WooCommerce heeft enkele ingebouwde features en instellingen waarmee je je webwinkel kan verbeteren. Zo kan je bijvoorbeeld automatisch gratis verzending activeren, of producten direct aan de afrekenpagina linken. Verder zijn er blokken en shortcodes om de pagina aan te passen.
• Plugins en extensies. Ben je niet heel handig met code, of wil je gewoon een snelle en handige manier om je WooCommerce afrekenpagina te verbeteren, dan zijn er allerlei plugins die je kan gebruiken. De meest zijn vrij eenvoudig te gebruiken en vereisen weinig ondersteuning. Er worden enkele add-ons aangeboden door WooCommerce en via de Extension Library, terwijl andere add-ons en plugins ontwikkeld en aangeboden worden door derden.
• Paginatemplates en thema’s. Als je de stijl van je afrekenpagina wil aanpassen, dan kan je een kant-en-klaar template of thema gebruiken. Net als bij plugins is dit een goede keuze als je weinig ervaring met programmeren hebt, en alleen aanpassingen wil doen aan het uiterlijk van de pagina, bijvoorbeeld zodat het beter bij je huisstijl past. Het nadeel is dat dit minder flexibiliteit biedt als zelf programmeren.
• Custom code. Een andere manier die je kan gebruiken om je WooCommerce afrekenpagina zo goed mogelijk te gebruiken is custom code, oftewel zelf programmeren. Dit is een goed keuze, als je tenminste geen problemen hebt met het bewerken van de bestanden van je website, en je ook veel zaken wil aanpassen.

In de volgende hoofdstukken zullen we naar enkele van de meest effectieve veranderingen kijken die je kan doen aan je WooCommerce pagina. Voor elke verandering leggen we uit waarom je dit zou willen doen, en laten we verschillende manieren zien waarop je dit kan toepassen.

Zo pas je de velden op de WooCommerce afrekenpagina aan

Eén van de meest voorkomende veranderingen aan een WooCommerce betaalpagina is het veranderen van de velden in de formulieren. Deze nemen vaak de meeste ruimte in op de pagina, dus ze moeten allemaal ook echt relevant zijn. Of je nou velden wil verwijderen, veranderen, de volgorde wil wijzigen of nieuwe velden wil toevoegen, je kan het allemaal op verschillende manieren doen. Je kan een plugin gebruikt, of direct de code bewerken.

Een plugin gebruiken om de velden op de WooCommerce afrekenpagina te wijzigen

Als je een snelle en simpele manier wil om de velden op de betaalpagina in WooCommerce wijzigen, raden we je aan om een plugin te gebruiken. Je kan kiezen uit een handjevol mogelijkheden.

Eén van de populairste plugin is de Checkout Field Editor plugin:

Dit is een freemium tool waarmee je velden in het formulier van de WooCommerce afrekenpagina kan toevoegen of wijzigen. Je kan bepaalde velden inschakelen en uitschakelen en de volgorde wijzigen.

Alhoewel je deze basistaken met de gratis versie kan regelen, biedt de WooCommerce Checkout Field Editor Pro nog extra functionaliteit. Dit is onder meer te vinden in de 17 soorten velden en aangepaste hooks.

Om deze plugin te installeren op je WooCommerce site ga je naar Plugins > Add New en zoek je op de naam. Wanneer je de plugin vindt klik je op Install Now en dan op Activate.

Na het activeren kan je de instellingen aanpassen via WooCommerce > Checkout Form:

Er zijn drie soorten velden die je kan bewerken:

1. Betaalgegevens
2. Verzending
3. Overige

Selecteer het veld dat je wil veranderen en klik vervolgens op Remove, Enable, of Disable. Om een nieuw veld toe te voegen selecteer je Add field.

Wil je een bestaand veld van het formulier aanpassen, selecteer dan het vakje aan de linkerkant en druk op Edit. Je ziet vervolgens een scherm waarop je het veldtype kan wijzigen (alleen in de premium versie), het label van het veld kan veranderen, kan bepalen of het vereist is, en nog meer:

Wanneer je klaar bent klik je op Save. Let erop dat je na je wijzigingen op Save Changes onderaan de pagina klikt.

Voor meer informatie kan je de documentatie van WooCommerce over het gebruiken van de Checkout Field Editor plugin nalezen.

Natuurlijk is dit nog maar één van de vele plugins die je kan gebruiken om de velden in de WooCommerce afrekenpagina te veranderen. Andere opties zijn bijvoorbeeld Flexible Checkout Fields en WooCommerce Checkout Manager, die verderop aan bod komen.

Het aanpassen van de formuliervelden via code

Een andere mogelijkheid voor het aanpassen van de velden in het formulier op de WooCommerce afrekenpagina is het gebruiken van je zelfgeschreven code. Dit vereist natuurlijk wat technische kennis en je moet met de bestanden van je website kunnen werken. Het voordeel is dat je meer flexibiliteit hebt qua opties dan wanneer je een specifieke plugin gebruikt.

Je kan de velden voor het afrekenen aanpassen via je site’s functions.php bestand en filters zoals:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields

Met de WooCommerce actions en filters kan je de velden op nagenoeg elke denkbare manier aanpassen. Zo kan je ze bijvoorbeeld helemaal verwijderen, nieuwe velden toevoegen, of de tekst ervan wijzigen. Door de woocommerce_checkout_fields filter te gebruiken kun je elk veld aanpassen.

Stel bijvoorbeeld dat je de vooraf ingevulde tekst voor het veld order_comments wil aanpassen. Standaard staat dit zo ingevuld:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

Om dit te veranderen kan je het volgende stukje code toevoegen aan je functions.php bestand:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

Om een veld te verwijderen gebruik je dit:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

Er zijn allerlei zaken die je aan de velden van je afrekenpagina zou kunnen veranderen, dus die kunnen we niet allemaal bijlangs gaan. Maar je kan wel een lijst met handige overridecode voor je afrekenvelden vinden op GitHub.

Zo verander je de template van de WooCommerce afrekenpagina

Standaard zal de afrekenpagina van WooCommerce gebaseerd zijn op het thema van je website. Maar wellicht wil je het ontwerp aanpassen zodat het beter bij je huisstijl past, of misschien wil je gewoon wat kleine dingen veranderen aan de content.

De twee belangrijkste methoden die je kan gebruiken zijn via een kant-en-klare template of door je eigen code toe te voegen. Laten we beginnen met de eerste optie:

Pas je afrekenpagina aan via een kant-en-klare template

De makkelijkste manier om het ontwerp van je WooCommerce afrekenpagina aan te passen is door een kant-en-klaar thema te installeren, zoals de thema’s die je in de WooCommerce Themes Store kan vinden. Er zijn allerlei gratis opties beschikbaar, en natuurlijk ook veel premium thema’s.

Je kan bijvoorbeeld zoeken op thema’s die je een afrekenproces van één pagina bieden, of een ander sjabloon dat je interessant vindt. Je kan ook allerlei WooCommerce thema’s vinden via Envato Market.

Gebruik code om de template van de WooCommerce betaalpagina te wijzigen

Als je geen probleem hebt met het bewerken van code, dan kan je ook handmatig de afrekenpagina aanpassen. Afhankelijk van je hostingprovider kan je dit doen via de File Manager in cPanel of via een Secure File Transfer Protocol (SFTP) client.

Je kan action hooks gebruiken om elementen toe te voegen, te bewerken en te verwijderen. Er zijn negen belangrijke action hooks die WooCommerce binnen de afrekenpagina gebruikt:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• Woocommerce_after_checkout_form

Deze action hooks voegen markup toe aan de pagina, die je vervolgens kan gebruiken om zowel de stijl als functies aan te passen. Wil je deze action hooks gebruiken om de template van je afrekenpagina te wijzigen, dan kan je dit doen door het PHP bestand voor het formulier aan te passen.

Je kan de bestanden voor de WooCommerce template vinden onder /woocommerce/templates. Vanuit de root directory van je website moet je naar wp-content/plugins/woocommerce gaan

Binnen deze bestanden kan je hooks vinden die je kan gebruiken om de content te veranderen op de sjabloonpagina, zonder de daadwerkelijke bestanden te wijzigen. Om een custom thematemplate voor je afrekenpagina te maken, moet je eerst een map “woocommerce/checkout” aanmaken binnen de map van je thema.

Vervolgens kopieer je de template voor de WooCommerce betaalpagina, die je kan vinden op woocommerce/templates/checkout/form-checkout.php:

Vervolgens voeg je deze toe aan de nieuwe map die je net hebt gemaakt. Vervolgens kan je het bestand aanpassen voor de gewenste veranderingen. Na het opslaan van het bestand zal de WooCommerce plugin dit sjabloon laden en daarmee de standaard pagina overschrijven.

Zo maak je een WooCommerce afrekenproces van slechts één pagina

Eén van de manieren om een betere betaalervaring voor je klanten te maken en tegelijkertijd ook minder afhakers te hebben tijdens het afrekenen, is het betalen zo snel en simpel mogelijk te maken. Wil je het afrekenen verkorten, dan kan je dat onder meer doen door een afrekenproces van één pagina te maken in WooCommerce.

Dit kan je op verschillende manieren regelen. Zoals we al eerder zeiden, kan je op zoek gaan naar een thema of template met één pagina die je een enkele afrekenpagina biedt. Maar als je je huidige thema graag wil houden, is dat geen handige optie.

Maak je geen zorgen. Er zijn ook andere mogelijkheden, zoals de premium WooCommerce One Page Checkout extensie:

Aangezien deze oplossing door WooCommerce zelf is ontwikkeld, weet je meteen dat het goed ondersteund, veilig en betrouwbaar is. Naast dat je een pagina kan veranderen naar een betaalpagina, biedt het allerlei features voor het optimaliseren van een afrekenproces van één pagina.

Zo kan je:

• Zowel de productselectie als afrekenformulieren op één pagina tonen.
• Het mogelijk maken dat klanten items toevoegen of verwijderen in hun winkelkarretje.
• Klanten een betalingen laten afronden zonder dat ze de pagina hoeven te verlaten.
• Custom velden toevoegen aan pagina’s.

Nadat je de extensie hebt gekocht via je WooCommerce account, kan je de plugin downloaden, installeren en activeren voor je WooCommerce website.

Om dit te gebruiken ga je naar Pages > Add New  en selecteer je het icoontje One Page Checkout in de toolbar van de editor.

In het scherm dat zich nu opent kan je klikken op het veld Products en vervolgens de naam intypen van een product dat je wil toevoegen.

Vervolgens kan je kiezen welk sjabloon je wil gebruiken (Product List, Product Table, Pricing Table, of Single Product) en klikken op Create Shortcode.

Je kan de shortcode voor een enkele pagina ook handmatig toevoegen aan een artikel of pagina. Om meer over deze plugin te lezen en hoe je deze kan gebruiken, kan je de WooCommerce One Page Checkout documentatie er eens op naslaan.

Zo activeer je gratis verzending tijdens het WooCommerce betaalproces

Als e-commerce ondernemer zijn er verschillende strategieën die je kan hanteren om je klanten aan te moedigen meer in je winkel uit te geven. Een goede strategie is bijvoorbeeld gratis verzending aan te bieden.

Natuurlijk wil je niet elke bestelling gratis laten verzenden. Maar door het toe te voegen aan een bestelling boven een bepaald bedrag kan je klanten aan te moedigen net iets meer uit te geven dan ze anders zouden doen.

Daarom wil je wellicht je WooCommerce afrekenpagina zo instellen dat gratis verzending automatisch geactiveerd wordt voor bestellingen boven een bepaald bedrag, bijvoorbeeld boven de $100.

Het eerste wat je dan moet doen is de verzendmethode toevoegen aan de relevante Shipping Zone(s) oftewel verzendgebieden.

Dit doe je via WooCommerce > Settings > Shipping:

Hover boven de Shipping Zone die je wil aanpassen en klik op Edit. Heb je nog geen zones toegevoegd, selecteer dan eerst  Add shipping zone en volg de prompts die verschijnen.

Hierna klik je op Add Shipping Method. In de volgende module selecteer je Free Shipping in het dropdown-menu, en vervolgens weer Add shipping method:

Vervolgens hover je op de instellingenpagina in de lijst met Shipping methods boven Free Shipping en klik je op Edit.

Een Free shipping settings scherm zal zich nu openen. In het Free shipping requires… dropdown-menu, selecteer je A minimum order amount:

Je kan vervolgens het minimumbedrag voor een bestellingen bepalen. Wanneer je klaar bent klik je op Save Changes.

Zo link je producten direct aan de WooCommerce betaalpagina

Je kan de betaalervaring ook verbeteren voor je klanten door directe betaallinks te maken. Dit is handig omdat klanten dan direct naar het betalen gaan vanaf productpagina’s of actiepagina’s.

Handmatig een directe betaallink maken

Om een directe betaallink in WooCommerce te maken en toe te voegen, kan je de volgende URL gebruiken: exampledomain.com//checkout/?add-to-cart=ID.

Opmerking: Je moet hierbij “exampledomain” en “ID” veranderen met jouw specifieke domeinnaam en het product-ID dat je wil linken aan de betaalpagina.

Om een product-ID te vinden ga je naar Products > All Products in je admindashboard. Zoek het product waar je een directe link voor wil maken en hover boven de naam om het product ID te tonen:

Nadat je het product-ID hebt geplakt in de link, kan deze overal op je WooCommerce site zetten als normale link. Dit proces herhaal je voor alle gewenste producten, zelfs variabele producten of gegroepeerde items.

Het maken van een directe betaallink met een plugin

De strategie hierboven is wellicht niet ideaal voor elke gebruiker. Afhankelijk van het aantal producten in je WooCommerce winkel kan het nogal tijdsintensief worden.

Ben je op zoek naar een snellere methode, dan kan je ook de Direct Checkout for WooCommerce plugin gebruiken:

Deze freemium tool maakt het afrekenproces op diverse manieren makkelijker, waaronder een directe link op een productpagina. Nadat je de plugin hebt geïnstalleerd en geactiveerd op je WooCommerce website ga je naar WooCommerce > Direct Checkout:

Onder het tabblad General, selecteer je Yes bij de optie Added to cart redirect en vervolgens kies je Checkout  in het Added to cart redirect to dropdownmenu. Klik op Save changes.

Vervolgens ga je naar het tabblad Products:

Activeer de Redirect to the cart page after successful addition optie. En ook hier klik je weer op Save changes. Klaar!

Hoe test je de WooCommerce afrekenpagina?

Je hebt inmiddels hopelijk op verschillende manieren je WooCommerce betaalpagina kunnen veranderen. Het is nu belangrijk om te controleren dat je betaalproces perfect werkt, aangezien klanten je website anders verlaten of er fouten optreden in de customer journey.

Gelukkig is er een eenvoudige manier om een testbestelling te doen en te betalen via je WooCommerce winkel, zodat je kan controleren dat alles perfect werkt. Om dit te doen moet je eerst de WooCommerce Payments plugin op je website installeren, als je dat nog niet had gedaan.

Na het installeren en activeren kan je de ’test mode’ inschakelen. Dit doe je via WooCommerce > Payments > Settings:

Sla vervolgens je wijzigingen op.

Na het inschakelen van de Test Mode kan je winkelen in je eigen WooCommerce winkel en een product uitkiezen. Voeg het toe aan je winkelkarretje en ga naar de betaalpagina.

Vul alle benodigde velden op de betaalpagina in. Voor de betaalinformatie kan je één van de test creditcardnummers gebruiken die WooCommerce biedt. Je kan vervolgens elke 3 cijfers gebruiken voor de CVC code en een willekeurige geldigheidsdatum.

Vervolgens klik je op Place Order. Daarna ga je naar het scherm Payments > Transactions:

Je zou de bestelling nu moeten zien. Klopt dat, dan werkt je afrekenpagina zoals het zou moeten. Vergeet niet de Test Mode weer uit te zetten!

De beste WooCommerce plugins en extensies voor het afrekenen

Tijdens dit artikel hebben we allerlei manieren behandeld waarom je de betaalpagina van WooCommerce kan veranderen, zoals via blocks, shortcodes en custom code. We hebben ook enkele belangrijke plugins genoemd waarmee je functies kan toevoegen die je anders niet hebt.

Maar er zijn nog allerlei add-ons, plugins en extensies die we niet hebben genoemd, maar die je wel opties voor het aanpassen van je WooCommerce betaalpagina bieden. Een paar van de betere opties zijn bijvoorbeeld:

• WooCommerce Cart Notices Add-On. Deze WooCommerce add-on maakt het mogelijk om berichten en meldingen weer te geven aan je klanten tijdens het afrekenen. Zo kan je ze bijvoorbeeld attenderen op relevante acties en kortingen.
• WooCommerce Checkout Manager. Van hetzelfde team dat Direct Checkout for WooCommerce heeft gemaakt. Deze plugin is een krachtige extensie waarmee je je betaalpagina kan optimaliseren. Je kan er custom velden mee bewerken, verwijderen en toevoegen, waaronder voorwaardelijke velden.
• WooCommerce Checkout Add-Ons. Met deze premium plugin kan je gratis en betaalde add-ons aanbieden bij het afrekenen. Dit is een handige tool voor het verhogen van je omzet en conversies.

Afhankelijk van het type e-commerce website dat je hebt, ben je wellicht geïnteresseerd in nog meer mogelijkheden. Zo ja, bekijk dan eens de WooCommerce Extensions Library, die allerlei add-ons voor WooCommerce biedt, met zowel gratis als betaalde oplossingen.

Samenvatting

Er zijn verschillende manieren om je WooCommerce betaalpagina te optimaliseren en verbeteren.

Afhankelijk van wat je precies wil veranderen en hoeveel ervaring je hebt, kan je WooCommerce plugins en extensies gebruiken, pagina sjablonen en thema’s, of zelfs je eigen code schrijven.

Heb je nog vragen over het gebruiken of aanpassen van de WooCommerce afrekenpagina? Laat het ons weten in de reacties hieronder!