Een veld toevoegen in WooCommerce bestellingen

Een veld toevoegen in WooCommerce bestellingen

Hoe voeg je extra velden toe aan je WooCommerce checkout procedure?

We hebben in eerdere snippets in WooCommerce al gezien hoe je velden in het checkout formulier kan verwijderen, of verplicht kan stellen. Maar ik heb je nog niet verteld, hoe je velden toe kan voegen.

In dit voorbeeld behandelen we de makkelijkste manier. Hoe je na de ‘Order Notes’ nog andere velden toe kan voegen.

Zelf heb ik dit ooit nodig gehad voor een heel specifieke situatie. Een klant van mij heeft een webshop. Maar die webshop is niet bedoeld voor iedereen. Het is een shop waar werknemers van grote bedrijven bepaalde producten tegen gereduceerde prijs kunnen kopen.

Maar omdat het in het kader van de GDPR niet is toegestaan, dat die bedrijven gewoon de gegevens van de werknemers doorgeven aan de webshop hebben ze daar iets anders op bedacht. Op basis van een unieke code die de werknemers van hun werkgever krijgen, waarin op een ingenieuze manier de code van het bedrijf, een unieke code, en een controle getal in versleuteld zitten, is het vrij makkelijk te controleren of de potentiële klant in kwestie ook inderdaad recht heeft om in die winkel te winkelen.

Bij het plaatsen van de eerste order wordt gevraagd om een klant identificatie nummer. Dit nummer moet niet alleen gevuld worden, het nummer moet ook ‘passen’ binnen het controle algoritme. Om duidelijke redenen kan ik niet ingaan op het precieze algoritme, dus in het voorbeeld controleer ik alleen of het veld is ingevuld. Maar ik had in dit veld iedere vorm van controle kunnen plaatsen.

Voor het oplossen van de totale uitdaging hebben we verschillende snippets nodig.

Het veld op de pagina

In de eerste plaats moeten we er natuurlijk voor zorgen, dat het veld zichtbaar wordt op de checkout page. En om dat te doen gebruiken we de action hook ‘woocommerce_after_order_notes’.

<?php
add_action( 'woocommerce_after_order_notes', 'wxp_employee_checkout_field' );
function wxp_employee_checkout_field( $checkout ) {
echo '<div id="wxp_employee_checkout_field"><h2>' . 'Partner code' . '</h2>';
woocommerce_form_field( 'wxp_employee', array(
        'type'          => 'text',
        'class'         => array('wxp-supported-field form-row-wide'),
        'label'         => 'Jouw partner code',
        'placeholder'   => 'Heb je geen partnercode, informeer bij personeelszaken',
        ), $checkout->get_value( 'wxp_employee' ));
echo '</div>';
}

Deze code zorgt op dit moment alleen nog maar voor een veld op het formulier. De volgende actie is het toevoegen van een ‘validator’, een stukje code wat controleert of het veld ook goed is ingevuld. Voor het voorbeeld controleren we alleen of het is ingevuld. In de eerdere voorbeelden van check out fields heb je al gezien, dat je dit eigenlijk gewoon kan doen, door de property ‘required’ op ‘true’ te zetten, maar in dit geval doen we het op een wat meer ingewikkelde manier. Om aan te geven, dat je ook meer complexe controles in dezelfde functie kan zetten.

<?php 
add_action('woocommerce_checkout_process', 'wxp_check_checkout_employee');
function wxp_check_checkout_employee() {

    if ( ! $_POST['wxp_employee'] )
        wc_add_notice( 'Zonder een geldige code, kunnen we de bestelling niet in behandeling nemen' ), 'error' );
}

De controle in deze code is heel simpel. Er wordt alleen gecontroleerd of het veld wxp_employee is ingevuld. Maar dit kan dus een behoorlijk meer ingewikkelde controle zijn.

Wanneer je een veld zonder enige controle in wilt voegen, is dat ook mogelijk. Dan kan je de code hierboven gewoon achterwege laten. Wat er ook wordt ingevuld, de inhoud is geldig.

Maar het enige wat we tot nu toe hebben gedaan is een extra veld op het formulier gezet en gekeken of de inhoud wel geldig is. Maar of de inhoud geldig is of niet, tot nu toe wordt er niets vanuit dat veld opgeslagen. Daar willen we verandering in brengen, dus we hebben nog een derde ‘hook’ nodig.

<?php 
add_action( 'woocommerce_checkout_update_order_meta', 'process_checkout_employee' );
function process_checkout_employee( $order_id ) {
    if ( ! empty( $_POST['wxp_employee'] ) ) {
        update_post_meta( $order_id, 'Partner code', sanitize_text_field( $_POST['wxp_employee'] ) );
    }
}

De code in dit voorbeeld geeft aan, hoe je een tekstveld toe kan voegen. Maar WooCommerce heeft natuurlijk veel meer soorten velden om in te kunnen vullen. In toekomstige voorbeelden zullen we ook die veld typen behandelen.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

WooCommerce checkout velden verwijderen
Sommige velden in het bestelformulier van WooCommerce heb je absoluut niet nodig. En zo haal je ze weg!
JavaScript verbergen wanneer je bent ingelogd
Specifieke JavaScript code verbergen, wanneer je bent ingelogd.
Maak WP Courseware lessen zichtbaar in Elementor
Standaard kan Elementor Pro jouw WP Courseware Units niet vinden. Zo los je dit op.
WooCommerce tabbladen onder elkaar zetten
Heb je wel eens een grote webshop gezien met product tabs? Precies. En daarom willen wij onze WooCommerce...
WooCommerce product titel inkorten
Past de titel in je WooCommerce product matrix niet? Zo pas je het aan.
Shortcodes voor het tonen en verbergen van content
Hoe maak ik een shortcode waarmee ik content van mijn posts kan verbergen?

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Flinke kortingen op cursussen van WordXPression.