Een veld toevoegen in WooCommerce bestellingen

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() {
    // Check if set, if its not set add an error.
    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.