Maar met de nieuwe Checkout widget in Elementor Pro<\/a> kun je nu je afrekenpagina helemaal zelf samenstellen met Elementor’s visuele interface en opties zonder code. Deze widget werkt samen met de Elementor Cart<\/a> en My Account<\/a> widgets om je te helpen alle belangrijke pagina’s van je winkel te ontwerpen.<\/p>\n\n In deze tutorial leer je hoe je Elementor<\/a> Pro’s Checkout widget gebruikt om de afrekenpagina van je winkel aan te passen en te optimaliseren zonder Elementor te verlaten.<\/p>\n\n Daarna delen we ook nog wat extra tips over hoe je WooCommerce action hooks kunt gebruiken om de afrekenpagina verder aan te passen. <\/p>\n\n Hoewel je geen code nodig hebt als je Elementor Pro’s Checkout widget gebruikt, kunnen deze action hooks handig zijn als je aangepaste content aan je afrekenpagina wilt toevoegen, zoals een set vertrouwensbadges die onder de creditcardvelden verschijnen.<\/p>\n\n Als je liever een videotutorial bekijkt, kun je de video hierboven bekijken over hoe je de Elementor Checkout widget gebruikt. <\/p>\n\n Anders kun je verder lezen voor de volledige tekstgebaseerde tutorial die parallel loopt aan de video, evenals wat extra tips over het gebruik van WooCommerce action hooks die we niet in de video hebben behandeld.<\/p>\n\n De WooCommerce afrekenpagina is de pagina waar shoppers hun bestellingen afronden door hun adressen, contactgegevens, factuurinformatie enzovoort in te voeren.<\/p>\n\n Het is een essenti\u00eble pagina voor elke winkel, dus het is belangrijk dat je ‘m optimaliseert voor conversies en zo gebruiksvriendelijk mogelijk maakt.<\/p>\n\n Met de Elementor Checkout widget kun je de afrekenpagina van je winkel volledig aanpassen vanuit Elementor. Dit helpt je een consistent ontwerp te cre\u00ebren met de rest van je winkel en belangrijke details op je pagina te optimaliseren.<\/p>\n\n Je kunt kleuren en typografie<\/a> veranderen, afstand aanpassen, sectie- en formuliertekst wijzigen, en meer. Je kunt wijzigingen aanbrengen voor de hele checkout of je kunt gedetailleerde opties inschakelen om verschillende stijlen toe te passen op specifieke delen van je checkout.<\/p>\n\n Als je bijvoorbeeld de aandacht wilt vestigen op het kortingsveld, kun je speciale kleuren, een rand enzovoort toevoegen – allemaal zonder code.<\/p>\n\n Laten we nu overgaan naar een gedetailleerde handleiding over hoe je de Checkout widget in Elementor Pro<\/a> kunt gebruiken om de afrekenpagina van je winkel aan te passen.<\/p>\n\n Nogmaals, als je deze tutorial liever in videoformaat bekijkt, kun je ‘m hierboven checken. Beide tutorials bevatten dezelfde info.<\/p>\n\n Wanneer je een WooCommerce-winkel maakt<\/a>, cre\u00ebert WooCommerce automatisch een afrekenpagina voor je winkel die de WooCommerce-afrekenshortcode<\/a> gebruikt.<\/p>\n\n In deze tutorial kun je voor het gemak dezelfde pagina gebruiken. Alleen, in plaats van te vertrouwen op de WooCommerce-shortcode, ga je de pagina in Elementor bewerken en de Checkout-widget toevoegen.<\/p>\n\n Om te beginnen, ga je naar de lijst met Pagina’s<\/strong> in je WordPress-dashboard en zoek je de afrekenpagina. WooCommerce markeert deze automatisch met een identificatie die zegt “Afrekenpagina”.<\/p>\n\n Als je de juiste pagina hebt gevonden, klik je op de knop Bewerken<\/strong> om de WordPress-editor te openen. <\/p>\n\n Eenmaal in de editor, klik je op de knop Bewerken met Elementor<\/strong> om Elementor voor deze pagina in te schakelen en de Elementor-editor te starten.<\/p>\n\n Als je de standaard winkelwagenpagina in Elementor opent, zou je een heel simpel ontwerp moeten zien. De enige elementen op de pagina zullen de [woocommerce_checkout] shortcode zijn binnen een Elementor Text Editor-widget.<\/p>\n\n Om Elementor te gebruiken om je afrekenpagina te beheren, moet je eerst de bestaande widget\/shortcode verwijderen:<\/p>\n\n Voeg vervolgens de Elementor Checkout-widget toe op diezelfde plek. Zodra je de Checkout-widget toevoegt, zie je een live preview van de afrekenpagina direct in de editor.<\/p>\n\n Let op<\/strong> – omdat de Elementor-editor je een visuele preview geeft die perfect overeenkomt met wat de bezoekers van je website zullen zien, wil je wat items aan je winkelwagen toevoegen zodat je kunt zien hoe het daadwerkelijke afrekenproces eruit ziet. Dit is alles wat je hoeft te doen:<\/p>\n\n Zodra je Elementor herlaadt, zouden die items moeten verschijnen in het afreken-overzicht terwijl je aan je ontwerp werkt.<\/p>\n\n Nu is het tijd om te beginnen met aanpassen.<\/p>\n\n Om te beginnen, open je de instellingen voor de Checkout-widget in de Elementor-zijbalk.<\/p>\n\n Laten we eerst alle instellingen in het Inhoud-tabblad van de widget doornemen.<\/p>\n\n Eerst kun je het gedeelte Algemeen<\/strong> gebruiken om te kiezen tussen een lay-out met \u00e9\u00e9n kolom of twee kolommen voor je afrekenpagina.<\/p>\n\n Als je kiest voor een lay-out met twee kolommen, kun je de rechterkolom ook sticky maken. Als je de sticky rechterkolom inschakelt, krijg je een extra optie om een offset toe te voegen, wat helpt voorkomen dat je header overlapt met de kolom.<\/p>\n\n In het gedeelte Facturerings- en verzendgegevens<\/strong> kun je de details van het facturerings- en verzendformulier aanpassen.<\/p>\n\n Je ziet deze velden samen als je de facturerings- en verzendgegevens in de instellingen van WooCommerce hetzelfde hebt ingesteld. Je kunt dit inschakelen door naar WooCommerce \u2192 Instellingen \u2192 Verzending<\/strong> te gaan en Forceer verzending naar het factuuradres van de klant<\/strong> te selecteren. Anders zie je ze apart.<\/p>\n\n Eerst kun je de sectietitel en uitlijning voor dit gedeelte instellen.<\/p>\n\n Vervolgens kun je de instellingen voor elk individueel veld openen om de labels en placeholders aan te passen.<\/p>\n\n In het gedeelte Aanvullende informatie<\/strong> kun je dit deel van de afrekenpagina aanpassen. Standaard is dit waar kopers speciale bestelmemo’s kunnen achterlaten, hoewel je mogelijk aanvullende details ziet, afhankelijk van de instellingen van je winkel.<\/p>\n\n Net als bij de andere delen van je afrekenpagina kun je de uitlijning en labels van dit gedeelte aanpassen.<\/p>\n\n Of je hebt ook de optie om dit gedeelte te verbergen op de afrekenpagina, wat handig kan zijn als kopers geen aangepaste notities hoeven achter te laten.<\/p>\n\n Met de instellingen voor Je bestelling<\/strong> kun je het bestellingsoverzicht van de afrekenpagina aanpassen. Als je een lay-out met twee kolommen gebruikt, verschijnt dit gedeelte bovenaan de rechterkolom. In een lay-out met \u00e9\u00e9n kolom verschijnt het onder de facturerings- en verzendgegevens.<\/p>\n\n De Coupon <\/strong>instellingen laten je ook de titel en uitlijning van het kortingsbon-gedeelte aanpassen. Je krijgt ook de optie om de linktekst voor het toepassen van de kortingscode aan te passen. Dit kan je helpen een meer geoptimaliseerde en gebruiksvriendelijke ervaring te cre\u00ebren voor shoppers die kortingsbonnen gebruiken.<\/p>\n\n Met de Betaling<\/strong>instellingen kun je de uitlijning van de koopknop aanpassen en ook het bericht en de linktekst voor de algemene voorwaarden aanpassen.<\/p>\n\n Om het bericht met de algemene voorwaarden te zien, moet je de pagina met algemene voorwaarden hebben ingesteld in je WooCommerce-instellingen. Om het makkelijker te maken, kun je deze pagina selecteren zonder Elementor te verlaten:<\/p>\n\n Als je gastafrekenen toestaat in de WooCommerce-instellingen, krijg je ook een extra instellingengedeelte genaamd Terugkerende klant<\/strong> waarmee je het bericht kunt aanpassen dat terugkerende klanten vraagt om in te loggen op hun bestaande accounts.<\/p>\n\n Vervolgens kun je naar het Stijl<\/strong>tabblad van de instellingen van de Afreken-widget gaan om de stijl en het ontwerp van de afrekenpagina verder aan te passen, inclusief ervoor zorgen dat het past bij de rest van het ontwerp van je winkel.<\/p>\n\n Hier zijn de algemene ontwerpopties die je kunt configureren in de verschillende instellingengebieden…<\/p>\n\n In de Secties<\/strong>instellingen kun je de algemene stijl van alle verschillende afrekendelen beheren. <\/p>\n\n Als je bijvoorbeeld de achtergrondkleur verandert, zal dit de achtergrond van alle secties be\u00efnvloeden. Je kunt ook de rand en tussenruimte naar wens aanpassen.<\/p>\n\n In de Typografie<\/strong>instellingen kun je de kleuren en typografie van de meeste tekst op je afrekenpagina aanpassen, inclusief titels, secundaire titels, beschrijvingen, berichten, keuzerondjes, selectievakjes en meer.<\/p>\n\n Het enige stukje typografie dat je hier niet kunt aanpassen zijn je formulieren, wat je in de volgende sectie zult doen.<\/p>\n\n In de Formulieren<\/strong>instellingen kun je alles beheren van de formulieren en formuliervelden op je afrekenpagina, wat voornamelijk invloed heeft op de facturerings-\/verzendvelden en het kortingsbonformulier.<\/p>\n\n Je kunt de afstand tussen kolommen en rijen voor de verschillende formuliervelden aanpassen. Je kunt ook de typografie van labels en velden aanpassen, evenals de tussenruimte, randen en achtergronden. <\/p>\n\n Daarnaast krijg je ook een optie om de kortingsbonknop te stylen, net als elke andere knop op je site.<\/p>\n\n In Besteloverzicht<\/strong> kun je de rijen beheren, wat invloed heeft op de tussenruimte in de lijst met items in het winkelmandje van een klant.<\/p>\n\n Je kunt ook de kleuren en typografie van de verschillende overzichtsitems beheren. Je zou bijvoorbeeld \u00e9\u00e9n typografie-instelling kunnen gebruiken voor de items en een andere voor de besteltotalen.<\/p>\n\n In de Koopknop<\/strong>instellingen kun je de koopknop volledig aanpassen, inclusief typografie, kleuren, tussenruimte, randen en meer.<\/p>\n\n Dit is waarschijnlijk de belangrijkste knop op de afrekenpagina, dus je wilt er zeker van zijn dat deze de aandacht trekt en past bij de rest van je ontwerp.<\/p>\n\n Ten slotte laat het Aanpassen<\/strong>item je individuele stijlcontroles toevoegen voor specifieke delen van je afrekenpagina. Je kunt ze toevoegen voor de volgende gebieden:<\/p>\n\n Je zou bijvoorbeeld het besteloverzicht kunnen laten opvallen van de rest van de afrekenpagina door een aangepaste rand toe te voegen. <\/p>\n\n Je kunt dit doen door de aanpassingsinstellingen voor het besteloverzichtgebied in te schakelen en ze te configureren volgens jouw voorkeuren. <\/p>\n\n Nu je klaar bent met het aanpassen van de afrekenpagina voor desktopgebruikers, wil je overschakelen naar de responsieve<\/a>modus, om te zien of je aanpassingen moet maken voor mobiele of tabletbezoekers<\/p>\n\n Zoals bij alle ontwerpen die je maakt met Elementor, is je afrekenpagina-ontwerp standaard responsief. <\/p>\n\n Je kunt trouwens ook Elementor’s mobiele instellingen gebruiken om het design aan te passen als dat nodig is. Je hoeft alleen maar te zoeken naar het apparaaticoontje naast de instellingen die je kunt aanpassen voor verschillende apparaten.<\/p>\n\n Bijvoorbeeld, misschien wil je de afstand tussen verschillende elementen een beetje aanpassen voor je mobiele design.<\/p>\n\n Deze laatste stap is helemaal optioneel, maar het is goed om te weten dat je ook belangrijke WooCommerce pagina-toewijzingen kunt beheren vanuit het Elementor Site-instellingen gebied<\/a>.<\/p>\n\n Dit kan handig zijn als je een nieuwe pagina hebt gemaakt voor je afrekenpagina in plaats van de standaardpagina te gebruiken die WooCommerce heeft aangemaakt.<\/p>\n\n Je kunt deze opties vinden in het WooCommerce<\/strong> tabblad van het normale Site-instellingen gebied. Je vindt de WooCommerce optie onder de Instellingen<\/strong> sectie.<\/p>\n\n Voor extra aanpassingen aan de WooCommerce afrekenpagina kun je code gebruiken en de talrijke WooCommerce afreken action hooks benutten. <\/p>\n\n Dit kan vooral handig zijn als je nieuwe content wilt toevoegen aan de afrekenpagina, zoals het invoegen van vertrouwensbadges onder de betaalknop.<\/p>\n\n Het fijne van deze aanpak is dat het nog steeds werkt met de Elementor Afreken-widget, wat het een geweldige aanvulling maakt op Elementor voor extra wijzigingen.<\/p>\n\n WordPress action hooks laten je in wezen PHP gebruiken om content op verschillende delen van de afrekenpagina in te voegen. Je kunt bijvoorbeeld een nieuw tekstbericht toevoegen, een afbeelding invoegen (misschien een vertrouwensbadge), enzovoort.<\/p>\n\n In totaal biedt WooCommerce 16 verschillende action hooks voor de afrekenpagina.<\/p>\n\n De eerste negen hooks zijn altijd beschikbaar:<\/p>\n\n De laatste zeven hooks zijn mogelijk wel of niet beschikbaar, afhankelijk van je WooCommerce instellingen. Als je bijvoorbeeld geen registratie hebt ingeschakeld op de afrekenpagina, kun je de action hook voor het registratieformulier niet gebruiken:<\/p>\n\n Om te begrijpen waar deze hooks content zullen toevoegen aan de afrekenpagina, onderhoudt Business Bloomer een uitstekende visuele gids voor elke locatie<\/a>:<\/p>\n\n Om content in te voegen met een action hook, moet je een codefragment toevoegen aan het functions.php<\/strong> bestand van je child theme<\/a> of via een plugin zoals Code Snippets<\/a>. <\/p>\n\n Omdat je code aan je site toevoegt, raden we je sterk aan om een backup te maken<\/a> voordat je verdergaat en\/of de wijzigingen te testen op een staging site<\/a>.<\/p>\n\n Kies eerst de hooklocatie waar je content wilt toevoegen. <\/p>\n\n Laten we bijvoorbeeld zeggen dat je een set vertrouwensbadges wilt toevoegen onder de “Plaats bestelling” knop. Daarvoor zou je de woocommerce_review_order_after_submit<\/strong> hook gebruiken.<\/p>\n\n Vervolgens voeg je een codefragment toe zoals dit:<\/p>\n\n add_action( ‘action_name’, ‘your_function_name’ );<\/p>\n\n function your_function_name() {<\/p>\n\n \/\/ Jouw code<\/p>\n\n }<\/p>\n\n Om bijvoorbeeld een vertrouwensbadge-afbeelding toe te voegen, zou de code er zo uit kunnen zien:<\/p>\n\n add_action( ‘woocommerce_review_order_after_submit’, ‘display_trust_badges’ );<\/p>\n\n function display_trust_badges() {<\/p>\n\n echo ‘ ;}<\/p>\n\n Hieronder zie je dat de vertrouwensbadges onder de bestelknop verschijnen, zelfs terwijl je werkt met de Afreken-widget in de Elementor-interface:<\/p>\n\n Voordat je de wijzigingen aan je afrekenpagina live zet, raden we je sterk aan om alles te testen om er zeker van te zijn dat er geen problemen zijn. Laten we eerlijk zijn, alles wat de afrekenpagina van je winkel in de weg zit, heeft direct een negatief effect op je omzet.<\/p>\n\n Veel WooCommerce betaalmethodes hebben testmodi die je kunt gebruiken om bestellingen te plaatsen. Dit geldt zowel voor de offici\u00eble Stripe gateway plugin<\/a> als de offici\u00eble PayPal gateway plugin<\/a>, en ook voor WooCommerce Payments<\/a>. Al die links in de vorige zin brengen je naar de juiste documentatiepagina voor de testfunctionaliteit van die gateway.<\/p>\n\n Of je kunt ook de gratis WC Order Test plugin<\/a> gebruiken, die een nieuwe “Order Test” betalingsgateway toevoegt. Je kunt deze gateway instellen door naar WooCommerce \u2192 Instellingen \u2192 Betalingen<\/strong> te gaan.<\/p>\n\n Zodra je een testbetalingsgateway hebt ingeschakeld, kun je wat testbestellingen plaatsen om er zeker van te zijn dat alle afrekenvelden werken en dat geen van je inhoud- of ontwerpwijzigingen het afrekenproces verstoren.<\/p>\n\n We raden aan om zowel op desktop als op mobiele apparaten te testen.<\/p>\n\n Met de Checkout widget in Elementor Pro kun je nu de WooCommerce afrekenpagina volledig aanpassen met Elementor’s visuele, drag-and-drop ontwerp.<\/p>\n\n Voor de meeste mensen is Elementor alles wat je nodig hebt, omdat je er kleuren, typografie, tekst, spati\u00ebring, randen en meer mee kunt aanpassen.<\/p>\n\n Als je nog verder wilt gaan en nieuwe inhoud aan je afrekenpagina wilt toevoegen, kun je ook gebruik maken van WooCommerce’s ingebouwde action hooks, die volledig compatibel zijn met de Elementor Checkout widget.<\/p>\n\n Het mooiste is dat Elementor je niet beperkt tot alleen het aanpassen van de afrekenpagina.<\/p>\n\n Elementor WooCommerce Builder<\/a> kan je ook helpen andere delen van je winkel aan te passen met Elementor’s visuele, drag-and-drop builder. Je kunt bijvoorbeeld ook de WooCommerce winkelwagenpagina, de WooCommerce enkele productpagina<\/a>, de WooCommerce Mijn Account pagina en meer aanpassen.<\/p>\n\n Heb je nog vragen over het aanpassen van je WooCommerce afrekenpagina met Elementor of action hooks? Laat het ons weten in de reacties!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Met de nieuwe Checkout widget in Elementor Pro kun je nu je afrekenpagina helemaal zelf samenstellen met Elementor’s visuele interface en opties zonder code. Deze widget werkt samen met de Elementor Cart en My Account widgets om je te helpen alle belangrijke pagina’s van je winkel te ontwerpen. Check hoe je ‘m stap voor stap gebruikt.<\/p>\n","protected":false},"author":129304,"featured_media":113857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[290,366],"tags":[426],"marketing_persona":[47,51,50],"marketing_intent":[49],"class_list":["post-124575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-nl","category-woocommerce-nl","tag-video"],"acf":[],"yoast_head":"\nInhoudsopgave<\/h4>\n\n\n\n
Hoe werkt de Elementor Pro Checkout Widget?<\/h2>\n\n
Hoe pas je de WooCommerce afrekenpagina aan met Elementor<\/h2>\n\n
1. Bewerk de standaard winkelwagenpagina van je winkel in Elementor<\/h3>\n\n
2. Vervang de WooCommerce-afrekenshortcode door de Elementor Checkout-widget<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-1-delete-checkout-shortcode-1-1024x517.jpg\")
<\/figure>\n\n3. Pas de algemene instellingen van je afrekenpagina aan<\/h3>\n\n
Algemeen – Lay-out met \u00e9\u00e9n kolom of twee kolommen<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-2-column-layout-1024x516.jpg\")
<\/figure>\n\nFacturerings- en verzendgegevens<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-3-billing-shipping-fields-1024x532.jpg\")
<\/figure>\n\nAanvullende informatie<\/h4>\n\n
Je bestelling<\/h4>\n\n
Kortingsbon<\/h4>\n\n
Betaling<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-4-terms-and-conditions-1024x601.jpg\")
<\/figure>\n\nTerugkerende klant<\/h4>\n\n
4. Pas de stijlinstellingen van je afrekenpagina aan<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-5-style-settings-1024x551.jpg\")
<\/figure>\n\nSecties<\/h4>\n\n
Typografie<\/h4>\n\n
Formulieren<\/h4>\n\n
Besteloverzicht<\/h4>\n\n
Koopknop<\/h4>\n\n
Aanpassen<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-6-order-summary-1024x508.jpg\")
<\/figure>\n\n5. Pas je afrekenpagina aan voor mobiele shoppers<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-7-mobile-design-1024x662.jpg\")
<\/figure>\n\n6. Pas WooCommerce Pagina-toewijzingen aan in Site-instellingen indien nodig<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-8-site-settings-1024x503.jpg\")
<\/figure>\n\nHoe je de WooCommerce Afrekenpagina aanpast met code<\/h2>\n\n
Wat zijn WooCommerce Afreken Action Hooks?<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-code-1-hook-locations-1024x998.png\")
<\/figure>\n\nHoe gebruik je WooCommerce Afreken Action Hooks<\/h3>\n\n
![](\"trust-badges.png\"\/)
‘<\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/trust-badge-in-checkout-widget-1024x692.jpg\"){kind=icon}
<\/figure>\n\nHoe test je je WooCommerce Afrekenpagina<\/h2>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/woocommerce-order-test-gateway-for-checkout-page-1024x800.png\")
<\/figure>\n\nBegin met het aanpassen van je WooCommerce pagina’s met Elementor<\/h2>\n\n