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

Posted 2023-03-25

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

【英文标题】：Custom WooCommerce datepicker checkout field saved and displayed on orders and emails

【发布时间】：2020-12-03 04:25:34

【问题描述】：

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

我正在使用 Enabling a date-picker in Woocommerce checkout fields。在结帐页面上一切正常。

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

【问题讨论】：

您好，我不使用 ACF pugin.. 这只是我在 function.php 文件中添加的代码！

【参考方案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 文件中。经过测试并且可以工作。

【讨论】：

你好，我已经添加了代码，但之后网站就坏了！所以，我相信这对我不起作用..:(

@AlinDragoescu 我重新检查了代码，然后我会回复您...确保您已删除旧代码。

你好@LoicTheAztec。请让我知道我必须对代码进行一些更改吗？因为我尝试过使用相同的代码，但这是行不通的..:(

你好，亲爱的 Loic @TheAztec 我在页面上做了一个轻巧的更改，我向您确认，这工作非常好！这真的很好！非常感谢所有...

@LoicTheAztec 非常感谢您的代码。完美运行。在订单的管理页面上，自定义字段确实在订单中，但是有没有办法在订单列表中看到它，以便我可以按此日期对订单进行排序？