选择 WooCommerce 交付方式后选择日期和时间

Question

在选择交付方式并将这些字段放入 中后，我需要选择产品的交付时间和日期woocommerce_after_shipping_rate。

照我看来。客户选择送货方式，例如“快递”。

之后，会出现两个复选框：

1. 尽快

2. 交货日期。

如果客户选择“交货日期”，则会出现一个新字段，其中包含交货日期和时间。这里就是这样的

根据“在 WooCommerce Checkout 自定义文本字段中启用日期选择器”答案代码，我为交货日期和时间“尽快”和“交货日期”创建了其他字段。我从这里下载了 DateTimePicker 。

这是我的代码：

// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {

// Only on front-end and checkout page
if( is_admin() || ! is_checkout() ) return;

// Load the datetimepicker jQuery-ui plugin script
    wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array());
    wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array());

}

// Call datetimepicker functionality in your custom text field
add_action('woocommerce_before_order_notes', 'my_custom_checkout_field', 10, 1);

function my_custom_checkout_field( $checkout ) {

date_default_timezone_set('Europe');
$mydateoptions = array('' => __('', 'woocommerce' ));

echo '<div id="my_custom_checkout_field">
<h3>'.__('Delivery Info').'</h3>';

echo '
<script>

    jQuery(function($){
        $("#datetimepicker").datetimepicker({format:\'d.m.Y H:i\', allowTimes:[
        \'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',
        \'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',
        \'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']
        });
    });
</script>';

// Checkbox ASAP
woocommerce_form_field( 'order_delivery_asap', array(
'type'          => 'checkbox',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('As Soon As Possible'),
'checked'       => '',
'default'       => 0,
), $checkout->get_value( 'order_delivery_asap' ));


// Checkbox Delivery Date
woocommerce_form_field( 'order_delivery_date', array(
'type'          => 'checkbox',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('Delivery Date'),
'checked'       => '',
'default'       => 0,
), $checkout->get_value( 'order_delivery_date' ));

// DateTimePicker
woocommerce_form_field( 'order_pickup_date', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'id'            => 'datetimepicker',
    'required'      => false,
    'label'         => __('Select date'),
    'placeholder'   => __(''),
    'options'       => $mydateoptions
    ),$checkout->get_value( 'order_pickup_date' ));         

echo '</div>';
}

据我了解，我需要在此处包含条件逻辑，以便在选择“交付日期”复选框时，会出现一个带有 DateTimePicker 的字段。以便保存 ASAP 复选框和 DateTimePicker 的选定值。

不幸的是，我不知道如何正确地完成这一切。我将很高兴得到您的帮助！

Answer 1

添加更新- 以下代码将：

\n\n

\n
• 根据所选复选框显示/隐藏日期时间选择器字段\xe2\x80\xa6
\n
• 处理日期字段，检查可见时不为空
\n
• 保存所选选项和所选日期时间（如果选择了该选项）
\n

\n\n

我重新审视了您的代码，更改了您的字段并添加了一些其他内容。

\n\n

1) 带复选框

\n\n

