Velden aanpassen op de afrekenpagina van WooCommerce

Op alle Woocommerce webshops krijg je dezelfde velden die ingevuld moeten worden te zien op de afrekenpagina. Ik heb het hier over velden die staan bij factuurgegevens, verzendgegevens en additionele velden (bestelnotities).

Nu is natuurlijk niet elke webshop hetzelfde en wellicht wil jij daarom op jouw website het liefst helemaal zelf bepalen welke velden klanten moeten invullen om een bestelling te plaatsen.

Zo kun je bijvoorbeeld door een extra veld toe te voegen je bezoeker de mogelijkheid geven om een datum uit te zoeken waarop het pakketje bezorgd mag worden. Wanneer je uitsluitend digitale producten verkoopt zou je echter ook iets heel anders kunnen doen en bijvoorbeeld alle velden die je niet nodig hebt weghalen.

In dit artikel kun je lezen hoe je velden kunt weghalen, toevoegen of kunt aanpassen met behulp van de plugin Checkout Field Editor.

Checkout Field Editor

De plugin Checkout Field Editor is een betaalde plugin (vanaf $49,-) die je kunt vinden op de officiële WooCommerce extension pagina. Wij hebben deze plugin zelf op meerdere webshops draaien.

Zodra je de plugin installeert en activeert kun je aan de slag bij WooCommerce -> Checkout fields. Je zal dan op het volgende scherm uitkomen:

Je ziet hier in eerste instantie alle velden die in de sectie factuurgegevens staan. Bovenaan heb je ook nog de mogelijkheid om door te gaan naar de sectie verzendgegevens of additionele velden.

Velden aanpassen

Per sectie kun je alle velden aanpassen. Zo kun je:

• Type aanpassen;
• Labelnaam veranderen;
• Een placeholder tekst toevoegen;
• Positie wijzigen;
• Aangeven dat het veld op een nieuwe rij moet komen;
• Aangeven dat het veld verplicht ingevuld moet worden;
• Of het veld ook in de e-mail moet komen.

Type: Bij Type kun je aangeven om wat voor veld het gaat. Zo kun je onder andere kiezen voor een tekstveld, checkbox, keuzeveld, datumprikker, en nog een aantal dingen meer.

Label: Label staat voor de tekst die een bezoeker te zien krijgt bij het veld op de afrekenpagina.

Placehold / Option values: hier kun je een placeholder tekst plaatsen met bijvoorbeeld een voorbeeld wat ingevuld moet zou kunnen worden. Tevens zou je hier ook opties kunnen invullen waar bezoekers uit moeten kiezen.

Position: Hier kun je aangeven of het veld link of rechts moet staan (bv naast een ander veld) of dat het veld de volledige rij in beslag mag nemen.

Clear row: Wanneer je velden links en rechts hebt aligned kun je een vinkje zetten bij het laatste veld die op dezelfde rij moet staan. Het volgende veld zal dan op een nieuwe rij starten.

Validation rules: Hier kun je validatieregels plaatsen om aan te geven waar het ingevulde veld aan moet voldoen. Zo moet je bij het e-mailadres voor email kiezen, bij telefoonnummer voor number en als een veld verplicht moet zijn kun je hier required invullen.

Display options: Met deze optie kun je aangeven of een veld ook in de e-mails moet komen te staan en op de detailpagina van de bestelling.

Velden verwijderen

Wanneer je een veld wilt verwijderen kan dit ook zonder enige moeite. Het enige wat je hoeft te doen is het veld dat je wilt verwijderen selecteren en op “Disable/Remove checked” te klikken.

Wel moet er bij gezegd worden dat het verwijderen van de standaardvelden mogelijk problemen kan opleveren met sommige plugins.

Velden toevoegen

Indien je velden wilt toevoegen aan de afrekenpagina van je WooCommerce website kun je op “add field” klikken. Er zal vervolgens een lege rij toegevoegd worden die je helemaal zelf mag invullen.

Velden op afrekenpagina resetten

Wanneer alles verkeerd is gelopen of als je ooit weer terug wilt en alleen de standaardvelden wilt gebruiken, dan heb je de mogelijkheid om alles wat je gedaan hebt met de checkout fields weer te resetten.

Om alles te resetten kun je naar WooCommerce -> Systeemstatus -> Tools gaan en dan naar het kopje “checkout field”.

Je kunt hier op de reset knop klikken om alle wijzigen weer ongedaan te maken en terug te gaan naar de standaard velden.