วิธีเพิ่มฟิลด์วันที่เพื่อชำระเงินใน WooCommerce

ร้านค้าออนไลน์จำนวนมากต้องการฟิลด์ที่กำหนดเองในหน้าชำระเงิน ตัวอย่างเช่น ร้านเค้กอาจต้องการช่องวันที่จัดส่งในหน้าชำระเงิน

ความสวยงามของ WooCommerce คือช่วยให้คุณเพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงิน เช่น หลังการเรียกเก็บเงินและฟิลด์การจัดส่ง หรือก่อนปุ่มสั่งซื้อ

WooCommerce เพิ่มฟิลด์วันที่ในการชำระเงิน

ในโพสต์นี้ คุณจะได้เรียนรู้วิธีเพิ่มช่องวันที่จัดส่งในหน้าชำระเงินของ WooCommerce ฉันจะเพิ่มมันหลังจากฟิลด์การเรียกเก็บเงิน ฟิลด์นี้จะช่วยให้ลูกค้าสามารถเลือกวันที่จัดส่งสำหรับการสั่งซื้อของตนได้ นอกจากนี้ ฉันจะแบ่งปันวิธีที่คุณสามารถแสดงฟิลด์ที่กำหนดเองในการแจ้งเตือนทางอีเมลและหน้าคำสั่งซื้อที่ได้รับ

1. การเพิ่มฟิลด์วันที่ที่กำหนดเองในหน้าชำระเงินของ WooCommerce

WooCommerce ช่วยให้คุณสามารถเพิ่มฟิลด์ที่กำหนดเองลงในที่ต่างๆ ขึ้นอยู่กับ hooks ที่คุณจะใช้ มีการดำเนินการหลายอย่างที่กำหนดโดย 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 datepicker ซึ่งหมายความว่าเราจำเป็นต้องรวมไฟล์ JavaScript และ CSS ที่จำเป็นโดยใช้การดำเนินการ WordPress wp_enqueue_scripts

 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="วันที่จัดส่ง">

<script>

jQuery (เอกสาร). พร้อม (ฟังก์ชั่น ( $ ) {

$( ".add_delivery_date") .datepicker ( {

นาทีวันที่: 0,

} );

} );

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

ฟังก์ชัน enqueue_datepicker () {

ถ้า ( is_checkout() ) {

// โหลดสคริปต์ datepicker (ลงทะเบียนล่วงหน้าใน WordPress)

wp_enqueue_script( 'jquery-ui-datepicker' );

// คุณต้องใส่สไตล์สำหรับตัวเลือกวันที่ เพื่อความง่าย ฉันได้เชื่อมโยงกับ jQuery UI CSS ที่โฮสต์ของ Google

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 ขั้นแรก เราพิมพ์ฉลาก "วันที่จัดส่ง" และเพิ่มฟิลด์ประเภทข้อความป้อนเข้าสำหรับตัวเลือกวันที่ ซึ่งเราสามารถใช้ฟังก์ชัน jquery datepicker( ) ได้

หลังจากนั้น ฉันได้แนบ enqueue_datepicker() กับการทำงานของ WordPress ในฟังก์ชันนี้ ฉันได้เพิ่ม jQuery datepicker และรูปแบบโดยใช้ wp_enqueue_script()

เมื่อเราเพิ่มข้อมูลโค้ดข้างต้นแล้ว โค้ดจะแสดงฟิลด์ที่กำหนดเองด้านล่างฟิลด์ที่อยู่สำหรับเรียกเก็บเงิน

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 จะเพิ่มวันที่จัดส่งลงในตารางเมตาของโพสต์ จะตรวจสอบว่าลูกค้าได้เลือกวันที่ก่อนที่จะเพิ่มลงในฐานข้อมูล

หากลูกค้าเลือกวันที่ วันที่จะถูกเก็บไว้ในตาราง wp_postmeta โดยใช้ฟังก์ชัน WordPress add_post_meta() ฟังก์ชันนี้ต้องใช้ post_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', จริง);

if ( '' != $delivery_date ) {

$fields[ 'วันที่จัดส่ง' ] = อาร์เรย์ (

'label' => __( 'วันที่จัดส่ง', 'add_extra_fields' ),

'value' => $delivery_date,

);

}

ส่งคืนฟิลด์ $;

}

3. การแสดงฟิลด์กำหนดเองบน WooCommerce ขอบคุณเพจ

เพื่อแสดงฟิลด์ที่กำหนดเองบนหน้ารับคำสั่งซื้อของ WooCommerce เราจะใช้ตัวกรอง WooCommerce woocommerce_order_details_after_order_table เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php:

 add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

ฟังก์ชั่น add_delivery_date_to_order_received_page ( $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', จริง);

if ( '' != $delivery_date ) {

echo '<p><strong>' __( 'วันที่จัดส่ง', 'add_extra_fields' ) ':</strong> ' $delivery_date;

}

}

นี่คือผลลัพธ์:

รหัสทำงานอย่างไร

ฉันได้แนบ add_delivery_date_to_order_received_page() เข้ากับตัวกรอง WooCommerce แล้ว พารามิเตอร์ของฟังก์ชันนี้ใช้เพื่อดึงรหัสคำสั่งซื้อ ต้องใช้รหัสคำสั่งซื้อเพื่อดึงวันที่จัดส่งที่เลือกจากตาราง 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="วันที่จัดส่ง">

<script>

jQuery (เอกสาร). พร้อม (ฟังก์ชั่น ($) {

$(".add_delivery_date") .datepicker({

นาทีวันที่: 0,

});

});

</script>

<?php

}

add_action( 'wp_enqueue_scripts', 'enqueue_datepicker' );

ฟังก์ชัน enqueue_datepicker () {

ถ้า ( is_checkout() ) {

// โหลดสคริปต์ datepicker (ลงทะเบียนล่วงหน้าใน WordPress)

wp_enqueue_script( 'jquery-ui-datepicker' );

// คุณต้องใส่สไตล์สำหรับตัวเลือกวันที่ เพื่อความง่าย ฉันได้เชื่อมโยงกับ jQuery UI CSS ที่โฮสต์ของ Google

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', จริง);

if ( '' != $delivery_date ) {

$fields[ 'วันที่จัดส่ง' ] = อาร์เรย์ (

'label' => __( 'วันที่จัดส่ง', 'add_extra_fields' ),

'value' => $delivery_date,

);

}

ส่งคืนฟิลด์ $;

}

add_filter( 'woocommerce_order_details_after_order_table', 'add_delivery_date_to_order_received_page', 10 , 1 );

ฟังก์ชั่น add_delivery_date_to_order_received_page ( $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', จริง);

if ( '' != $delivery_date ) {

echo '<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. วิธีเพิ่มหน้าชำระเงินหมายเลข VAT ของ WooCommerce
13. วิธีเพิ่มฟิลด์ที่ซ่อนอยู่ในหน้าชำระเงินของ WooCommerce
14. วิธีการย้ายหน้าร้านเมนูหลัก WooCommerce
15. วิธีซ่อนอัตราค่าจัดส่งหากมีการจัดส่งฟรี WooCommerce
16. วิธีเพิ่มหน้าชำระเงินใบแจ้งหนี้ WooCommerce
17. วิธีเพิ่มฟิลด์พิเศษในแบบฟอร์มการชำระเงิน WooCommerce
18. วิธีเพิ่ม WooCommerce Checkout Default Country
19. วิธีซ่อนคำอธิบายผลิตภัณฑ์ หัวเรื่อง WooCommerce