Direct doorgaan naar afrekenen in WooCommerce

Wil je instellen dat klanten direct doorgaan naar de afrekenpagina nadat een product in het winkelmandje is gestopt?

Standaard is dit helaas niet mogelijk, maar in dit artikel heb ik twee oplossing voor je hoe je het kunt realiseren.

Video: Direct doorgaan naar afrekenen

In onderstaande video kun je over mijn schouder meekijken hoe je op jouw WooCommerce webshop kunt instellen dat bezoekers direct op de afrekenpagina komen nadat er een product in de winkelmand wordt gestopt. Je hebt twee mogelijkheden:

Abonneer je op mijn YouTube kanaal

Optie 1: Met een omweg in WooCommerce.
Optie 2: Met behulp van de plugin Direct Checkout.

Wil je meer informatie over dit onderwerp of de uitleg in tekst? Lees dan hieronder verder.

Hoe het standaard werkt in WooCommerce

In WooCommerce krijg je standaard altijd bovenaan de pagina een melding te zien wanneer je een product toevoegt aan de winkelmand.

Melding nadat een product toegevoegd is aan de winkelmand in WooCommerce

De klant blijft op deze manier op dezelfde pagina, waardoor er direct verder geshopt kan worden vanaf het punt waar de klant gebleven is. De optie om de winkelmand te bekijken is ook zichtbaar. De standaard melding is dus wel handig en verder niet storend voor de klant.

Doorgaan naar de winkelmandpagina

Een andere standaard optie in WooCommerce, is dat je klanten direct door kunt sturen naar de winkelmandpagina. Je krijgt dan geen melding zoals hierboven te zien, maar wordt direct de winkelmand in geforceerd.

Wanneer je een webshop hebt met meerdere producten kan dit snel als storend ervaren worden. Heb je echter enkele producten die mensen afzonderlijk van elkaar kopen, dan kan het een handige toevoeging zijn.

Om klanten direct naar de winkelmandpagina te sturen, moet je naar “WooCommerce -> Instellingen -> Producten -> Algemeen” gaan. Op deze pagina vind je de optie “‘Voeg toe aan winkelmand-functionaliteit”.

Doorsturen naar de winkelmandpagina na het toevoegen van een product

Naast de zin “Na succesvolle toevoeging gelijk doorsturen naar de winkelmandpagina” kun je een vinkje plaatsen om ervoor te zorgen dat klanten direct worden doorgestuurd naar de winkelmandpagina nadat een product is toegevoegd.

De andere optie die je hier ziet staan heeft geen invloed op dit proces. Je kan hiermee bepalen of de winkelmand knoppen zichtbaar of verborgen zijn op archiefpagina’s.

Doorgaan naar afrekenen in WooCommerce

Persoonlijk vind ik de stap “in winkelmand” in bepaalde situaties onnodig. Het is gelukkig mogelijk om nog een stap verder te gaan dan de standaard opties in WooCommerce.

Wanneer je slechts een aantal producten verkoopt, kan het een handige optie zijn om ervoor te zorgen dat klanten direct doorgaan naar de afrekenpagina. Op deze manier heb je zo min mogelijk tussenstappen en dus afleidingen voor de klant.

Ik zal je hieronder twee manieren laten zien hoe je dit kunt bereiken.

Doorgaan naar afrekenen met WooCommerce opties

Voor deze manier gebruik je eigenlijk toch de basismogelijkheden van WooCommerce, alleen dan op een slimme manier waar je normaal niet snel aan denkt. De eerste stappen zijn hetzelfde als het doorsturen naar de winkelmandpagina.

Ga dus naar “WooCommerce -> Instellingen -> Producten -> Algemeen” en zet een vinkje bij “Na succesvolle toevoeging gelijk doorsturen naar de winkelmandpagina”.

Je moet er nu alleen nog voor zorgen dat de klant niet naar de winkelmandpagina gaat, maar de afrekenpagina. Je kunt dit doen door naar “WooCommerce -> Instellingen -> Geavanceerd -> Pagina-instellingen” te gaan.

Winkelmandpagina aanpassen in afrekenen

De truc is om hier de winkelmandpagina om te toveren naar de afrekenpagina.

Je kunt niet de afrekenpagna tegelijkertijd aan de winkelmandpagina koppelen. De huidige afrekenpagina zal je dus eerst leeg moet halen. Vervolgens klik je onderaan op “Wijzigingen opslaan”. Nu kun je jouw oude afrekenpagina toewijzen aan de winkelmandpagina.

