Net zoals dat je velden van het WooCommerce checkout pagina kan verwijderen, kan je zelf ook velden toevoegen. Denk bijvoorbeeld aan een datepicker voor een ophaaldatum, een extra opmerking om een tekst in een product te laten graveren etc. In dit artikel laat ik zien hoe je een extra veld aan het checkout formulier toevoegt.

In dit geval plaatsen ik een Ophaaldatum veld op de checkout pagina, onder het Extra informatie veld. Het Ophaaldatum veld is een jQuery Datepicker veld, zodat de klant eenvoudig een datum kan kiezen met behulp van een klein kalendertje.

Extra velden toevoegen aan het WooCommerce checkoutformulier zonder plugin

Deze tutorial bestaat uit grofweg vier stappen die je moet nemen om het extra veld toe te kunnen voegen:

  • Het extra veld tonen op het checkoutformulier
  • Het extra veld valideren
  • De ingevulde waarde van het extra veld tonen op de bevestigingsmail
  • De ingevulde waarde van het extra veld tonen op de ‘Bedankt-pagina’

Plaats de code uit deze tutorial in het functions.php bestand van je thema of in je eigen site specifieke plugin.

Het extra veld tonen op het checkoutformulier

Je kan extra velden op verschillende plekken toevoegen aan het checkout formulier. Ik plaats de datepicker onder het “Extra informatie” veld. Hiervoor heeft WooCommerce de hook woocommerce_after_order_notes beschikbaar. Wil je een of meerdere velden toevoegen op een andere plek op de checkout pagina, dan heeft WooCommerce hier verschillende hooks voor. Check deze pagina voor een visuele weergave van waar welke hooks zich bevinden.

<?php
/**
 * Add a datepicker for pickup date after billing fields.
 */
add_action('woocommerce_after_order_notes', 'wpsimpel_display_pickup_datepicker');

function wpsimpel_display_pickup_datepicker($checkout) {

	echo '<div id="custom_checkout_field"><h2>' . __( 'Pickup date', 'your-text-domain' ) . '</h2>';

		woocommerce_form_field( 'add_pickup_date', array(
			'type'          => 'text',
			'class'         => array(
				'form-row form-row-wide pickup-date-field'
			),
			'label'         => __( 'Pickup date', 'your-text-domain' ),
			'placeholder'   => __( 'Choose a pickup date for your order', 'your-text-domain' ),
			'required'      => true,
			'custom_attributes'     => array( 'readonly' => 'readonly' ),
		) ,

		$checkout->get_value('add_pickup_date'));

	echo '</div>'; ?>
	<script>
		jQuery(document).ready(function( $ ) {
			$( "#add_pickup_date").datepicker( {
				minDate: 0,
			} );
		} );
	</script>
<?php
}

Om het kalendertje te kunnen tonen waarmee bezoekers een datum kunnen kiezen, maken we gebruik van jQuery Datepicker. Wil je enkel een simpel tekstveld toevoegen, sla onderstaande stap dan over.

Om de jQuery datepicker te laten werken moet er wat JavaScript toegevoegd worden aan de pagina. Het mooie is dat de scripts voor de datepicker standaard in WordPress worden meegeleverd. Je moet ze dus alleen nog aanroepen met de hook wp_enqueue_script. Onderstaande code laadt de benodigde scripts en stijlen voor de datepicker, en doet dit enkel op de checkout pagina (door de check if ( is_checkout() )).

<?php
add_action( 'wp_enqueue_scripts', 'wpsimpel_enqueue_datepicker' );

function wpsimpel_enqueue_datepicker() {

    if ( is_checkout() ) {
        // Load the datepicker script (pre-registered in WordPress).
         wp_enqueue_script( 'jquery-ui-datepicker' );
         // You need styling for the datepicker. For simplicity I've linked to Google's hosted jQuery UI CSS.
         wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
         wp_enqueue_style( 'jquery-ui' );  
    }
}

Vervolgens moet de datepicker middels onderstaande JavaScript code worden toegevoegd aan de functie wpsimpel_display_pickup_datepicker die het veld aan het checkout formulier toevoegt, zodat het kalendertje verschijnt zodra de bezoeker op het veld klikt.

<script>
	jQuery(document).ready(function( $ ) {
		$( "#add_pickup_date").datepicker( {
			minDate: 0,
		} );
	} );
</script>

De optie minDate: 0 zorgt er voor dat de bezoeker geen datums in het verleden kan selecteren. Er zijn nog veel meer opties die je aan de datepicker mee kan geven. Raadpleeg hiervoor de documentatie van jQuery UI Datepicker.

Als je alles samenvoegt van bovenstaande stappen dan heb je onderstaande code.

<?php
/**
 * Add a datepicker for pickup date after billing fields.
 */
add_action('woocommerce_after_order_notes', 'wpsimpel_display_pickup_datepicker');

