如何在 WooCommerce 中將日期字段添加到結帳

許多在線商店在結帳頁面上需要自定義字段。 例如，蛋糕店可能需要結帳頁面上的交貨日期字段。

WooCommerce 的美妙之處在於它允許您在結帳頁面上添加自定義字段，例如在賬單和運輸字段之後，或在下訂單按鈕之前。

WooCommerce 將日期字段添加到結帳

在這篇文章中，您將學習如何在 WooCommerce 結帳頁面上添加交貨日期字段。 我將在計費字段之後添加它。 此字段將允許客戶為其訂單選擇交貨日期。 此外，我將分享如何在電子郵件通知和訂單接收頁面上顯示自定義字段。

1. 在 WooCommerce 結帳頁面上添加自定義日期字段

WooCommerce 允許您根據將使用的鉤子將自定義字段添加到各個位置。 WooCommerce 在結帳頁面上定義了許多操作。 對於本教程，我將在帳單或送貨地址字段之後添加該字段。

要在此處添加自定義字段，我們將使用操作woocommerce_after_checkout_billing_form 。 在 functions.php 文件中添加以下代碼：

 add_action('woocommerce_after_checkout_billing_form', 'njengah_extra_fields_after_billing_address', 10, 1);

功能 njengah_extra_fields_after_billing_address () {

            _e("交貨日期：", "add_extra_fields");

            ?>

            <br>

            <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="交貨日期">

  <?php

}

這是結果：

客戶需要選擇訂單的交貨日期。 這意味著我們需要為這個字段添加一個日曆。 或者，您可以嘗試使用簡單的文本字段來保持簡單。

我們將使用 jQuery 日期選擇器。 這意味著我們需要使用 WordPress wp_enqueue_scripts 操作來包含其必要的 JavaScript 和 CSS 文件。

 add_action('woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address', 10, 1);

