Wil je dat je checkoutpagina eruitziet als de rest van je winkel in plaats van een standaardformulier? Easy Digital Downloads werkt met de Elementor-paginabuilder, zodat je elk deel van je checkout kunt herstylen zonder code aan te raken.
Deze handleiding leidt je door het EDD Checkout-blok, de EDD Checkout-widget in Elementor en de individuele checkout-widgets die je gebruikt om de pagina te herstylen en te herschikken.
Vereisten: De onderstaande Elementor-widgets vereisen dat de Elementor-plugin is geïnstalleerd en geactiveerd, en dat de Contain-functie is ingesteld op Actief onder het scherm Elementor Editor » Instellingen » Functie.
Beginnen met een Checkout-sjabloon
Als u liever geen afrekenpagina vanaf nul bouwt, kunt u een kant-en-klare afreken-sjabloon importeren en deze vervolgens bewerken met alles hierboven. Elk geïmporteerd sjabloon plaatst de vier afreken-widgets voor u, dus de stappen voor styling en herordenen in deze handleiding zijn er direct op van toepassing.
Sjablonen worden geleverd met tijdelijke koppen en voorbeeldteksten rond de live betaalvelden, dus het vervangen van die tekst door uw eigen tekst is meestal de eerste bewerking die u zult doen.
Het EDD Checkout-blok configureren
De Afrekenpagina wordt voor u aangemaakt wanneer u Easy Digital Downloads activeert. Deze staat in uw WordPress Pagina's lijst als Afrekenen, en gebruikt het EDD Afrekenen-blok.
Opmerking: Het EDD Afrekenen-blok en de instellingen ervan zijn beschikbaar voor elke gebruiker, ongeacht of u Elementor gebruikt of niet.
Open de Afrekenpagina en de blokinstellingen verschijnen aan de rechterkant.
Begin met de instelling Voorbeeld als Gast, waarmee u de ervaring kunt controleren die zowel bezoekers die voor het eerst komen als terugkerende klanten krijgen. U krijgt ook een realtime voorbeeld van de afrekenpagina en het creditcardformulier direct in de editor.
Kies een van uw producten uit het menu Selecteer een Download om te zien hoe het formulier eruitziet met iets in de winkelwagen.
De eigen instellingen van het blok laten u de lay-out wijzigen, de grootte van de winkelwagen-miniatuur aanpassen en het kortingsformulier weergeven of verbergen.
Je Checkout bewerken met Elementor
Elementor bouwt zijn eigen EDD Afrekenen-widget, die u veel diepere ontwerpcontrole geeft dan alleen het blok.
Toegang krijgen tot de Elementor-editor
Met de Elementor-plugin geïnstalleerd en geactiveerd, biedt uw Afrekenpagina een optie Bewerken met Elementor.
Als u erop klikt, opent de Elementor-editor.
De EDD Checkout-widget toevoegen
Zoek in het elementenpaneel aan de linkerkant naar EDD Afrekenen, en sleep het vervolgens naar uw pagina.
Een nieuw toegevoegde widget blijft leeg totdat u een lay-out kiest, wat de volgende stap is. Zodra u dat gedaan heeft, wordt een live voorbeeld van uw afrekenformulier weergegeven, zodat u uw wijzigingen kunt zien terwijl u ze aanbrengt in plaats van te publiceren en de voorkant te controleren.
Deze widget is de container voor uw gehele afrekening. De eigen instellingen bevinden zich onder drie tabbladen: Lay-out, Stijl, en Geavanceerd.
Een Checkout-indeling kiezen
Op het tabblad Lay-out, open Afreken-lay-out. U krijgt vijf kant-en-klare indelingen om uit te kiezen, die eenkoloms en tweekoloms ontwerpen omvatten, en schakelaars om de winkelwagen en het kortingsformulier weer te geven of te verbergen.
Opmerking: Elementor waarschuwt u dat het wisselen van lay-out alle widgetinhoud vervangt. Kies uw lay-out voordat u tijd investeert in styling, zodat uw werk behouden blijft.
De Checkout-container stylen
Het tabblad Stijl behandelt de afrekening als geheel, met secties voor Achtergrond, Achtergrond Overlay, Rand, Vormscheider, en Formulierelementen.
Shape Divider is de enige die de moeite waard is om te kennen, omdat het een decoratieve vorm toevoegt aan de boven- of onderrand van je afrekenpagina in plaats van een platte grens. Kies een rand en vervolgens een vorm.
Individuele Checkout-widgets aanpassen
Uw afrekening is opgebouwd uit vier afzonderlijke widgets: de winkelwagen, persoonlijke gegevens, betalingsgegevens en het kortingsformulier. Elk heeft zijn eigen instellingen, waarmee u één deel van de afrekening kunt stylen zonder de rest te beïnvloeden.
U vindt deze vier niet in het elementenpaneel, omdat u ze niet handmatig toevoegt. Ze worden geleverd als onderdeel van de EDD Checkout-widget. Om hun instellingen te bereiken, selecteert u het onderdeel dat u wilt direct op de pagina.
De Winkelwagen-widget
Op het tabblad Inhoud biedt de winkelwagen u een Winkelwagenkop-schakelaar, een Winkelwagenminiatuur-schakelaar en een Grootte-schuifregelaar voor die miniaturen.
Het tabblad Stijl is het diepste van de vier. De bedieningselementen zijn gegroepeerd in Winkelwagenkop, Winkelwagenartikelen en Voettekstregels, zodat u de totalen anders kunt stylen dan de regelitems erboven.
De Persoonlijke Gegevens-widget
Deze widget omvat de velden voor naam en e-mail, plus de links voor inloggen en registreren. Het tabblad Inhoud bevat Voorbeeld als gast, Accountuitlijning en een optie Enkele naamregel die voor- en achternaam op één regel plaatst.
De Betaalgegevens-widget
Deze is verantwoordelijk voor het betalingsgebied. Het tabblad Stijl groepeert bedieningselementen in Aankooppknop, Betaalmethode-kiezer, Betaalmethode en Kaartgegevens, zodat de knop waarop uw klanten klikken op zichzelf gestyled kan worden.
Het Kortingsformulier-widget
Het kortingsformulier heeft één inhoudsinstelling, Kortingsveld weergeven, en een diep stijlblad dat de koppeling, het veld zelf en de knop 'Toepassen' omvat.
Je Checkout herschikken
Omdat elk deel van de afrekening zijn eigen widget is, kunt u de volgorde waarin dingen verschijnen wijzigen. Selecteer een widget, open het tabblad Geavanceerd en open vervolgens Indeling. De Volgorde-bediening verplaatst dat element naar het begin of het einde van zijn container, en een aangepaste optie laat u een exacte positie instellen.
De snelste manier om het gewenste onderdeel te selecteren is het Structuur-paneel van Elementor, dat elk element op de pagina weergeeft. Het selecteren van een element daar markeert het op het canvas en laadt de instellingen ervan.
Als u tevreden bent met het resultaat, selecteert u de pijl naast Publiceren, kiest u vervolgens Concept opslaan, Opslaan als sjabloon of Pagina bekijken. Selecteer Publiceren zelf om uw wijzigingen live te maken.
Probleemoplossing
Als u het EDD Checkout-blok of de hierboven beschreven widgetinstellingen niet ziet, zijn er een paar opties om te proberen.
De eerste is om te verifiëren of het Flexbox Container-experiment van Elementor is ingeschakeld. Ga naar Elementor » Editor » Instellingen » Functies en zorg ervoor dat de optie Container is ingesteld op Actief.
Zorg er ook voor dat uw Easy Digital Downloads-plugin up-to-date is. Controleer op updates onder Dashboard » Updates.
De individuele afreken-widgets en de lay-outkiezer vereisen Easy Digital Downloads 3.7.0 of hoger. De eigen widgets van Elementor vereisen Elementor 3.35.0 of hoger. Anders ziet u mogelijk een widget genaamd EDD Checkout (Legacy). Deze blijft werken en de instellingen bevinden zich op één widget in plaats van verdeeld te zijn over de vier hierboven beschreven widgets. Voeg de huidige EDD Checkout widget toe aan een pagina om over te schakelen naar de nieuwere instellingen.
Voor alles wat specifiek is voor de eigen bedieningselementen van Elementor, behandelt de kennisbank voor Elementor-widgets deze in detail.
Veelgestelde vragen: EDD Checkout aanpassen met Elementor
Hier zijn antwoorden op enkele veelgestelde vragen over het aanpassen van de EDD-afrekening in Elementor.
Heb ik de betaalde versie van Elementor nodig?
Nee. De gratis Elementor-plugin is voldoende voor de EDD Checkout-widget en alle instellingen die hier worden behandeld.
Waarom kan ik het winkelwagen- of kortingsformulier niet vinden in het elementenpaneel?
Die vier widgets worden niet handmatig toegevoegd. Ze worden geleverd als onderdeel van de EDD Checkout-widget, dus je bereikt hun instellingen door ze op de pagina te selecteren in plaats van ze erin te slepen.
Maakt het wijzigen van de checkout-indeling mijn styling ongedaan?
Dat kan. Elementor waarschuwt dat het wijzigen van de indeling de inhoud van alle widgets vervangt, dus kies eerst je indeling en style deze daarna.
Kan ik de volgorde van de checkout-secties wijzigen?
Ja. Selecteer de widget die je wilt verplaatsen en gebruik vervolgens de besturing voor Volgorde op het tabblad Geavanceerd onder Indeling.
Werkt de checkout nog steeds zonder Elementor?
Ja. Het EDD Checkout-blok regelt je checkout op zichzelf, en de instellingen zijn beschikbaar voor elke gebruiker. Elementor voegt ontwerpcontrole toe bovenop.
