自定义 WooCommerce 日期选择器结帐字段已保存并显示在订单和电子邮件中

Question

我在 WooCommerce 结账页面上添加了一个新的自定义日期选择器字段。

我正在使用 。一切都好在结帐页面上。

但现在我真的不知道如何在订单备注上保存和添加这个新字段。感谢任何帮助。

Answer 1

第 1 部分

以下将在结帐时显示自定义日期选择器字段，它将验证该字段并保存它。

所选日期将显示在管理员订单、客户订单和电子邮件中

To include this date on customer note, use the code from "section 2" at the end.

代码：

// 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');
    wp_enqueue_style('jquery-ui');
}

// Add custom checkout datepicker field
add_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' );
function checkout_display_datepicker_custom_field( $checkout ) {
    $field_id = 'my_datepicker';

    echo '<div id="datepicker-wrapper">';

    woocommerce_form_field( $field_id, array(
        'type' => 'text',
        'class'=> array( 'form-row-wide'),
        'label' => __('Choose a date'),
        'required' => true, // Or false
        
    ), '' );

    echo '<br></div>';


    // Jquery: Enable the Datepicker
    ?>
    <script language="javascript">
    jQuery( function($){
        var a = '#<?php echo $field_id ?>';
        $(a).datepicker({
            dateFormat: 'dd-mm-yy', // ISO formatting date
        });
    });
    </script>
    <?php
}

// Field validation
add_action( 'woocommerce_after_checkout_validation', 'checkout_datepicker_custom_field_validation', 10, 2 );
function checkout_datepicker_custom_field_validation( $data, $errors ) {
    $field_id = 'my_datepicker';

    if ( isset($_POST[$field_id]) && empty($_POST[$field_id]) ) {
        $errors->add( 'validation', __('You must choose a date on datepicker field.', 'woocommerce') ); 
    }
}

// Save field
add_action( 'woocommerce_checkout_create_order', 'save_datepicker_custom_field_value', 10, 2 );
function save_datepicker_custom_field_value( $order, $data ){
    $field_id = 'my_datepicker';
    $meta_key = '_'.$field_id;

    if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ) {
        $order->update_meta_data( $meta_key, esc_attr($_POST[$field_id]) ); 
    }
}


// Display custom field value in admin order pages
add_action( 'woocommerce_admin_order_data_after_billing_address', 'admin_display_date_custom_field_value', 10, 1 );
function admin_display_date_custom_field_value( $order ) {
    $meta_key   = '_my_datepicker';
    $meta_value = $order->get_meta( $meta_key ); // Get carrier company

    if( ! empty($meta_value) ) {
        // Display
        echo '<p><strong>' . __("Date", "woocommerce") . '</strong>: ' . $meta_value . '</p>';
    }
}

// Display custom field value after shipping line everywhere (orders and emails)
add_filter( 'woocommerce_get_order_item_totals', 'display_date_custom_field_value_on_order_item_totals', 10, 3 );
function display_date_custom_field_value_on_order_item_totals( $total_rows, $order, $tax_display ){
    $field_id   = 'my_datepicker';
    $meta_key   = '_my_datepicker';
    $meta_value = $order->get_meta( $meta_key ); // Get carrier company

    if( ! empty($meta_value) ) {
        $new_total_rows = [];

        // Loop through order total rows
        foreach( $total_rows as $key => $values ) {
            $new_total_rows[$key] = $values;

            // Inserting the carrier company under shipping method
            if( $key === 'shipping' ) {
                $new_total_rows[$field_id] = array(
                    'label' => __("Date", "woocommerce") . ':',
                    'value' => $meta_value,
                );
            }
        }
        return $new_total_rows;
    }
    return $total_rows;
}

代码进入您的活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

---

第 2 部分

要将此字段添加到客户订单备注，您将使用以下内容：

// 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');
    wp_enqueue_style('jquery-ui');
}

// Add custom checkout datepicker field
add_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' );
function checkout_display_datepicker_custom_field( $checkout ) {
    $field_id = 'my_datepicker';

    echo '<div id="datepicker-wrapper">';

    woocommerce_form_field( $field_id, array(
        'type' => 'text',
        'class'=> array( 'form-row-wide'),
        'label' => __('Choose a date'),
        'required' => true, // Or false
        
    ), '' );

    echo '<br></div>';


    // Jquery: Enable the Datepicker
    ?>
    <script language="javascript">
    jQuery( function($){
        var a = '#<?php echo $field_id ?>';
        $(a).datepicker({
            dateFormat: 'dd-mm-yy', // ISO formatting date
        });
    });
    </script>
    <?php
}

// Field validation
add_action( 'woocommerce_after_checkout_validation', 'checkout_datepicker_custom_field_validation', 10, 2 );
function checkout_datepicker_custom_field_validation( $data, $errors ) {
    $field_id = 'my_datepicker';

    if ( isset($_POST[$field_id]) && empty($_POST[$field_id]) ) {
        $errors->add( 'validation', __('You must choose a date on datepicker field.', 'woocommerce') ); 
    }
}

// Save field
add_action( 'woocommerce_checkout_create_order', 'save_datepicker_custom_field_value', 10, 2 );
function save_datepicker_custom_field_value( $order, $data ){
    $field_id = 'my_datepicker';
    $meta_key = '_'.$field_id;

    if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ) {
        $date = esc_attr($_POST[$field_id]);
        
        $order->update_meta_data( $meta_key, $date ); // Save date as order meta data
        
        $note = sprintf(__("Chosen date: %s.", "woocommerce"), $date );
        $note = isset($data['order_comments']) && ! empty($data['order_comments']) ? $data['order_comments'] . '. ' . $note : $note;
        
        // Save date on customer order note
        $order->set_customer_note( $note );

    }
}


// Display custom field value in admin order pages
add_action( 'woocommerce_admin_order_data_after_billing_address', 'admin_display_date_custom_field_value', 10, 1 );
function admin_display_date_custom_field_value( $order ) {
    $meta_key   = '_my_datepicker';
    $meta_value = $order->get_meta( $meta_key ); // Get carrier company

    if( ! empty($meta_value) ) {
        // Display
        echo '<p><strong>' . __("Chosen date", "woocommerce") . '</strong>: ' . $meta_value . '</p>';
    }
}

代码进入您的活动子主题（或活动主题）的 functions.php 文件。已测试并有效。