CODEWITHSUNDEEP
woocommerce
user3696987
user3696987

Reputation: 87

Time Picker for My WooCommerce Checkout Form

Does anyone know of any code I can add to my theme so that my checkout form includes a field for picking a delivery time? My website is monpetitfour.com

EDIT: So, I found coding that works in terms of outputting the time options for my customers to choose from, but I'm wondering how I can get the option they choose to be recorded in the woocommerce "thank you" page and the customer & admin new order emails? Here's the code:

<p class="form-row my-field-class form-row-wide woocommerce-validated" 
   id="time_slot_field">
<label for="time_slot" class="">Choose a Delivery Time</label>
<select name="time_slot" id="time_slot" class="select" required="true">  
<option value="">Select</option>
<option value="07:00 AM - 07:30 AM">07:00 AM - 07:30 AM</option>
<option value="07:30 PM - 08:00 AM">07:30 AM - 08:00 AM</option>
<option value="08:00 AM - 08:30 AM">08:00 AM - 08:30 AM</option>    
....    
</select></p>

Upvotes: 0

Views: 3945

Answers (2)

user3696987
user3696987

Reputation: 87

I used HelgatheViking's code with a few tweaks for a dropdown option so I'm just posting that first section of the code "//add a new checkout field" here in case anyone else wants to add a delivery time option to their checkout: 

// Add a new checkout field
function kia_filter_checkout_fields($fields){
    $fields['extra_fields'] = array(
            'some_field' => array(
                'required'      => true,
                'label' => __( 'Delivery Time' ),
                'type'        => 'select',
                'options'     => array(
                '7:00AM-7:30AM' => __('7:00 AM - 7:30 AM', 'woocommerce' ),
                '7:30AM-8:00AM' => __('7:30 AM - 8:00 AM', 'woocommerce' ),

                   ....

                '5:30PM-6:00PM' => __('5:30 PM - 6:00 PM', 'woocommerce' )

            )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

(P.S.) Make sure you check out her site for the code you need to add the resulting delivery time (or field value) to your customer & admin new order emails.

UPDATE: To add the delivery time to the order details page (the thankyou.php template) using all the example of all the coding mentioned here in this thread, simply add the following code to your theme's functions.php file:

add_action( 'woocommerce_order_details_after_order_table',     'nolo_custom_field_display_cust_order_meta', 10, 1 );

function nolo_custom_field_display_cust_order_meta($order){
    echo '<p><strong>'.__('Delivery Time').':</strong> ' .     get_post_meta( $order->id, '_some_field', true ). '</p>';

}

Upvotes: 1

helgatheviking
helgatheviking

Reputation: 26329

As described in WooCommerce Customize Checkout Fields here's how you create a custom checkout field:

// Add a new checkout field
function kia_filter_checkout_fields($fields){
    $fields['extra_fields'] = array(
            'some_field' => array(
                'type' => 'text',
                'required'      => true,
                'label' => __( 'Some field' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

// display the extra field on the checkout form
function kia_extra_checkout_fields(){ 

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    <?php foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );

// save the extra field when checkout is processed
function kia_save_extra_checkout_fields( $order_id, $posted ){
    if( isset( $posted['some_field'] ) ) {
        update_post_meta( $order_id, '_some_field', sanitize_text_field( $posted['some_field'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'kia_save_extra_checkout_fields', 10, 2 );

// display the extra data in the order admin panel
function kia_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">
        <h4><?php _e( 'Extra Details', 'woocommerce' ); ?></h4>
        <?php 
            echo '<p><strong>' . __( 'Some field' ) . ':</strong>' . get_post_meta( $order->id, '_some_field', true ) . '</p>'; ?>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'kia_display_order_data_in_admin' );

Upvotes: 1

Related Questions