// Register main datetimepicker jQuery plugin script\nadd_action( \'wp_enqueue_scripts\', \'enabling_date_time_picker\' );\nfunction enabling_date_time_picker() {\n\n    // Only on front-end and checkout page\n    if( is_checkout() && ! is_wc_endpoint_url() ) :\n\n    // Load the datetimepicker jQuery-ui plugin script\n    wp_enqueue_style( \'datetimepicker\', get_stylesheet_directory_uri() . \'/assets/css/jquery.datetimepicker.min.css\', array());\n    wp_enqueue_script(\'datetimepicker\', get_stylesheet_directory_uri() . \'/js/jquery.datetimepicker.full.min.js\', array(\'jquery\'), \'1.0\', false );\n    endif;\n}\n\n// Display custom checkout fields (+ datetime picker)\nadd_action(\'woocommerce_before_order_notes\', \'display_custom_checkout_fields\', 10, 1 );\nfunction display_custom_checkout_fields( $checkout ) {\n    // Define the time zone\n    date_default_timezone_set(\'Europe/Paris\'); // <== Set the time zone (http://php.net/manual/en/timezones.php)\n\n    echo \'<div id="my_custom_checkout_field">\n    <h3>\'.__(\'Delivery Info\').\'</h3>\';\n\n    // Hide datetimepicker container field\n    echo\'<style> #datetimepicker_field.off { display:none; } </style>\';\n\n    // Checkbox ASAP\n    woocommerce_form_field( \'delivery_asap\', array(\n        \'type\'          => \'checkbox\',\n        \'class\'         => array(\'my-field-class form-row-wide\'),\n        \'label\'         => __("As Soon As Possible", "woocommerce"),\n        \'checked\'       => \'\',\n        \'default\'       => 0,\n    ), \'\');\n\n\n    // Checkbox Delivery Date\n    woocommerce_form_field( \'delivery_option\', array(\n        \'type\'          => \'checkbox\',\n        \'class\'         => array(\'my-field-class form-row-wide\'),\n        \'label\'         => __("Choose a delivery Date", "woocommerce"),\n        \'checked\'       => \'\',\n        \'default\'       => 0,\n    ), \'\');\n\n    // DateTimePicker\n    woocommerce_form_field( \'delivery_date\', array(\n        \'type\'          => \'text\',\n        \'class\'         => array(\'my-field-class form-row-wide off\'),\n        \'id\'            => \'datetimepicker\',\n        \'required\'      => false,\n        \'label\'         => __(\'Select date\'),\n        \'placeholder\'   => __(\'\'),\n        \'options\'       => array(\'\' => __(\'\', \'woocommerce\' ))\n    ),\'\');\n\n    echo \'</div>\';\n}\n\n// The jQuery script\nadd_action( \'wp_footer\', \'checkout_delivery_jquery_script\');\nfunction checkout_delivery_jquery_script() {\n    // Only on front-end and checkout page\n    if( is_checkout() && ! is_wc_endpoint_url() ) :\n\n    ?>\n    <script>\n    jQuery(function($){\n        var a = \'input[name="delivery_asap"]\',\n            c = \'input[name="delivery_option"]\',\n            d = \'#datetimepicker\',\n            f = d+\'_field\';\n\n        $(f).hide();\n        $(a).prop(\'checked\', true);\n\n        // First checkbox\n        $(a).change(function(){\n            if( $(this).prop(\'checked\') == true ){\n                $(f).hide();\n                $(c).prop(\'checked\', false);\n            } else {\n                $(f).show();\n                $(c).prop(\'checked\', true);\n            }\n        });\n\n        // Second checkbox\n        $(c).change(function(){\n            if( $(this).prop(\'checked\') == true ){\n                $(f).show();\n                $(a).prop(\'checked\', false);\n            } else {\n                $(f).hide();\n                $(a).prop(\'checked\', true);\n            }\n        });\n\n        $(d).datetimepicker({\n            format: \'d.m.Y H:i\',\n            allowTimes:[ \'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',\n                \'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',\n                \'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']\n        });\n    });\n    </script>\n    <?php\n\n    endif;\n}\n\n// Check that the delivery date is not empty when it\'s selected\nadd_action( \'woocommerce_checkout_process\', \'check_datetimepicker_field\' );\nfunction check_datetimepicker_field() {\n    if ( isset($_POST[\'delivery_option\']) && empty($_POST[\'delivery_date\']) ) {\n        wc_add_notice( __( \'Error: You must choose a delivery date and time\', \'woocommerce\' ), \'error\' );\n    }\n}\n\n// Check that the delivery date is not empty when it\'s selected\nadd_action( \'woocommerce_checkout_create_order\', \'save_order_delivery_data\', 10, 2 );\nfunction save_order_delivery_data( $order, $data ) {\n    if ( isset($_POST[\'delivery_option\']) && $_POST[\'delivery_option\'] && ! empty($_POST[\'delivery_date\']) ) {\n        $order->update_meta_data( \'_delivery_datetime\', sanitize_text_field( $_POST[\'delivery_date\'] ) );\n        $order->update_meta_data( \'_delivery_option\', \'date\' );\n    } elseif( isset($_POST[\'delivery_asap\']) && $_POST[\'delivery_asap\'] ) {\n        $order->update_meta_data( \'_delivery_option\', \'azap\' );\n    }\n}\n

\n\n

代码位于function.php您的活动子主题（或活动主题）的文件中。经过测试并有效。

\n\n\n\n

2）用单选按钮添加

\n\n

用单选按钮替换复选框可能会更好：

\n\n

