WooCommerce velden aanpassen op de afrekenpagina

Ben je niet tevreden met de velden die op de afrekenpagina van je WooCommerce webshop staan?

Weet je niet over welke velden ik het precies heb? Denk aan velden als bedrijfsnaam, toevoeging, bestelnotities en eigenlijk alle andere velden die je bij het afrekenen ziet staan.

Met behulp van een plugin kun je deze afrekenvelden in WooCommerce aanpassen, terwijl alles verder goed blijft werken. Ideaal dus om van overbodige velden af te komen of om extra velden toe te voegen.

Video: WooCommerce velden aanpassen

In onderstaande video laat ik je alle mogelijkheden zien om velden in WooCommerce uit te schakelen, toe te voegen of aan te passen.

Heb je meer behoefte aan de uitleg in tekst of wil je nog meer informatie over dit onderwerp? Geen enkel probleem, je kunt hieronder verder lezen.

Waarom de WooCommerce velden aanpassen?

Het kan zijn dat je je afvraagt waarom je de WooCommerce velden zou willen aanpassen. Dit kan meerdere redenen hebben, want geen enkele webshop is natuurlijk hetzelfde.

Wat nou als je bijvoorbeeld alleen digitale producten verkoopt? Een telefoonnummer en de adresgegevens van een klant heb je dan eigenlijk niet noodzakelijk nodig.

Het kan ook zijn dat je mensen niet de mogelijkheid wilt geven om een bedrijfsnaam in te vullen, een toevoeging bij het adres (wordt niet vaak gebruikt) of de bestelnotities.

Wat ook het geval kan zijn, is dat je juist meer velden wilt toevoegen aan de afrekenpagina. Zo kan je bijvoorbeeld een klant de mogelijkheid willen geven om aan te geven of het pakket in de ochtend of middag bezorgd mag worden.

Tot slot kan je ook iets simpels willen als dat bepaalde velden de volledige breedte innemen of juist dat je twee velden naast elkaar wilt hebben staan.

Hoe je WooCommerce velden kunt aanpassen

Om velden aan te passen op de afrekenpagina van je WooCommerce webshop kun je de plugin Checkout Field Editor gebruiken.

Met deze plugin kun je velden toevoegen, bewerken en verwijderen. Naast de standaard tekstvelden heb je ook de mogelijkheid om mensen iets te laten selecteren, checkboxen te maken of een datumprikker toe te voegen.

Wanneer je de plugin hebt geïnstalleerd en geactiveerd kun je naar “WooCommerce -> Checkout Fields” gaan om de WooCommerce velden aan te passen. De pagina waar je aanpassingen kunt doen ziet er als volgt uit.

Zoals je ziet staan hier meteen alle velden die je op de afrekenpagina ziet staan bij factuurgegevens. Onder Shipping Fields kun je de verzendgegevens bekijken en bij Additional fields de velden die onder Extra informatie staan.

WooCommerce veld verwijderen

Wanneer je een veld als “toevoeging (optioneel)” wilt verwijderen van de afrekenpagina, dan kun je dit doen door een vinkje te zetten bij het veld en op “Disable/Remove Checked” te klikken.

Vervolgens zal het, zoals je hierboven in de afbeelding kunt zien, doorgestreept worden en is het niet meer zichtbaar op de afrekenpagina zodra je op “Save Changes” hebt geklikt.

WooCommerce veld toevoegen

Stel je wilt een extra veld onder het kopje “Extra informatie” op de afrekenpagina toevoegen, dan kun je dit bereiken door bovenaan op het tabblad “Additional Fields” te klikken en vervolgens op “+ Add field”.

Er verschijnt nu een lege rij die je volledig naar wens kunt invullen. Bij Name kun je een willekeurige naam invoeren. Type is belangrijk, want je kunt hier aangeven wat voor veld je wilt hebben. Je kunt kiezen voor een tekstveld, wachtwoord veld, tekstgebied, keuzeveld, multi-keuzeveld, checkbox of datumprikker.

Bij Label kun je invoeren wat de bezoekers boven het veld te zien krijgen en bij Placeholder / Option Values kun je een tekst plaatsen met een voorbeeld wat er ingevuld kan worden in het veld.

Wil je dat het veld de linkerkant, rechterkant of volledige breedte in beslag neemt? Je kunt dit aangeven bij Position door voor left, right of full-width te kiezen. Wanneer je twee velden naast elkaar hebt staan, dan kun je bij het laatste veld die de rij afmaakt Clear Row aanvinken. Het eerstvolgende veld zal dan netjes op een nieuwe regel komen te staan.

Bij Valitidation Rules kun je onder andere aangeven of het veld verplicht is. Wanneer het om een e-mailveld gaat kun je ook aangeven dat er gecontroleerd moet worden dat het om een e-mailadres gaat en bij een telefoonnummer of er wel een nummer is ingevuld.

Tot slot heb je de Display Options. Je kunt hier aangeven of de gegevens die in het veld zijn ingevuld ook in de e-mails naar de klant moeten staan en of het op de detailpagina van de bestelling moet worden weergegeven.

Dit waren alle dingen die je kunt invullen. Ik hoop dat het een beetje duidelijk is, maar ik zal nog even een voorbeeld geven. Wanneer je een klant de mogelijkheid wilt geven om een bezorgdatum te kiezen, dan kun je het volgende invullen.

Het enige wat ik heb ingevuld is een naam, type (date picker), placeholder en positie. Het ziet er vervolgens zo uit op de website.

Wanneer je op “kies een bezorgmoment” klikt komt er een datumprikker tevoorschijn, zodat er een datum geselecteerd kan worden. Heel moeilijk is het dus gelukkig niet en er zijn heel veel velden te verzinnen die je zou kunnen maken.

WooCommerce velden resetten

Wil je om wat voor reden dan ook weer terug naar hoe de WooCommerce afrekenpagina er standaard uitziet? Er is een reset knop in deze plugin gebouwd om dit voor elkaar te krijgen.

Ga naar “WooCommerce -> Status -> Tools”. Je zal hier een kop “Checkout field” tegenkomen, met daarnaast de knop “Reset Checkout Fields”.

Klik op deze knop om alle wijzigingen die je hebt gedaan ongedaan te maken en weer terug te gaan naar de standaard WooCommerce velden op de afrekenpagina.