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:


add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() {


    if( is_admin() || ! is_checkout() ) return;


    wp_enqueue_script( 'jquery-ui-datepicker' );
}


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>';


    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>';
}

add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    global $woocommerce;


    if (!$_POST['delivery_date'])
         wc_add_notice( '<strong>Fecha de entrega</strong> ' . __( 'es un dato obligatorio.', 'woocommerce' ), 'error' );
}
 
 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']));
}
}


 
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>';
}


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

Deja un comentario