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

Question

我在 WooCommerce 结帐页面上添加了一个新的自定义日期选择器字段。我正在使用Enabling a date-picker in Woocommerce checkout fields。一切都OK 在结账页面。但现在我真的不知道如何在订单备注上保存并添加这个新字段。任何帮助表示赞赏。

Answer 1

第1节

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

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

要在客户注释中包含此日期，请使用末尾“第 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]) ) {

        $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 文件中。经过测试并有效。