function wpsimpel_display_pickup_datepicker($checkout) {

	echo '<div id="custom_checkout_field"><h2>' . __( 'Pickup date', 'your-text-domain' ) . '</h2>';

		woocommerce_form_field( 'add_pickup_date', array(
			'type'          => 'text',
			'class'         => array(
				'form-row form-row-wide pickup-date-field'
			),
			'label'         => __( 'Pickup date', 'your-text-domain' ),
			'placeholder'   => __( 'Choose a pickup date for your order', 'your-text-domain' ),
			'required'      => true,
		) ,

		$checkout->get_value('add_pickup_date'));

	echo '</div>';
	<script>
		jQuery(document).ready(function( $ ) {
			$( "#add_pickup_date").datepicker( {
				minDate: 0,
			} );
		} );
	</script>
}

add_action( 'wp_enqueue_scripts', 'wpsimpel_enqueue_datepicker' );
function wpsimpel_enqueue_datepicker() {
    if ( is_checkout() ) {
        // Load the datepicker script (pre-registered in WordPress).
         wp_enqueue_script( 'jquery-ui-datepicker' );
         // You need styling for the datepicker. For simplicity I've linked to Google's hosted jQuery UI CSS.
         wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
         wp_enqueue_style( 'jquery-ui' );  
    }
}

Het extra datepicker veld staat nu onder het Extra informatie veld, en de bezoeker kan een ophaaldatum selecteren voor zijn bestelling.

Veldvalidatie

Nu moet het datepicker veld nog worden gevalideerd. Dat wil zeggen dat er door de website gecheckt moet worden of het veld (correct) is ingevuld. De klant krijgt dan een melding te zien wanneer dit veld niet (goed) is ingevuld. Op dit moment is de datumkiezer

Dat kan met de onderstaande code.

/**
 * Validate the datepicker.
 */
add_action('woocommerce_checkout_process', 'wpsimpel_validate_datepicker');

function wpsimpel_validate_datepicker() {

	// Show an error message if the field is not set.
	if (!$_POST['add_pickup_date']) wc_add_notice( '<strong>' . __( 'Pickup Date', 'your-text-domain' ) . '</strong>' . ' ' . __('is a required field.', 'your-text-domain' ) , 'error');
}

Wanneer er nu geen datum wordt gekozen in de datepicker krijgt de klant waneer hij op de knop ‘Afrekenen’ klikt een melding te zien dat het veld niet is ingevuld.

Extra velden toevoegen aan het WooCommerce checkoutformulier zonder plugin

De ingevulde waarde van het extra veld tonen op de bevestigingsmail

Nu is het zaak dat de gekozen datum daadwerkelijk aan de bestelling wordt gekoppeld, en op zowel de bevestigingsmail naar de sitebeheerder als de klant wordt getoond. Daarvoor moet de waarde van het veld eerst aan de database worden toegevoegd.

Onderstaande functie voegt de waarde van het veld toe aan de ‘post meta tabel’ in de database, en koppelt deze aan de bestelling.

<?php
/**
 * Add datepicker value to the order.
 */
add_action('woocommerce_checkout_update_order_meta', 'wpsimpel_add_order_pickup_date_to_order', 10, 1);

function wpsimpel_add_order_pickup_date_to_order($order_id)
{

	if (isset($_POST ['add_pickup_date']) && '' != $_POST ['add_pickup_date']) {
		add_post_meta($order_id, '_pickup_date', sanitize_text_field($_POST ['add_pickup_date']));
	}
}

Vervolgens kan je met onderstaande code de ophaaldatum toevoegen aan de bevestigingse-mails.

<?php
/**
 * Add datepicker value to emails.
 */
add_filter( 'woocommerce_email_order_meta_fields', 'wpsimpel_add_pickup_date_to_emails' , 10, 3 );

function wpsimpel_add_pickup_date_to_emails( $fields, $sent_to_admin, $order ) {

	if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {
		$order_id = $order->get_id();
	} else {
		$order_id = $order->id;
	}

	$pickup_date = get_post_meta( $order_id, '_pickup_date', true );

	if ( '' != $pickup_date ) {
		$fields[ 'Pickup Date' ] = array(
			'label' => __( 'Pickup Date', 'your-text-domain' ),
			'value' => $pickup_date,
			$sent_to_admin => true,
		);
	}
	return $fields;
}

De functie wpsimpel_add_pickup_date_to_emails() functie is nu gekoppeld aan de filter woocommerce_email_order_meta_fields welke er voor zorgt dat de ingevulde velden op de e-mail die naar de klant wordt verstuurd verschijnt.

Ook wordt in dit geval de ophaaldatum ook toegevoegd aan de admin-email van de bestelling. Dit komt omdat de variabele $sent_to_admin de waardetrue heeft. De standaard waarde van deze variabele is false, dus als je de regel $sent_to_admin => true, weg zou halen uit de code, dan wordt het veld niet toegevoegd aan de admin-email.

Extra velden toevoegen aan het WooCommerce checkoutformulier zonder plugin

De ingevulde waarde van het extra veld tonen op de ‘Bedankt-pagina’.

De code waarmee je de ophaaldatum toont op de ‘Bedankt-pagina’ is vergelijkbaar met de code die er voor zorgt dat de ophaaldatum op de e-mails verschijnt. Enkel gebruiken we voor de ‘Bedankt-pagina’ de filter woocommerce_order_details_after_order_table.

