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

Question

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

我正在使用Enabling a date-picker in Woocommerce checkout fields。一切都OK 在结账页面。

但现在我真的不知道如何在订单备注上保存并添加这个新字段。任何帮助表示赞赏。

Answer 1

第1节以下将在结帐时显示自定义日期选择器字段，它将验证该字段并保存它。所选日期将显示在管理订单、客户订单和电子邮件上要在客户注释中包含此日期，请使用末尾“第 2 部分”中的代码。代码：// Register main datepicker jQuery plugin scriptadd_action( 'wp_enqueue_scripts', 'enabling_date_picker' );function enabling_date_picker() {&nbsp; &nbsp; // Only on front-end and checkout page&nbsp; &nbsp; if( is_admin() || ! is_checkout() ) return;&nbsp; &nbsp; // Load the datepicker jQuery-ui plugin script&nbsp; &nbsp; wp_enqueue_script('jquery-ui-datepicker');&nbsp; &nbsp; wp_enqueue_style('jquery-ui');}// Add custom checkout datepicker fieldadd_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' );function checkout_display_datepicker_custom_field( $checkout ) {&nbsp; &nbsp; $field_id = 'my_datepicker';&nbsp; &nbsp; echo '<div id="datepicker-wrapper">';&nbsp; &nbsp; woocommerce_form_field( $field_id, array(&nbsp; &nbsp; &nbsp; &nbsp; 'type' => 'text',&nbsp; &nbsp; &nbsp; &nbsp; 'class'=> array( 'form-row-wide'),&nbsp; &nbsp; &nbsp; &nbsp; 'label' => __('Choose a date'),&nbsp; &nbsp; &nbsp; &nbsp; 'required' => true, // Or false&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ), '' );&nbsp; &nbsp; echo '<br></div>';&nbsp; &nbsp; // Jquery: Enable the Datepicker&nbsp; &nbsp; ?>&nbsp; &nbsp; <script language="javascript">&nbsp; &nbsp; jQuery( function($){&nbsp; &nbsp; &nbsp; &nbsp; var a = '#<?php echo $field_id ?>';&nbsp; &nbsp; &nbsp; &nbsp; $(a).datepicker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat: 'dd-mm-yy', // ISO formatting date&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php}// Field validationadd_action( 'woocommerce_after_checkout_validation', 'checkout_datepicker_custom_field_validation', 10, 2 );function checkout_datepicker_custom_field_validation( $data, $errors ) {&nbsp; &nbsp; $field_id = 'my_datepicker';&nbsp; &nbsp; if ( isset($_POST[$field_id]) && empty($_POST[$field_id]) ) {&nbsp; &nbsp; &nbsp; &nbsp; $errors->add( 'validation', __('You must choose a date on datepicker field.', 'woocommerce') );&nbsp;&nbsp; &nbsp; }}// Save fieldadd_action( 'woocommerce_checkout_create_order', 'save_datepicker_custom_field_value', 10, 2 );function save_datepicker_custom_field_value( $order, $data ){&nbsp; &nbsp; $field_id = 'my_datepicker';&nbsp; &nbsp; $meta_key = '_'.$field_id;&nbsp; &nbsp; if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ) {&nbsp; &nbsp; &nbsp; &nbsp; $order->update_meta_data( $meta_key, esc_attr($_POST[$field_id]) );&nbsp;&nbsp; &nbsp; }}// Display custom field value in admin order pagesadd_action( 'woocommerce_admin_order_data_after_billing_address', 'admin_display_date_custom_field_value', 10, 1 );function admin_display_date_custom_field_value( $order ) {&nbsp; &nbsp; $meta_key&nbsp; &nbsp;= '_my_datepicker';&nbsp; &nbsp; $meta_value = $order->get_meta( $meta_key ); // Get carrier company&nbsp; &nbsp; if( ! empty($meta_value) ) {&nbsp; &nbsp; &nbsp; &nbsp; // Display&nbsp; &nbsp; &nbsp; &nbsp; echo '<p><strong>' . __("Date", "woocommerce") . '</strong>: ' . $meta_value . '</p>';&nbsp; &nbsp; }}// 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 ){&nbsp; &nbsp; $field_id&nbsp; &nbsp;= 'my_datepicker';&nbsp; &nbsp; $meta_key&nbsp; &nbsp;= '_my_datepicker';&nbsp; &nbsp; $meta_value = $order->get_meta( $meta_key ); // Get carrier company&nbsp; &nbsp; if( ! empty($meta_value) ) {&nbsp; &nbsp; &nbsp; &nbsp; $new_total_rows = [];&nbsp; &nbsp; &nbsp; &nbsp; // Loop through order total rows&nbsp; &nbsp; &nbsp; &nbsp; foreach( $total_rows as $key => $values ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $new_total_rows[$key] = $values;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Inserting the carrier company under shipping method&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( $key === 'shipping' ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $new_total_rows[$field_id] = array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'label' => __("Date", "woocommerce") . ':',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'value' => $meta_value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return $new_total_rows;&nbsp; &nbsp; }&nbsp; &nbsp; return $total_rows;}代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。第2节要将此字段添加到客户订单备注中，您将使用以下内容：// Register main datepicker jQuery plugin scriptadd_action( 'wp_enqueue_scripts', 'enabling_date_picker' );function enabling_date_picker() {&nbsp; &nbsp; // Only on front-end and checkout page&nbsp; &nbsp; if( is_admin() || ! is_checkout() ) return;&nbsp; &nbsp; // Load the datepicker jQuery-ui plugin script&nbsp; &nbsp; wp_enqueue_script('jquery-ui-datepicker');&nbsp; &nbsp; wp_enqueue_style('jquery-ui');}// Add custom checkout datepicker fieldadd_action( 'woocommerce_before_order_notes', 'checkout_display_datepicker_custom_field' );function checkout_display_datepicker_custom_field( $checkout ) {&nbsp; &nbsp; $field_id = 'my_datepicker';&nbsp; &nbsp; echo '<div id="datepicker-wrapper">';&nbsp; &nbsp; woocommerce_form_field( $field_id, array(&nbsp; &nbsp; &nbsp; &nbsp; 'type' => 'text',&nbsp; &nbsp; &nbsp; &nbsp; 'class'=> array( 'form-row-wide'),&nbsp; &nbsp; &nbsp; &nbsp; 'label' => __('Choose a date'),&nbsp; &nbsp; &nbsp; &nbsp; 'required' => true, // Or false&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; ), '' );&nbsp; &nbsp; echo '<br></div>';&nbsp; &nbsp; // Jquery: Enable the Datepicker&nbsp; &nbsp; ?>&nbsp; &nbsp; <script language="javascript">&nbsp; &nbsp; jQuery( function($){&nbsp; &nbsp; &nbsp; &nbsp; var a = '#<?php echo $field_id ?>';&nbsp; &nbsp; &nbsp; &nbsp; $(a).datepicker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dateFormat: 'dd-mm-yy', // ISO formatting date&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; &nbsp; <?php}// Field validationadd_action( 'woocommerce_after_checkout_validation', 'checkout_datepicker_custom_field_validation', 10, 2 );function checkout_datepicker_custom_field_validation( $data, $errors ) {&nbsp; &nbsp; $field_id = 'my_datepicker';&nbsp; &nbsp; if ( isset($_POST[$field_id]) && empty($_POST[$field_id]) ) {&nbsp; &nbsp; &nbsp; &nbsp; $errors->add( 'validation', __('You must choose a date on datepicker field.', 'woocommerce') );&nbsp;&nbsp; &nbsp; }}// Save fieldadd_action( 'woocommerce_checkout_create_order', 'save_datepicker_custom_field_value', 10, 2 );function save_datepicker_custom_field_value( $order, $data ){&nbsp; &nbsp; $field_id = 'my_datepicker';&nbsp; &nbsp; $meta_key = '_'.$field_id;&nbsp; &nbsp; if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ) {&nbsp; &nbsp; &nbsp; &nbsp; $date = esc_attr($_POST[$field_id]);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $order->update_meta_data( $meta_key, $date ); // Save date as order meta data&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $note = sprintf(__("Chosen date: %s.", "woocommerce"), $date );&nbsp; &nbsp; &nbsp; &nbsp; $note = isset($data['order_comments']) && ! empty($data['order_comments']) ? $data['order_comments'] . '. ' . $note : $note;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Save date on customer order note&nbsp; &nbsp; &nbsp; &nbsp; $order->set_customer_note( $note );&nbsp; &nbsp; }}// Display custom field value in admin order pagesadd_action( 'woocommerce_admin_order_data_after_billing_address', 'admin_display_date_custom_field_value', 10, 1 );function admin_display_date_custom_field_value( $order ) {&nbsp; &nbsp; $meta_key&nbsp; &nbsp;= '_my_datepicker';&nbsp; &nbsp; $meta_value = $order->get_meta( $meta_key ); // Get carrier company&nbsp; &nbsp; if( ! empty($meta_value) ) {&nbsp; &nbsp; &nbsp; &nbsp; // Display&nbsp; &nbsp; &nbsp; &nbsp; echo '<p><strong>' . __("Chosen date", "woocommerce") . '</strong>: ' . $meta_value . '</p>';&nbsp; &nbsp; }}代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。