功能 display_extra_fields_after_billing_address () {

_e("交貨日期：", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="交貨日期">

<腳本>

jQuery(文檔).ready(函數($){

$( ".add_delivery_date").datepicker( {

分鐘日期：0，

});

});

</腳本>

<?php

}

add_action('wp_enqueue_scripts', 'enqueue_datepicker');

函數 enqueue_datepicker() {

如果 ( is_checkout() ) {

// 加載 datepicker 腳本（在 WordPress 中預註冊）。

wp_enqueue_script('jquery-ui-datepicker');

// 您需要日期選擇器的樣式。 為簡單起見，我已鏈接到 Google 託管的 jQuery UI CSS。

wp_register_style('jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style('jquery-ui');

}

}

這是結果：

代碼如何運作

我已將函數display_extra_fields_after_billing_address()附加到 WooCommerce 操作。 首先，我們打印標籤“Delivery Date”並為日期選擇器添加一個輸入文本類型字段，我們可以使用jquery datepicker( ) 函數。

之後，我將enqueue_datepicker()函數附加到 WordPress 操作中。 在這個函數中，我使用wp_enqueue_script()添加了jQuery datepicker 及其樣式。

一旦我們添加了上面的代碼片段，它將在帳單地址字段下方顯示我們的自定義字段。

2. 在電子郵件通知中顯示自定義字段

下一步是添加自定義字段以顯示在客戶電子郵件中。 將以下代碼添加到 functions.php 文件中：

 add_action('woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order', 10, 1);

功能 add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

代碼如何運作

我已將add_order_delivery_date_to_order()函數附加到 WooCommerce 操作。 它會將交貨日期添加到發布元表中。 在將日期添加到數據庫之前，它將驗證客戶是否已選擇日期。

如果客戶選擇日期，則使用 WordPress 函數add_post_meta()將其存儲在wp_postmeta表中。 此功能需要post_id 、元鍵和元值。 在我們的例子中，我們使用 Order id 作為我們的post_id ，元鍵將是_delivery_date元值將是客戶選擇的交貨日期。

我建議您清理$_POST變量數據。 它從字符串中刪除換行符、製表符和多餘的空格。

將交貨日期存儲在數據庫中後，我們將顯示在客戶電子郵件中。 在 functions.php 文件中添加以下代碼：

 add_filter('woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails', 10, 3);

功能 add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if(version_compare(get_option('woocommerce_version'),'3.0.0',">=")){

$order_id = $order->get_id();

} 別的 {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

$fields[ '交貨日期' ] = array(

'標籤' => __( '交貨日期', 'add_extra_fields' ),

'價值' => $delivery_date,

);

}

返回$字段；

}

3. 在 WooCommerce 感謝頁面上顯示自定義字段

要在 WooCommerce Order Received 頁面上顯示自定義字段，我們將使用 WooCommerce 過濾器woocommerce_order_details_after_order_table 。 在 functions.php 文件中添加以下代碼：

 add_filter('woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_pa​​ge', 10, 1);

功能 add_delivery_date_to_order_received_pa​​ge ( $order ) {

if(version_compare(get_option('woocommerce_version'),'3.0.0',">=")){

$order_id = $order->get_id();

} 別的 {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

迴聲'<p><strong>'。 __( '交貨日期', 'add_extra_fields' ) 。 '：</strong>' 。 $delivery_date;

}

}

這是結果：

代碼如何運作

我已將add_delivery_date_to_order_received_page()附加到 WooCommerce 過濾器。 此函數的參數用於獲取訂單 ID。 需要訂單 ID 才能從wp_postmeta表中獲取選定的交貨日期。

這是結果：

完整代碼片段

如果您在學習本教程時遇到問題，這裡是完整的代碼片段。 將其粘貼到 functions.php 文件中：

 /*

插件名稱：在 WooCommerce 結帳頁面上添加字段。

描述：一個關於如何在 WooCommerce 結帳頁面上添加額外字段的簡單演示插件。

*/

add_action('woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address', 10, 1);

功能 display_extra_fields_after_billing_address () {

_e("交貨日期：", "add_extra_fields");

?>

<br>

<input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="交貨日期">

<腳本>

jQuery(文檔).ready(函數($) {

$(".add_delivery_date").datepicker({

分鐘日期：0，

});

});

</腳本>

<?php

}

add_action('wp_enqueue_scripts', 'enqueue_datepicker');

函數 enqueue_datepicker() {

如果 ( is_checkout() ) {

// 加載 datepicker 腳本（在 WordPress 中預註冊）。

wp_enqueue_script('jquery-ui-datepicker');

// 您需要日期選擇器的樣式。 為簡單起見，我已鏈接到 Google 託管的 jQuery UI CSS。

wp_register_style('jquery-ui', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css');

wp_enqueue_style('jquery-ui');

}

}

add_action('woocommerce_checkout_update_order_meta', 'add_order_delivery_date_to_order', 10, 1);

功能 add_order_delivery_date_to_order ( $order_id ) {

if ( isset( $_POST ['add_delivery_date'] ) && '' != $_POST ['add_delivery_date'] ) {

add_post_meta( $order_id, '_delivery_date', sanitize_text_field( $_POST ['add_delivery_date'] ) );

}

}

add_filter('woocommerce_email_order_meta_fields', 'add_delivery_date_to_emails', 10, 3);

功能 add_delivery_date_to_emails ( $fields, $sent_to_admin, $order ) {

if(version_compare(get_option('woocommerce_version'),'3.0.0',">=")){

$order_id = $order->get_id();

} 別的 {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

$fields[ '交貨日期' ] = array(

'標籤' => __( '交貨日期', 'add_extra_fields' ),

'價值' => $delivery_date,

);

}

返回$字段；

}

add_filter('woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_pa​​ge', 10, 1);

功能 add_delivery_date_to_order_received_pa​​ge ( $order ) {

if(version_compare(get_option('woocommerce_version'),'3.0.0',">=")){

$order_id = $order->get_id();

} 別的 {

$order_id = $order->id;

}

$delivery_date = get_post_meta($order_id, '_delivery_date', true );

if ( '' != $delivery_date ) {

迴聲'<p><strong>'。 __( '交貨日期', 'add_extra_fields' ) 。 '：</strong>' 。 $delivery_date;

}

}

而已！

結論

總之，您已經學習瞭如何將自定義日期字段添加到結帳、在電子郵件通知中顯示以及在感謝頁面上顯示。 但是，如果您不熟悉編輯代碼，則可以使用結帳定制器插件。 我建議使用子主題，這樣您的更改就不會在更新過程中丟失。

類似文章

1. 如何將選擇字段添加到結帳 WooCommerc
2. 如何設置 WooCommerce 結帳字段佔位符
3. 如何在 WooCommerce 中隱藏沒有價格的產品
4. 如何在 WooCommerce 中隱藏沒有圖像的產品
5. 如何隱藏任何選項卡我的帳戶頁面 WooCommerce
6. 如何隱藏更新購物車按鈕 WooCommerce 購物車頁面
7. 如何在 WooCommerce 中隱藏庫存數量
8. 如何在結帳 WooCommerce 中創建帳戶
9. 如何編輯所需的 WooCommerce 結帳字段
10. 如何創建 WooCommerce 條件結帳字段
11. 如何編輯 WooCommerce 結帳頁面模板
12. 如何添加 WooCommerce 增值稅號結帳頁面
13. 如何在 WooCommerce 結帳頁面上添加隱藏字段
14. 如何移動主菜單店面 WooCommerce
15. 如果可以免費送貨，如何隱藏運費 WooCommerce
16. 如何添加 WooCommerce 發票結帳頁面
17. 如何在 WooCommerce 結帳表單中添加額外字段
18. 如何添加 WooCommerce Checkout 默認國家
19. 如何隱藏產品描述標題 WooCommerce