Como añadir un selector de fecha en el checkout de WooCommerce

Si vendes productos o servicios que requieran una entrega en una fecha concreta puedes añadir un selector de fecha en el checkout de WooCommerce de forma que tanto el cliente como tú que administras pedidos o servicios podáis tenerlo presente.

Para añadir el selector de fecha en el checkout de WooCommerce basta con añadir el siguiente snippet en el functions.php de tu theme:

// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() {

    // Only on front-end and checkout page
    if( is_admin() || ! is_checkout() ) return;

    // Load the datepicker jQuery-ui plugin script
    wp_enqueue_script( 'jquery-ui-datepicker' );
}

// Call datepicker functionality in your custom text field
add_action('woocommerce_after_order_notes', 'ncydesign_datepicker_field', 10, 1);
function ncydesign_datepicker_field( $checkout ) {

    date_default_timezone_set('Europe/Madrid');
    $mydateoptions = array('' => __('Seleccionar Fecha', 'woocommerce' ));

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Fecha de Entrega').'</h3>';

    // SCRIPT
    echo '
    <script>
        jQuery(function($){
            $("#datepicker").datepicker({ minDate: 0});
        });
    </script>';

   woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Fecha de Entrega'),
        'placeholder'       => __('Seleccionar fecha'),
        'options'     =>   $mydateoptions
        ),
    $checkout->get_value( 'cylinder_collect_date' ));

    echo '</div>';
}
/**
 * Process the checkout
 **/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    global $woocommerce;

    // Check if set, if its not set add an error.
    if (!$_POST['delivery_date'])
         wc_add_notice( '<strong>Fecha de entrega</strong> ' . __( 'es un dato obligatorio.', 'woocommerce' ), 'error' );
}
 /**
 * Update the order meta with custom fields values
 * */
 add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

 function my_custom_checkout_field_update_order_meta($order_id) {

if (!empty($_POST['delivery_date'])) {
    update_post_meta($order_id, 'Fecha de Entrega', sanitize_text_field($_POST['delivery_date']));
}
}

/* Save custom field */
 
add_action( 'woocommerce_checkout_update_order_meta', 'save_datepicker' );
  
function save_datepicker( $order_id ) { 
    if ( $_POST['delivery_date'] ) update_post_meta( $order_id, 'Fecha de Entrega', esc_attr( $_POST['delivery_date'] ) );
}
  
add_action( 'woocommerce_admin_order_data_after_billing_address', 'show_datepicker', 10, 1 );
   
function show_datepicker( $order ) {    
   $order_id = $order->get_id();
   if ( get_post_meta( $order_id, 'Fecha de Entrega', true ) ) echo '<p><strong>Fecha de Entrega:</strong> ' . get_post_meta( $order_id, 'Fecha de Entrega', true ) . '</p>';
}

/* Save custom field email */
add_action( 'woocommerce_email_after_order_table', 'show_datepicker_emails', 20, 4 );
  
function show_datepicker_emails( $order, $sent_to_admin, $plain_text, $email ) {
    if ( get_post_meta( $order->get_id(), 'Fecha de Entrega', true ) ) echo '<p><strong>Fecha de Entrega:</strong> ' . get_post_meta( $order->get_id(), 'Fecha de Entrega', true ) . '</p>';
}

En este snippet hay varios aspectos a tener en cuenta:

1 .- Por un lado las zonas horarias, en nuestro caso hemos indicado en la linea 16 la zona horaria correspondiente a España, puedes ver el resto de zonas horarias aquí y reemplazar en esa linea la que corresponda con la tuya.

2.- En este snippet seleccionar la fecha es obligatorio, si quieres hacerlo opcional basta con añadir en la linea 34 ‘false’ (sin comillas)

3.- La fecha de entrega también se muestra en la información del pedido y en los emails que envía WooCommerce

Como siempre, recuerda tener un backup previo de tu functions.php antes de añadir este snippet.

Fuente