我的 WooCommerce 结账表格的时间选择器

Question

有谁知道我可以添加到我的主题中的任何代码，以便我的结帐表单包含一个用于选择交货时间的字段？我的网站是 monpetitfour.com

编辑：所以，我发现编码可以输出时间选项供我的客户选择，但我想知道我如何才能让他们选择的选项记录在 woocommerce "thank you" 页面和客户 &管理新订单电子邮件？这是代码：

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

Answer 1

如 WooCommerce Customize Checkout Fields 中所述，以下是创建自定义结帐字段的方法：

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

Answer 2

我使用 HelgatheViking 的代码对下拉选项进行了一些调整，所以我只是在此处发布代码的第一部分“//添加新的结帐字段”，以防其他人想要添加交货时间选项结帐：

// 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.) 确保您查看她的网站以获取将生成的交货时间（或字段值）添加到您的客户和管理员新订单电子邮件中所需的代码。

更新： 要使用此线程中此处提到的所有编码示例，将交货时间添加到订单详细信息页面（thankyou.php 模板），只需将以下代码添加到主题的 functions.php 文件中：

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

}

我的 WooCommerce 结账表格的时间选择器

Time Picker for My WooCommerce Checkout Form

woocommerce