In deze tutorial beschrijf ik hoe je op de checkout van WooCommerce een select option kan toevoegen en hoe je ervoor zorgt dat de gegevens correct in de database worden opgeslagen. Ik zal ook uitleggen hoe je de informatie uit het selectievakje op de bestelpagina en e-mails kunt weergeven.
In deze tutorial gebruik ik een casus van een klant als voorbeeld. Voor deze klant heb ik een extra select option toegevoegd aan de checkoutpagina van zijn WooCommerce webshop. Met deze extra optie kan worden aangeven of de bestelling ’s morgens, ’s middags of ’s avonds moet worden afgeleverd. Met wat aanpassingen kan je deze oplossing ook gebruiken voor andere doeleinden.
Voeg een extra selectie veld toe aan de WooCommerce-checkout
Eerst maken we een ‘custom field’ door het onderstaande fragment toe te voegen aan je functions.php van je thema. De belangrijkste instellingen in deze functie zijn het type (dit is ingesteld op de waarde ‘select’) en de array met opties. In de optiereeks vindt je vier waardes, die als opties in het selectievak worden weergegeven. De eerste optie (blanco) wordt gebruikt als placeholder. Je kan de tekst van de placeholder wijzigen zolang je de waarde ‘blank’ laat staan.
Informatie over de verschillende instellingen en opties vind je in de WooCommerce Docs.
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_action( 'woocommerce_before_order_notes', 'wpx_add_select_checkout_field' );
/**
* Add select field to the checkout page
*
* @param [type] $checkout
*/
function wpx_add_select_checkout_field( $checkout ) {
woocommerce_form_field( 'daypart', array(
'type' => 'select',
'class' => array( 'wpx-drop' ),
'label' => __( 'Afleveropties' ),
'options' => array(
'blank' => __( 'Kies je dagdeel', 'wpx' ),
'morning' => __( 'In de ochtend', 'wpx' ),
'afternoon' => __( 'In de middag', 'wpx' ),
'evening' => __( 'In de avond', 'wpx' ),
)
),
$checkout->get_value( 'daypart' ) );
}
Stel de WooCommerce foutmelding in
Voeg vervolgens het onderstaande fragment toe aan de functions.php. Deze functie controleert of het invoerveld een andere waarde heeft dan de eerste optie van de array, de placeholder. Als de klant niets heeft geselecteerd, wordt er een foutmelding weergegeven.
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_action( 'woocommerce_checkout_process', 'wpx_select_checkout_field_process' );
/**
* Process the checkout.
*/
function wpx_select_checkout_field_process() {
global $woocommerce;
// Check if set, if its not set add an error.
if ( $_POST['daypart'] === 'blank' )
wc_add_notice( '<strong>Selecteer een dagdeel onder Afleveropties</strong>', 'wpx' );
}
Werk de metadata van de bestelling bij
Vervolgens moet je de volgende functie gebruiken om het veld op te slaan. Voeg dit fragment ook toe aan de functions.php.
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_action( 'woocommerce_checkout_update_order_meta', 'wpx_select_checkout_field_update_order_meta' );
/**
* Update the order meta with field value
*
* @param [type] $order_id
*/
function wpx_select_checkout_field_update_order_meta( $order_id ) {
if ( $_POST['daypart'] ) update_post_meta( $order_id, 'daypart', esc_attr( $_POST['daypart'] ) );
}
Geef de veldwaarde weer op de WooCommerce-bestelpagina en e-mails
Voeg ten slotte het volgende fragment toe aan de functions.php. Dit fragment voegt de geselecteerde waarde toe op de WooCommerce bestelpagina. De functie voegt ook de geselecteerde waarde toe aan het WooCommerce e-mailbericht.
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wpx_select_checkout_field_display_admin_order_meta', 10, 1 );
/**
* Display field value on the order edition page.
*
* @param [type] $order
*/
function wpx_select_checkout_field_display_admin_order_meta( $order ) {
echo '<p><strong>' . __( 'Delivery option' ) . ':</strong> ' . get_post_meta( $order->id, 'daypart', true ) . '</p>';
}
add_filter( 'woocommerce_email_order_meta_keys', 'wpx_select_order_meta_keys' );
/**
* Add selection field value to emails
*
* @param [type] $keys
*/
function wpx_select_order_meta_keys( $keys ) {
$keys['Daypart:'] = 'daypart';
return $keys;
}
Zie onderstaande schermafbeelding voor een voorbeeld van hoe het eruit ziet op de pagina met bestelgegevens.
Dat is alles: je hebt zojuist een aangepast selectievakje toegevoegd aan de WooCommerce-afrekenpagina. Met enkele aanpassingen kan het veld worden aangepast. Ook is het mogelijk om gebruik te maken van een input field, text field, radio buttons etc.
In dit voorbeeld heb je alle code toegevoegd aan de functions.php van je WordPress thema. Dit is de meest eenvoudige methode, een beter methode is om hiervoor een aparte WordPress plugin te ontwikkelen. Zie voor meer informatie de WordPress Codex.
