Woocommerce

Invulvelden aanpassen op de afrekenpagina

03 maart 2022

Wanneer je een WooCommerce webshop toevoegt aan je WordPress website, wordt er automatisch een afrekenpagina aangemaakt. Op deze pagina staan standaard een aantal velden die de klant dient in te vullen; naam, e-mailadres, adres, telefoonnummer, etc. Heel handig dat dit automatisch wordt aangemaakt! Maar wat als je juist meer/minder/andere invulvelden wilt gebruiken?

Andere invulvelden op de afrekenpagina van WooCommerce

Hoe minder informatie je vraagt, hoe groter de kans dat men een bestelling plaatst. De standaard invulvelden van WooCommerce zijn best wel uitgebreid en bevatten vaak informatie die jij helemaal niet nodig hebt van je klanten. Zo heb ik zelf bijvoorbeeld niet per se een telefoonnummer nodig. Als je alleen aan particulieren verkoopt, heb je bijvoorbeeld ook geen bedrijfsinformatie nodig.

Of misschien heb je juist meer informatie nodig.. Op mijn website verkoop ik bijvoorbeeld alleen aan ondernemers/bedrijven en niet aan particulieren. En verkoop ik ook aan (Nederlandstalige) klanten in het buitenland. Voor mijn administratie en belastingaangifte heb ik dan juist meer informatie nodig; namelijk het BTW nummer en het KvK nummer van de klant.

Daarnaast zijn sommige invulvelden optioneel en andere invulvelden verplicht. Misschien dat je dit wilt aanpassen? Let er wel op dat je bepaalde informatie nodig hebt voor jouw facturatie en administratie. Mocht je niet zeker weten wat je precies nodig hebt, raadpleeg dan jouw boekhouder of administratiekantoor.

Hoe pas je de invulvelden aan?

Helaas zit er niet standaard een functie in WooCommerce waarmee je de invulvelden kunt aanpassen. Maar niet getreurd, het is wél mogelijk, ook voor technische leken ;) Ik zie dat veel websites aanraden om de plugin WooCommerce Checkout Manager te gebruiken. Ik ben zelf geen fan van deze plugin.. Als je 1 klein foutje maakt, verdwijnen de helft van je instellingen en kun je weer opnieuw beginnen. Niet erg gebruiksvriendelijk..

Er is echter nog een andere optie, die veel beter werkt en makkelijker in gebruik is. Hieronder heb ik een uitleg geplaatst met een video waarin ik laat zien hoe je de invulvelden kunt aanpassen. De uitleg en video krijg je te zien zodra je óf mijn Facebookpagina liked óf mijn bericht deelt op Facebook. Waarom? Omdat ik veel tijd steek in het maken van mijn gratis artikelen en een beetje credit af en toe wel op zijn plaats is ;)

Zo pas je de invulvelden aan in WooCommerce

Een alternatieve, minder bekende, plugin is Flexible Checkout Fields. Met deze plugin kun velden verwijderen, nieuwe velden toevoegen, velden aanpassen én instellen welke velden er wel/niet optioneel zijn. Handig! Zo gebruik je deze plugin:

  1. Installeer de plugin op jouw WordPress website.
  2. Activeer de plugin (doh).
  3. Bij het menu kopje “WooCommerce” is nu een extra subpagina: Checkout Fields. Ga naar deze pagina.
  4. Je ziet vervolgens allerlei velden onder elkaar staan.

01. Volgorde veranderen

Als je de volgorde wilt veranderen van de invulvelden, klik je heel simpelweg op het betreffende tabje (muis ingedrukt houden) en sleep je het naar de juiste plek. Vergelijk met het beheren van menu’s in WordPress.

02. Velden verwijderen

Klik op het invulveld die je wilt verwijderen. Er komen dan verschillende opties tevoorschijn. Klik het vinkje bij “Enable field” en eventueel “Required field” uit. Klik onderaan (of bovenaan) de pagina op de blauwe knop “Save Changes”. Het invulveld is vervolgens verwijderd.

03. Optionele/verplichte velden

Zodra je klikt op één van de tabjes, komen er dus extra opties tevoorschijn. Bij de checkbox “Required field” kun je instellen of het betreffende invulveld wel of niet verplicht is.

04. Nieuwe invulvelden toevoegen

Aan de linkerkant van het scherm kun je een extra invulveld toevoegen. Je kunt kiezen uit “Single Line Text” en “Paragraph Text”. Bij Single Line krijg je een invulveld waar 1 regel tekst in kan. Bij Paragraph kun je kiezen voor een invulveld waar men meerdere regels kan invullen (bijvoorbeeld voor opmerkingen over de bestelling). Bij “Label” kun je de titel van het veld invullen”. Klik op “Add field” zodra je de juiste instellingen hebt bepaald. Vervolgens wordt het veld toegevoegd en kun je het naar de juiste plek slepen. Je kunt daarna de rest van de instellingen bepalen (zoals wel/niet optioneel).

05. Help, de velden staan nu door elkaar!

De velden hebben automatisch een vaste breedte (helft van de pagina of over de gehele breedte). Het kan dus zijn dat je velden nog niet helemaal kloppen. Dit kun je aanpassen door bij “Appearance” de “CSS Class” aan te passen. De volgende classes kun je gebruiken:

form-row-firstAls het veld links moet staan, met een ander veld er rechts naast.
form-row-lastAls het veld rechts moet staan, met een ander veld er links voor.
form-row-wideAls het veld over de gehele breedte getoond moet worden.