Het is een beetje een dirty manier en heeft verder wel een nadeel. Er bestaat nu geen winkelmandpagina meer. Bezoekers kunnen het aantal producten dus niet meer verlagen. Zorg daarom dus ook dat een product alleen per stuk verkocht kan worden als dit in jouw situatie van toepassing is.

Het andere nadeel is dat de tekst van de knop niet wijzigt en er nog steeds “In winkelmand” staat. Je kunt dit wijzigen in de vertaling. Hoe je dit kunt doen zie je in het artikel WooCommerce in het Nederlands. Hoewel alles dus al wel in het Nederlands is, kun je dit artikel alsnog gebruiken om te achterhalen hoe je het kunt wijzigen.

Winkelmand en afrekenen op één pagina

Om mensen toch het productaantal op de afrekenpagina te laten wijzigen, kun je nog een stap verder gaan en ook de winkelmand op de afrekenpagina plaatsen.

De afrekenpagina hebben we dus ingesteld als winkelmandpagina. Ga naar je afrekenpagina en voeg de volgende shortcode bovenaan toe:

[woocommerce_cart]

Wanneer je de blok editor gebruikt, dan zal het eruit komen te zien zoals hieronder:

Klik vervolgens op de knop “Updaten” om de pagina up-to-date te brengen. Vanaf nu staan jouw winkelmand op de afrekenpagina.

Doorgaan naar afrekenen met behulp van een plugin

Wanneer je niet alle pagina’s op een aparte manier wilt instellen in WooCommerce, kun je ook een extra WordPress plugin installeren.

De plugin die je hiervoor kunt gebruiken heet: WooCommerce Direct Checkout.

Zodra je de plugin hebt geïnstalleerd en geactiveerd, kun je naar “WooCommerce -> Instellingen -> Direct checkout” gaan om alles naar wens in te stellen. Het tabblad “General” is het belangrijkst.

Algemene instellingen van de Direct Checkout plugin

Bij “Add to Cart redirect” kun je voor de optie Yes kiezen. Vervolgens kun je bij “Added to cart redirect to” kiezen voor Checkout. Je zorgt met deze twee opties dat de “In winkelmand” knop op productpagina’s altijd naar de afrekenpagina redirect.

Nu kan ik mij heel goed voorstellen dat je de tekst “In winkelmand” niet meer van toepassing vindt door deze optie. Op de tabbladen Archives en Products kun je dit wijzigen door bij “Replace Add to cart text” te kiezen voor Yes. Vervolgens kun je bij “Replace Add to cart text content” de tekst wijzigen van deze knop.

In winkelmand tekst aanpassen met de Direct Checkout plugin

Verder heb je bij het tabblad “Checkout” ook nog de nodige opties waar je wellicht iets aan hebt.

Checkout opties van de plugin WooCommerce Direct Checkout

Zo kun je onder andere overbodige velden, de privacy policy en algemene voorwaarden tekst weghalen, het verzendadres uitschakelen (voor als je digitale producten hebt) en de gateway icoontjes verwijderen.

Conclusie

Met de standaard opties van WooCommerce kun je al een heel eind komen. Zo kun je probleemloos klanten direct doorsturen naar de winkelmand en met een omweg zelfs direct naar de afrekenpagina.

Wanneer deze manier teveel nadelen heeft voor jouw webshop of als je liever voor meer gebruikersgemak gaat, dan is de plugin WooCommerce Direct Checkout de beste optie.

