{"id":1088,"date":"2022-05-31T23:11:44","date_gmt":"2022-05-31T22:11:44","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/7-de-checkout\/"},"modified":"2023-05-21T21:58:02","modified_gmt":"2023-05-21T20:58:02","slug":"7-de-checkout","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=7-de-checkout","title":{"rendered":"8. De checkout"},"content":{"rendered":"<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n<p style=\"\">Denk eraan om bij de Mollie instellingen (WooCommerce &gt; Instellingen) de live API sluitel in te voeren en de testmodus uit te zetten!<\/p>\n<p>Alles wat in de video wordt uitgelegd kan je hieronder ook in tekstvorm terugvinden. Altijd handig wanneer je snel iets wil opzoeken.<\/p>\n<h2>Inleiding<\/h2>\n<p>De checkout pagina is de laatste belangrijke pagina die nodig is voor je shop. Op deze pagina gaan je klanten effectief de aankoop afronden en betalen.<\/p>\n<p>Opnieuw vind ik de standaard WooCommerce pagina niet top omdat je er weinig controle over hebt, daarom gaan we een nieuwe checkout pagina maken met een gemakkelijke template van Cartflows.<\/p>\n<p>Moest je het nog niet gedaan hebben: <a href=\"https:\/\/leeromgeving.fixityourself.be\/course\/3-plugins-waarvoor-dient-het-belangrijke-plugins-installeren\/\" target=\"_blank\" style=\"outline: none;\" rel=\"noopener\">installeer en activeer zeker eerst de plugin Cartflows<\/a>.<\/p>\n<h2>Een store checkout maken in Cartflows<\/h2>\n<ul>\n<li>Log in op het WP dashboard<\/li>\n<li style=\"\">Klik links in het menu op <em>Cartflows<\/em><\/li>\n<li>Klik op <em>Store Checkout<\/em><\/li>\n<li style=\"\">Klik vervolgens op de oranje knop <em>Import ready template<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2095\" width=\"652\" data-init-width=\"2008\" height=\"1012\" data-init-height=\"1012\" title=\"Screenshot 2023-05-21 at 21.29.33\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-21.29.33.png\" data-width=\"652\" style=\"\"><\/span><\/p>\n<ul>\n<li>Kies uit Store Checkout 01, 02, 03 of 04<\/li>\n<li>In het voorbeeld gebruiken we Store Checkout 02<\/li>\n<li>Klik bij de checkout naar keuze op <em>View Steps<\/em><\/li>\n<\/ul>\n<p style=\"\">Je ziet nu een voorbeeld van de checkout- en de thank you page. Als je nog steeds tevreden bent, klik dan rechts bovenaan op de oranje knop <em>Import Flow <\/em>(dit duurt enkele seconden).<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2096\" width=\"758\" data-init-width=\"2444\" height=\"1746\" data-init-height=\"1746\" title=\"Screenshot 2023-05-21 at 21.33.03\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-21.33.03.png\" data-width=\"758\"><\/span><\/p>\n<h2 style=\"\">De Store Checkout aanpassen<\/h2>\n<ul>\n<li>Klik bij <em>S<\/em><em>tore Checkout &gt; All steps<\/em> op <em>Edit<\/em><\/li>\n<li style=\"\">Klik vervolgens op de oranje knop&nbsp;<em>Edit design<\/em>\u200b\u200b\u200b\u200b<\/li>\n<li style=\"\">De Elementor editor zal geopend worden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2097\" width=\"371\" data-init-width=\"2350\" height=\"978\" data-init-height=\"978\" title=\"Screenshot 2023-05-21 at 21.37.41\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-21.37.41.png\" data-width=\"371\" style=\"\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"2098\" width=\"316\" data-init-width=\"1542\" height=\"702\" data-init-height=\"702\" title=\"Screenshot 2023-05-21 at 21.37.59\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-21.37.59.png\" data-width=\"316\" style=\"\"><\/span><\/p>\n<p style=\"\">Een kant-en-klare template staat klaar in Elementor, enkel de kleuren, typografie,&#8230; moeten nog aangepast worden. Zoals bij elke andere template\/pagina, kan je ook nog blokken toevoegen of verwijderen.<\/p>\n<p style=\"\">Dubbelcheck of er nog met secties gewerkt wordt in de template of al met containers. Indien nog met secties: bekijk de video hieronder om het om te vormen naar containers.<\/p>\n<p>Pas alles aan waarvan je het zelf nodig acht:<\/p>\n<ul>\n<li>Logo aanpassen in de banner<\/li>\n<li>Tekstjes vertalen in de banner<\/li>\n<li>Uit de banner halen wat je er niet in wil<\/li>\n<li>Achtergronden aanpassen (een kleur of een afbeelding) van de banner en de secties eronder<\/li>\n<li>Typografie, kleuren&#8230; van het checkout form aanpassen<\/li>\n<li>Primaire kleuren, invulvelden, knoppen,&#8230; kortom: alles van het checkout form kan je customizen<\/li>\n<\/ul>\n<p>Je weet al hoe dit werkt ondertussen, kijk goed bij elk element in het tabblad Inhoud en Stijl en doe daar de nodige aanpassingen.<\/p>\n<ul>\n<li>Update je pagina als je klaar bent en sluit het venster<\/li>\n<\/ul>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n<h2 style=\"\">De checkout items vertalen<\/h2>\n<ul>\n<li>Klik Bij <em>Store Checkout &gt; Store Checkout 2<\/em> op <em>Settings<\/em><\/li>\n<li style=\"\">Vertaal alles onder de tab <em>Checkout settings<\/em><\/li>\n<li style=\"\">Klik daarna rechts bovenaan op <em>Save Settings<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2100\" width=\"583\" data-init-width=\"2112\" height=\"1740\" data-init-height=\"1740\" title=\"Screenshot 2023-05-21 at 22.12.40\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.12.40.png\" data-width=\"583\" style=\"\"><\/span><\/p>\n<h2 style=\"\">De checkout velden aanpassen<\/h2>\n<p>In de standaard checkout staat wel het veld Bedrijf, maar geen plaats om een btw-nummer in te vullen. Gelukkig kan je in Cartflows alle velden aanpassen.<\/p>\n<ul>\n<li>Klik op&nbsp;<em>Cartflows &gt; Store Checkout &gt; Store Checkout 02 &gt; Edit<\/em><\/li>\n<li>Vink Enable custom field editor aan<\/li>\n<li style=\"\">De velden worden zichtbaar onderaan<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2106\" width=\"464\" data-init-width=\"1770\" height=\"1576\" data-init-height=\"1576\" title=\"Screenshot 2023-05-21 at 22.42.29\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.42.29.png\" data-width=\"464\" style=\"\"><\/span><\/p>\n<ul>\n<li>Sleep het veld &#8220;Appartment, suite, unit, etc&#8221; onder <em>Company name<\/em><\/li>\n<li>Vouw het veld &#8220;Appartment, suite, unit, etc&#8221; open en wijzig het <em>Field label <\/em>en de <em>Placeholder<\/em> beide naar &#8220;btw-nummer&#8221;<\/li>\n<li style=\"\">Vertaal eventueel de andere velden nog en klik onderaan op <em>Save Settings<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2107\" width=\"383\" data-init-width=\"1156\" height=\"1392\" data-init-height=\"1392\" title=\"Screenshot 2023-05-21 at 22.45.30\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.45.30.png\" data-width=\"383\" style=\"\"><\/span><\/p>\n<h2 style=\"\">De Thank You page template aanpassen<\/h2>\n<ul>\n<li>Klik bovenaan in het menu opnieuw op <em>Store Checkout<\/em><\/li>\n<li>Klik vervolgens bij <em>Store Checkout Thank you<\/em> op <em>Edit<\/em><\/li>\n<li>Klik daarna op de oranje knop <em>Edit design<\/em><\/li>\n<li style=\"\">De Elementor editor zal geopend worden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2101\" width=\"371\" data-init-width=\"2010\" height=\"920\" data-init-height=\"920\" title=\"Screenshot 2023-05-21 at 22.21.20\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.21.20.png\" data-width=\"371\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"2102\" width=\"371\" data-init-width=\"1848\" height=\"724\" data-init-height=\"724\" title=\"Screenshot 2023-05-21 at 22.22.06\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.22.06.png\" data-width=\"371\"><\/span><\/p>\n<ul>\n<li>Converteer indien nodig eerst de secties naar containers (<a href=\"#tve-jump-1883ffc6f63\" style=\"outline: none;\">klik hier voor instructies<\/a>)<\/li>\n<li>Doe eerst een testbestelling in je shop zodat je de thank you page deftig kan opmaken<\/li>\n<li style=\"\">Vernieuw daarna de thank you page pagina in Elementor. Dit zal er daarna zo uitzien<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2103\" width=\"631\" data-init-width=\"2104\" height=\"3046\" data-init-height=\"3046\" title=\"screencapture-shop-fixityourself-be-step-store-checkout-thank-you-02-2023-05-21-22_28_05\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/screencapture-shop-fixityourself-be-step-store-checkout-thank-you-02-2023-05-21-22_28_05.png\" data-width=\"631\" style=\"\"><\/span><\/p>\n<p>Vanaf dit punt weet je wat te doen: je kan elk element op de pagina aanpassen (instellingen, typografie, kleuren, uitlijning, achtergronden&#8230;). Zorg ervoor dat alles mooi in je huisstijl past.<\/p>\n<ul>\n<li>Update je pagina als je klaar bent en sluit het venster<\/li>\n<\/ul>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n<h2 style=\"\">Store checkout instellingen<\/h2>\n<ul>\n<li>Klik op <em>Cartflows &gt; Settings &gt; Store Checkout<\/em><\/li>\n<li style=\"\">Vink het vakje &#8220;Override Store Checkout&#8221; aan<\/li>\n<li style=\"\">Klik op <em>Save Settings<\/em><\/li>\n<li style=\"\">De Cartflows checkout gaat nu de standaard WooCommerce checkout overschrijven<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2104\" width=\"482\" data-init-width=\"1346\" height=\"766\" data-init-height=\"766\" title=\"Screenshot 2023-05-21 at 22.33.03\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.33.03.png\" data-width=\"482\" style=\"\"><\/span><\/p>\n<ul>\n<li>Klik bovenaan in het menu op Store Checkout<\/li>\n<li>Vink de toggle bij Enable Story Checkout aan<\/li>\n<li style=\"\">Nu is de nieuwe checkout ook effectief geactiveerd<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"2105\" width=\"616\" data-init-width=\"1998\" height=\"920\" data-init-height=\"920\" title=\"Screenshot 2023-05-21 at 22.36.25\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-21-at-22.36.25.png\" data-width=\"616\" style=\"\"><\/span><\/p>\n<h2 style=\"\">Je winkel uittesten<\/h2>\n<p>Test je winkel uit door een testbestelling te plaatsen. Dit doe je door iets in het winkelmandje te steken, naar de checkout te gaan, alles in te vullen dat nodig is, klikken op betalen en doe op de Mollie betaalpagina alsof je hebt betaald (paid).<\/p>\n<p>Als alles goed is gegaan:<\/p>\n<ul>\n<li>Kom je uit op je nieuw winkelmandjes pagina<\/li>\n<li>Kom je uit op je nieuwe checkout pagina<\/li>\n<li>Krijg je na de bestelling je nieuwe thank you pagina te zien<\/li>\n<li>Krijg je als verkoper een mail in je inbox<\/li>\n<li>Krijgt de klant ook een mail in zijn\/haar inbox<\/li>\n<li>Bij <em>WooCommerce &gt; Bestellingen<\/em> staat de bestelling ertussen<\/li>\n<li>Als je met Sendcloud werkt: een nieuwe bestelling is in Sendcloud aangekomen<\/li>\n<\/ul>\n<p style=\"\">Denk eraan om bij de Mollie instellingen (WooCommerce &gt; Instellingen) de live API sluitel in te voeren en de testmodus uit te zetten!<\/p>\n<p style=\"\">Denk eraan om je pagina&#8217;s responsief te maken!<\/p>\n<h2 style=\"\">Mijn Account pagina<\/h2>\n<p style=\"\">Wil je ook nog graag een Mijn Account pagina? Volg dan de instructies in de video hieronder.<\/p>\n<p style=\"\">Denk eraan om ook nog bij WooCommerce &gt; Instellingen &gt; Geavanceerd de juiste pagina te selecteren bij &#8220;Mijn Account pagina&#8221;&nbsp;<\/p>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n","protected":false},"template":"","class_list":["post-1088","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-module-9-een-webshop-maken","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/1088"}],"collection":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson"}],"about":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/types\/tva_lesson"}],"wp:attachment":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}