Añadir un campo de selección en el checkout de WooCommerce

Es bastante común encontrar tutoriales sobre cómo añadir un campo en el formulario de checkout o pedido de WooCommerce, por ejemplo con el NIF, necesario en España si queremos emitir factura y que no viene por defecto con WooCommerce.

En este caso, lo que queremos añadir es un campo select, un desplegable con varias opciones para que el usuario seleccione una antes de enviar su pedido.

El proceso es muy parecido al caso de un campo de texto sencillo, pero con la peculiaridad de que debemos mostrar las opciones posibles y guardarlas.

1- Crear el campo con las opciones posibles:

//* Añadimos el campo select en el formulario, antes del campo de notas
add_action('woocommerce_before_order_notes', 'wps_add_select_checkout_field');
function wps_add_select_checkout_field( $checkout ) {
    echo '<h3>'.__('Criterio de sustitución').'</h3><p>Seleccione que quiere que hagamos en caso de que alguna de las referencias solicitadas ya no esté disponible</p>';
    woocommerce_form_field( 'criteriosustitucion', array(
    'type' => 'select',
    'class' => array( 'wps-drop' ),
    'label' => __( 'Opciones de sustitución' ),
    'options' => array(
        'blank' => __( 'Seleccione una opción', 'wps' ),
        'Más unidades de otra referencia solicitada' => __( 'Compensar con más unidades de otra referencia solicitada', 'wps' ),
        'Abonar importe solicitado' => __( 'Abonar el importe solicitado', 'wps' ),
        'Más unidades de otra referencia parecida' => __( 'Compensar con unidades de otra referencia parecida', 'wps' )
        )
    ),
    $checkout->get_value( 'criteriosustitucion' ));
}

2- En el caso que queramos que sea obligatorio, añadimos el siguiente código de valoración, con el mensaje de error correspondiente:

//* Revisamos el campo en el proceso de envío del formulario:
 add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
 
function wps_select_checkout_field_process() {
 global $woocommerce;
 // Si está seleccionada la opción 'blank', lanza un error
 if ($_POST['criteriosustitucion'] == "blank")
 wc_add_notice( '<strong>Por favor, seleccione una de las opciones de sustitución</strong>', 'error' );
}

3- Añadimos la función para guardar el valor del campo junto con el resto de campos del pedido:

//* Guardamos los datos del campo
 add_action('woocommerce_checkout_update_order_meta', 'wps_select_checkout_field_update_order_meta');
 function wps_select_checkout_field_update_order_meta( $order_id ) {
        if ($_POST['criteriosustitucion']) update_post_meta( $order_id, 'criteriosustitucion', esc_attr($_POST['criteriosustitucion']));
 }

4- Mostramos el valor en el detalle del pedido y los emails de confirmación:

//* Mostramos el valor del campo en el pedido
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wps_select_checkout_field_display_admin_order_meta', 10, 1 );
function wps_select_checkout_field_display_admin_order_meta($order){
        echo '<br><p><strong>'.__('Criterio de sustitución').':</strong> ' . get_post_meta( $order->id, 'criteriosustitucion', true ) . '</p>';
}
//* y en los emails de confirmación de pedido
add_filter('woocommerce_email_order_meta_keys', 'wps_select_order_meta_keys');
function wps_select_order_meta_keys( $keys ) {
 
       $keys['Criterio de sustitución'] = 'criteriosustitucion';
       return $keys;
 
}

Y ya está! En pocos pasos podemos personalizar el checkout de nuestra tienda solicitando datos o información adicional a nuestros clientes.

Si te interesa saber más sobre cómo personalizar la página de checkout, no te pierdas esta guía

Este código está basado en el artículo: https://www.wpstud.io/add-custom-select-field-woocommerce-checkout-page/