Bij het bekijken van Analytics zie je vaak veel bezoeken aan de checkoutpagina, maar aanzienlijk minder bezoeken aan de pagina waarop de bestelling is voltooid. Daar kunnen verschillende redenen voor zijn, maar één daarvan is bijzonder eenvoudig te voorkomen: de klant weet niet of WooCommerce de bestelling correct verwerkt.
Sommige betaalgateways hebben enkele seconden nodig om de betaling te valideren en de bestelling aan te maken. Gedurende die tijd blijft de knop laden, maar WooCommerce geeft niet altijd een duidelijke uitleg. De klant kan denken dat de pagina is vastgelopen, opnieuw op de knop klikken, de pagina vernieuwen of sluiten voordat het proces is afgerond.
In deze handleiding leer je hoe je een melding toont terwijl WooCommerce een bestelling verwerkt, zodat de klant weet dat hij moet wachten en de pagina niet moet vernieuwen.
Wanneer een webshop enkele seconden nodig heeft om een bestelling af te ronden, zorgt het gebrek aan informatie voor onzekerheid. Dit is vooral problematisch bij een trage verbinding of wanneer de betaalgateway met externe diensten moet communiceren.
Een melding zoals deze maakt duidelijk dat het proces nog bezig is:
Even geduld terwijl we je bestelling verwerken
Sluit of vernieuw deze pagina niet.
De melding zorgt er niet voor dat WooCommerce de betaling sneller verwerkt, maar verbetert wel de winkelervaring en verkleint de kans dat de klant de bestelling per ongeluk onderbreekt.
De volgende code toont een overlay nadat de klant op de knop heeft geklikt om de bestelling te plaatsen.
/**
* Toont een melding terwijl WooCommerce de bestelling verwerkt.
*
* De melding verschijnt alleen wanneer het formulier geldig is.
*
* Compatibel met:
* - WooCommerce Checkout Blocks
* - Klassieke WooCommerce-checkout
*/
add_action( 'wp_footer', function () {
// Alleen op de checkoutpagina laden.
if (
! function_exists( 'is_checkout' ) ||
! is_checkout() ||
is_order_received_page()
) {
return;
}
?>
<div
id="order-processing-message"
aria-hidden="true"
>
<div class="order-processing-box">
<div class="order-processing-spinner"></div>
<h3>
<!-- Je kunt deze titel wijzigen -->
Even geduld terwijl we je bestelling verwerken
</h3>
<p>
<!-- Je kunt dit bericht wijzigen -->
Vernieuw of sluit deze pagina niet.
</p>
</div>
</div>
<style>
/* Laag die het hele scherm bedekt */
#order-processing-message {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
visibility 0.2s ease;
}
#order-processing-message.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Meldingsvenster */
.order-processing-box {
width: 100%;
max-width: 440px;
padding: 32px 24px;
border-radius: 10px;
background: #ffffff;
color: #222222;
text-align: center;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
.order-processing-box h3 {
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.order-processing-box p {
margin: 0;
color: #666666;
font-size: 15px;
line-height: 1.5;
}
/* Laadindicator */
.order-processing-spinner {
width: 36px;
height: 36px;
margin: 0 auto 20px;
border: 4px solid #dddddd;
border-top-color: #555555;
border-radius: 50%;
animation: order-processing-spin 0.8s linear infinite;
}
@keyframes order-processing-spin {
to {
transform: rotate(360deg);
}
}
</style>
<script>
(function () {
const overlay = document.getElementById(
'order-processing-message'
);
if (!overlay) {
return;
}
let safetyTimer;
/**
* Controleert of WooCommerce fouten heeft gevonden.
*/
function checkoutHasErrors() {
return Boolean(
document.querySelector(
/*
* Verplichte of ongeldige HTML-velden.
* Inclusief het selectievakje voor de voorwaarden.
*/
'.wc-block-checkout :invalid,' +
'form.checkout :invalid,' +
/*
* Velden die als ongeldig zijn gemarkeerd
* via toegankelijkheidsattributen.
*/
'.wc-block-checkout [aria-invalid="true"],' +
'form.checkout [aria-invalid="true"],' +
/*
* Fouten van Checkout Blocks.
*/
'.wc-block-components-validation-error,' +
'.wc-block-components-notice-banner.is-error,' +
'.wc-block-store-notice.is-error,' +
/*
* Fouten van de klassieke checkout.
*/
'.woocommerce-error'
)
);
}
/**
* Toon de melding.
*/
function showProcessingMessage() {
overlay.classList.add('show');
overlay.setAttribute('aria-hidden', 'false');
/*
* Veiligheidsmaatregel:
* als WooCommerce niet reageert, wordt de melding
* na 60 seconden automatisch gesloten.
*/
clearTimeout(safetyTimer);
safetyTimer = setTimeout(
hideProcessingMessage,
60000
);
}
/**
* Verberg de melding.
*/
function hideProcessingMessage() {
overlay.classList.remove('show');
overlay.setAttribute('aria-hidden', 'true');
clearTimeout(safetyTimer);
}
/**
* Detecteer de bestelknop.
*/
document.addEventListener(
'click',
function (event) {
const button = event.target.closest(
'.wc-block-components-checkout-place-order-button, #place_order'
);
if (!button || button.disabled) {
return;
}
/*
* Wacht tot WooCommerce de velden valideert.
*
* Als de voorwaarden ontbreken of een veld
* ongeldig is, toont WooCommerce de fout
* binnen dit tijdsinterval.
*/
setTimeout(function () {
if (checkoutHasErrors()) {
hideProcessingMessage();
return;
}
showProcessingMessage();
}, 400);
},
true
);
/**
* Als WooCommerce later een fout toont,
* verberg de melding dan onmiddellijk.
*/
const observer = new MutationObserver(function () {
if (checkoutHasErrors()) {
hideProcessingMessage();
}
});
observer.observe(
document.body,
{
childList: true,
subtree: true,
attributes: true,
attributeFilter: [
'aria-invalid',
'class'
]
}
);
/**
* Verberg de melding bij terugkeer via de knop
* Terug van de browser.
*/
window.addEventListener(
'pageshow',
hideProcessingMessage
);
})();
</script>
<?php
}, 100 );
De snippet werkt met zowel WooCommerce Checkout Blocks als de klassieke checkout. Wanneer de verwerking begint, verschijnt een overlay met een laadindicator en een bericht voor de klant.
Als WooCommerce een onvolledig veld, niet-geaccepteerde voorwaarden of een andere validatiefout detecteert, verdwijnt de melding automatisch zodat de klant de gegevens kan corrigeren.
Je kunt de snippet installeren met een plugin voor codefragmenten, zoals Code Snippets, zonder de themabestanden rechtstreeks aan te passen.
Maak een nieuwe snippet, plak de volledige code, sla de wijzigingen op en activeer de snippet zodat deze aan de voorkant van de website wordt uitgevoerd. Als je een andere methode gebruikt om aangepaste PHP toe te voegen, controleer dan dat de code niet uitsluitend in het beheergedeelte wordt geladen.
Plaats altijd een testbestelling voordat je de code in een actieve webshop gebruikt.
Nadat de klant op de betaalknop heeft geklikt, ziet hij de overlay terwijl WooCommerce de bestelling aanmaakt en verwerkt. Gedurende deze tijd wordt gevraagd de pagina niet te sluiten of te vernieuwen.
Als de bestelling correct wordt voltooid, stuurt WooCommerce de klant door naar de bevestigingspagina. Als er een fout optreedt, sluit de melding zodat de checkout kan worden gecontroleerd en opnieuw geprobeerd.
Dit gedrag helpt herhaald klikken te voorkomen en geeft meer vertrouwen tijdens een van de gevoeligste fasen van een online aankoop.
In de snippet kun je eenvoudig de titel, tekst en kleuren wijzigen zodat ze bij het ontwerp van je webshop passen. Voor deze visuele aanpassingen hoef je de werking niet te veranderen.
Gebruik een korte en geruststellende boodschap. De klant moet direct begrijpen dat de bestelling wordt verwerkt en dat de pagina geopend moet blijven.
Open de webshop in een incognitovenster, voeg een product toe aan de winkelwagen en doorloop de checkout zoals een klant dat zou doen. Nadat je op de bestelknop hebt geklikt, moet de melding verschijnen en zichtbaar blijven totdat WooCommerce de bevestiging toont.
Test het formulier ook door een verplicht veld leeg te laten of de voorwaarden niet te accepteren. In dat geval moet de melding sluiten zodat de fout kan worden gecorrigeerd.
Controleer het proces ten slotte op zowel desktop als mobiel en test iedere gateway als je webshop meerdere betaalgateways aanbiedt.
Niet elke verlaten checkout heeft een eenvoudige technische oplossing. Wanneer onzekerheid tijdens de verwerking het probleem is, kan een duidelijke melding echter een belangrijk verschil maken.
Een melding tonen terwijl WooCommerce een bestelling verwerkt verkort de werkelijke wachttijd niet, maar verbetert wel de beleving van het proces. De klant weet dat de webshop bezig is, begrijpt dat hij moet wachten en heeft minder reden om de pagina te sluiten of te vernieuwen.
Het is een kleine wijziging die compatibel is met de belangrijkste WooCommerce-checkouts en vooral nuttig is voor webshops waarin betalingen enkele seconden nodig hebben.
Ja. De code is ontworpen om zowel de knop van WooCommerce Checkout Blocks als die van de klassieke checkout te detecteren. Voordat je de code in een actieve webshop gebruikt, is het verstandig om een testbestelling te plaatsen met de specifieke configuratie van je website.
Nee. De snippet maakt de server of betaalgateway niet sneller. De functie ervan is de klant te laten weten dat de bestelling wordt verwerkt, onzekerheid te verminderen en te voorkomen dat de pagina opnieuw wordt geladen of dat er tijdens het wachten meerdere keren op de knop wordt geklikt.
De code wacht totdat WooCommerce het formulier heeft gevalideerd. Als verplichte informatie ontbreekt, de betaalmethode ongeldig is of de voorwaarden niet zijn geaccepteerd, verdwijnt de melding zodat de klant de fout kan corrigeren voordat de bestelling opnieuw wordt geplaatst.
Ja. Je kunt de titel, de aanvullende tekst, de achtergrond, het venster, de typografie en de kleur van de laadindicator wijzigen. De belangrijkste onderdelen zijn met opmerkingen aangegeven, zodat je de melding kunt aanpassen aan het ontwerp van je webshop.
Nee. Je kunt de code installeren met de gratis plugin Code Snippets, zonder de themabestanden te bewerken. Je kunt de code ook toevoegen aan het bestand functions.php van een child theme als je deze liever handmatig beheert.
De melding is niet rechtstreeks afhankelijk van een specifieke betaalgateway en kan daarom werken met kaartbetalingen, PayPal, bankoverschrijvingen en andere methoden. Sommige gateways gebruiken echter eigen omleidingen of validaties. Daarom is het verstandig om elke beschikbare betaalmethode te testen voordat je de wijzigingen publiceert.