Ik hoop in elk geval dat het met behulp van dit artikel gelukt is om te realiseren wat je wilde bereiken. Mocht je nog vragen hebben, dan kun je deze natuurlijk altijd stellen in de reacties.

  1. Hi Maikel,

    Vooraf dank voor al je nuttige blogs! Heb er veel aan gehad 😀

    Op dit moment ben ik LearnDash aan het instellen en daar zit ik nu wat mee te stoeien. Zij adviseren namelijk overal om je leeromgeving op een subdomein te plaatsen, en de rest gewoon op je hoofddomein laten. Alleen gaan alle tutorials er vervolgens vanuit dat alles gewoon op één domein staat. Snap je hem nog 😉

    Direct Checkout op mijn hoofddomein was al gelukt met jouw hulp. Maar nu wil ik dus op mijn landingspagina (hoofddomein) een knop die meteen doorlinkt naar de afrekenpagina (subdomein). Een idee hoe ik dit kan aanpakken?

    Thanks alvast!

    • Je zou dan even moeten kijken welke URL je hiervoor kunt gebruiken. Je kunt volgens mij iets als ?add-to-cart=productid toevoegen aan een link, waardoor iets automatisch in het winkelmandje komt te staan. Op die manier zou je het dus kunnen linken.

  2. Hi!
    Om deze stappen te skippen gebruik ik voor mijn engelse website de volgende link:
    /cart/?add-to-cart=0000
    0000 = product id. Het werkt super in het engels maar in het nederlands niet.

    Je zou verwachten:
    /winkelmand/?add-to-winkelmand=0000

    Ik heb verschillende variaties geprobeerd van de add-to maar alles leidt naar een lege winkelmand. Enig idee waarom dit plotseling niet meer werkt?

  3. Ik zou graag willen dat er vanuit mijn landingspagina voor mijn online cursus een link komt met button : “dit wil ik” en als je daarop klikt direct bij het winkelmandje terecht komt met het product. Ik dacht met direct doorgaan de oplossing gevonden te hebben, maar dat is het ook niet. Kan ik ergens een blog vinden hierover?

  4. Ik heb geen zakelijke bankrekening en kan “dus” geen iDeal en Mollie op mijn website integreren. Kan ik WooCommerce dan wel gebruiken voor bestellingen: Als bezoekers dan op “In winkelmand” klikken (tekst wil ik dan wijzigen in bestellen) dat dit dan op een bestelformulier terecht komt dat ik in mijn mail ontvang?

  5. Bedankt voor deze uitgebreide blog! Ik ben al een tijd op zoek om in de shoppagina in het overzicht per product (na de producttitel, afbeelding, korte omschrijving en prijs) ook een winkelwagentje te tonen (gecombineerd met ‘aantal’). Zodat de bezoeker ook vanuit de shop overzichtpagina een item direct in de winkelmand kan leggen en daardoor ongestoord verder kan ‘winkelen’. Kan je aangeven hoe ik dit kan realiseren? Ik gebruik het thema Divi in woocommerce.

  6. Hoi
    Vraagje als een klant iets in het winkelwagentje plaatst komt de tekst succesvol in het winkelwagentje geplaatst dat willen wij veranderen in een andere tekst is dat mogelijk

  7. Hoi Maikel,

    Ik heb een vraagje over het volgende:
    In WooCommerce krijg je standaard altijd bovenaan de pagina een melding te zien wanneer je een product toevoegt aan je winkelmand.

    Is er een mogelijkheid om deze melding te wijzigen? Zo ja, hoe?

    Alvast bedankt,

    Groet, Furkan

  8. Met de standaard mogelijkheid is het of voor alle of voor geen enkel product. Met de WooCommerce Direct Checkout plugin is het volgens mij wel mogelijk per product, maar dan alleen met de betaalde versie van de plugin.

  9. Hoi Maikel,
    Bedankt voor het duidelijke artikel. Nu had ik nog een vraag. Ik verkoop meerder producten in mijn shop, maar nu zou ik graag bij 1 product meteen willen dat mensen kunnen afrekenen. Kan dit ook?

  10. Hallo Maikel!
    Bedankt voor je nuttige blog. 🙂
    Ik heb nog wel een vraag over Woocommerce die jij wellicht kan beantwoorden. Ik ben op dit moment bezig met een eigen webpagina / webshop waarin ik 1 product ga verkopen. Als je in het menu naar de shop gaat kom je op /product/productnaam. 1 product kan alleen maar naar links worden gecentreerd en niet in het midden. Dit vind ik er lelijk uit zien. Weet jij een optie om dit voor elkaar te krijgen? Als je dan vervolgens op het product klikt kom je op de pagina /product-productnaam. Hier zie je meer van het artikel, reviews, etc. Is het mogelijk de link shop zo aan te passen zodat je hier direct op uit komt? Bij 1 artikel is die tussenpagina niet nodig. Ik ben benieuwd of je mij kan helpen! Alvast bedankt!

  11. Dag Maikel,
    Ik heb een vervelend probleem met afrekenen. Als er meer dan 5 producten aan de winkelwagen zijn toegevoegd kun je niet meer naar beneden scrollen voor het kopje afrekenen. Als je op winkelwagen klikt krijg je de producten die er in zitten onder elkaar in beeld, maar naar afrekenen scrollen is geen mogelijkheid.Klanten kunnen dus wel de producten aan de winkelwagen toevoegen maar met geen mogelijkheid afrekenen.
    Hoe kan ik dit oplossen?

    • Dit zal een fout in het thema zijn of wellicht heb je andere designmogelijkheden voor de winkelweergave in het menu. Ik zou dus eerst kijken of er een andere weergave tussen de opties staat. Anders zal je het met CSS moeten corrigeren door alles kleiner te maken, zodat er meer items onder elkaar passen en het in beeld blijft.

Geef een reactie