// Register main datetimepicker jQuery plugin script\nadd_action( \'wp_enqueue_scripts\', \'enabling_date_time_picker\' );\nfunction enabling_date_time_picker() {\n\n    // Only on front-end and checkout page\n    if( is_checkout() && ! is_wc_endpoint_url() ) :\n\n    // Load the datetimepicker jQuery-ui plugin script\n    wp_enqueue_style( \'datetimepicker\', get_stylesheet_directory_uri() . \'/assets/css/jquery.datetimepicker.min.css\', array());\n    wp_enqueue_script(\'datetimepicker\', get_stylesheet_directory_uri() . \'/js/jquery.datetimepicker.full.min.js\', array(\'jquery\'), \'1.0\', false );\n    endif;\n}\n\n// Display custom checkout fields (+ datetime picker)\nadd_action(\'woocommerce_before_order_notes\', \'display_custom_checkout_fields\', 10, 1 );\nfunction display_custom_checkout_fields( $checkout ) {\n    // Define the time zone\n    date_default_timezone_set(\'Europe/Paris\'); // <== Set the time zone (http://php.net/manual/en/timezones.php)\n\n    echo \'<div id="my_custom_checkout_field">\n    <h3>\'.__(\'Delivery Info\').\'</h3>\';\n\n    // Hide datetimepicker container field\n    echo\'<style> #datetimepicker_field.off { display:none; } </style>\';\n\n    // Radio buttons field: Selected option\n    woocommerce_form_field( \'delivery_option\', array(\n        \'type\'      => \'radio\',\n        \'class\'     => array(\'my-field-class form-row-wide\'),\n        \'options\'   => array(\n            \'asap\'  => __(\'As Soon As Possible\'),\n            \'date\'  => __(\'Select Delivery Date\'),\n        ),\n    ), \'asap\' );\n\n    // DateTimePicker\n    woocommerce_form_field( \'delivery_date\', array(\n        \'type\'          => \'text\',\n        \'class\'         => array(\'my-field-class form-row-wide off\'),\n        \'id\'            => \'datetimepicker\',\n        \'required\'      => false,\n        \'label\'         => __(\'Select date\'),\n        \'placeholder\'   => __(\'\'),\n        \'options\'       => array(\'\' => __(\'\', \'woocommerce\' ))\n    ),\'\');\n\n    echo \'</div>\';\n}\n\n// The jQuery script\nadd_action( \'wp_footer\', \'checkout_delivery_jquery_script\');\nfunction checkout_delivery_jquery_script() {\n    // Only on front-end and checkout page\n    if( is_checkout() && ! is_wc_endpoint_url() ) :\n\n    ?>\n    <script>\n    jQuery(function($){\n        var d = \'#datetimepicker\',\n            f = d+\'_field\',\n            r = \'input[name="delivery_option"]\';\n\n        $(f).hide();\n\n        // On radio button change\n        $(r).change(function(){\n            if( $(this).val() == \'date\' ){\n                $(f).show();\n            } else {\n                $(f).hide();\n            }\n        });\n\n        // Enable the datetime picker field\n        $(d).datetimepicker({\n            format: \'d.m.Y H:i\',\n            allowTimes:[ \'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',\n                \'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',\n                \'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']\n        });\n    });\n    </script>\n    <?php\n\n    endif;\n}\n\n// Check that the delivery date is not empty when it\'s selected\nadd_action( \'woocommerce_checkout_process\', \'check_datetimepicker_field\' );\nfunction check_datetimepicker_field() {\n    if ( isset($_POST[\'delivery_option\']) && $_POST[\'delivery_option\'] === \'date\'\n    && isset($_POST[\'delivery_date\']) && empty($_POST[\'delivery_date\']) ) {\n        wc_add_notice( __( \'Error: You must choose a delivery date and time\', \'woocommerce\' ), \'error\' );\n    }\n}\n\n// Check that the delivery date is not empty when it\'s selected\nadd_action( \'woocommerce_checkout_create_order\', \'save_order_delivery_data\', 10, 2 );\nfunction save_order_delivery_data( $order, $data ) {\n    if ( isset($_POST[\'delivery_option\']) && $_POST[\'delivery_option\'] == \'date\' && ! empty($_POST[\'delivery_date\']) ) {\n        $order->update_meta_data( \'_delivery_datetime\', sanitize_text_field( $_POST[\'delivery_date\'] ) );\n    }\n    if( isset($_POST[\'delivery_option\']) ) {\n        $order->update_meta_data( \'_delivery_option\', esc_attr( $_POST[\'delivery_option\'] ) );\n    }\n}\n

\n\n

代码位于function.php您的活动子主题（或活动主题）的文件中。经过测试并有效。

\n\n\n\n

获取您的配送自定义字段值

\n\n

要获取交付自定义字段值，您将使用：

\n\n

1）From $order，WC_OrderObject（使用WC_Data get_meta()方法）：

\n\n

$delivery_option = $order->get_meta(\'_delivery_option\');\n\nif( $delivery_option == \'date\' ) {\n    $delivery_datetime = $order->get_meta(\'_delivery_datetime\');\n}\n

\n\n

2）From $order_id，订单ID（使用WordPressget_post_meta()功能）

\n\n

$delivery_option = get_post_meta($order_id, \'_delivery_option\', true);\n\nif( $delivery_option == \'date\' ) {\n    $delivery_datetime = get_post_meta($order_id, \'_delivery_datetime\', true);\n}\n

\n\n

\n

以下内容： 在 WooCommerce 订单和电子邮件通知中显示自定义字段值

\n

\n\n\n\n

相关主题： 在 WooCommerce Checkout 自定义文本字段中启用日期选择器

\n