<?php
/**
 * Add datepicker value to 'Thank you' page.
 */
add_filter( 'woocommerce_order_details_after_order_table', 'wpsimpel_add_pickup_date_to_order_received_page', 10 , 1 );

function wpsimpel_add_pickup_date_to_order_received_page( $order ) {
	
	if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {
		$order_id = $order->get_id();
	} else {
		$order_id = $order->id;
	}

	$pickup_date = get_post_meta( $order_id, '_pickup_date', true );

	if ( '' != $pickup_date ) {
		echo '<p><strong>' . __( 'Pickup Date', 'your-text-domain' ) . ':</strong> ' . $pickup_date;
	}
}
Extra velden toevoegen aan het WooCommerce checkoutformulier zonder plugin

Voor het gemak heb ik hieronder de volledige code nog even onder elkaar gezet. Deze code kan je in zijn volledigheid kopiëren en plakken in het functions.php bestand van je thema of in je eigen site specifieke plugin.

<?php
/**
 * Add a datepicker for pickup date after billing fields.
 */
add_action('woocommerce_after_order_notes', 'wpsimpel_display_pickup_datepicker');

function wpsimpel_display_pickup_datepicker($checkout) {

	echo '<div id="custom_checkout_field"><h2>' . __( 'Pickup date', 'your-text-domain' ) . '</h2>';

		woocommerce_form_field( 'add_pickup_date', array(
			'type'          => 'text',
			'class'         => array(
				'form-row form-row-wide pickup-date-field'
			),
			'label'         => __( 'Pickup date', 'your-text-domain' ),
			'placeholder'   => __( 'Choose a pickup date for your order', 'your-text-domain' ),
			'required'      => true,
		) ,

		$checkout->get_value('add_pickup_date'));

	echo '</div>'; ?>
	<script>
		jQuery(document).ready(function( $ ) {
			$( "#add_pickup_date").datepicker( {
				minDate: 0,
			} );
		} );
	</script>
<?php
}

/**
 * Enqueue scripts needed for the datepicker to work.
 */
add_action( 'wp_enqueue_scripts', 'wpsimpel_enqueue_datepicker' );

function wpsimpel_enqueue_datepicker() {

	if ( is_checkout() ) {
		// Load the datepicker script (pre-registered in WordPress).
		wp_enqueue_script( 'jquery-ui-datepicker' );
		// You need styling for the datepicker. For simplicity I've linked to Google's hosted jQuery UI CSS.
		wp_register_style( 'jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
		wp_enqueue_style( 'jquery-ui' );
	}
}

/**
 * Validate the datepicker.
 */
add_action('woocommerce_checkout_process', 'wpsimpel_validate_datepicker');

function wpsimpel_validate_datepicker() {

	// Show an error message if the field is not set.
	if (!$_POST['add_pickup_date']) wc_add_notice( '<strong>' . __( 'Pickup Date', 'your-text-domain' ) . '</strong>' . ' ' . __('is a required field.', 'your-text-domain' ) , 'error');
}

/**
 * Add datepicker value to the order.
 */
add_action('woocommerce_checkout_update_order_meta', 'wpsimpel_add_order_pickup_date_to_order', 10, 1);

function wpsimpel_add_order_pickup_date_to_order($order_id)
{

	if (isset($_POST ['add_pickup_date']) && '' != $_POST ['add_pickup_date']) {
		add_post_meta($order_id, '_pickup_date', sanitize_text_field($_POST ['add_pickup_date']));
	}
}

/**
 * Add datepicker value to emails.
 */
add_filter( 'woocommerce_email_order_meta_fields', 'wpsimpel_add_pickup_date_to_emails' , 10, 3 );

function wpsimpel_add_pickup_date_to_emails( $fields, $sent_to_admin, $order ) {

	if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {
		$order_id = $order->get_id();
	} else {
		$order_id = $order->id;
	}

	$pickup_date = get_post_meta( $order_id, '_pickup_date', true );

	if ( '' != $pickup_date ) {
		$fields[ 'Pickup Date' ] = array(
			'label' => __( 'Pickup Date', 'your-text-domain' ),
			'value' => $pickup_date,
			$sent_to_admin => true,
		);
	}
	return $fields;
}

/**
 * Add datepicker value to 'Thank you' page.
 */
add_filter( 'woocommerce_order_details_after_order_table', 'wpsimpel_add_pickup_date_to_order_received_page', 10 , 1 );

function wpsimpel_add_pickup_date_to_order_received_page( $order ) {

	if( version_compare( get_option( 'woocommerce_version' ), '3.0.0', ">=" ) ) {
		$order_id = $order->get_id();
	} else {
		$order_id = $order->id;
	}

	$pickup_date = get_post_meta( $order_id, '_pickup_date', true );

	if ( '' != $pickup_date ) {
		echo '<p><strong>' . __( 'Pickup Date', 'your-text-domain' ) . ':</strong> ' . $pickup_date;
	}
}

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?