คู่มือการพัฒนา WooCommerce ฟิลด์เช็คเอาท์แบบกำหนดเองตั้งแต่เริ่มต้นจนถึงการปฏิบัติจริง

เหตุผลที่ต้องกำหนดฟิลด์เช็คเอาต์เอง

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

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

รายละเอียดวิธีการและฮุคหลัก

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

ตัวกรองสำหรับเพิ่มฟิลด์

การเพิ่มฟิลด์ส่วนใหญ่ทำผ่าน woocommerce_checkout_fields ตัวกรองเพื่อให้บรรลุเป้าหมาย ตัวกรองนี้ช่วยให้เราสามารถแทรกกล่องป้อนข้อมูลใหม่ เมนูแบบเลื่อนลง หรือช่องทำเครื่องหมายในส่วนต่างๆ ของฟอร์มการชำระเงิน (เช่น พื้นที่ “ใบแจ้งหนี้” พื้นที่ “การจัดส่ง” หรือพื้นที่ที่กำหนดเอง “ข้อมูลเพิ่มเติมของคำสั่งซื้อ”)

นักพัฒนาต้องเขียนฟังก์ชัน callback ที่รับอาร์เรย์ของฟิลด์ที่มีอยู่ แก้ไข และส่งคืนอาร์เรย์ใหม่ ภายในฟังก์ชัน สามารถกำหนดคุณลักษณะของฟิลด์ใหม่แต่ละฟิลด์ได้อย่างละเอียด เช่น ประเภท ป้ายกำกับ ตัวยึดตำแหน่ง ข้อกำหนดบังคับ ลำดับความสำคัญ (สำหรับการเรียงลำดับ) และคลาส CSS เป็นต้น

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

สำหรับการตรวจสอบฟิลด์ด้วย hooks

เมื่อผู้ใช้ส่งฟอร์มเช็คเอาท์ เราต้องมั่นใจว่าข้อมูลในฟิลด์ที่กำหนดเองนั้นตรงตามข้อกำหนด ซึ่งจำเป็นต้องใช้ woocommerce_checkout_process action hooks ภายในฟังก์ชัน callback ของ hook นี้ เราสามารถเข้าถึงข้อมูลที่ส่งผ่าน $_POST ตัวแปร global และทำการตรวจสอบได้

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

ฮุกสำหรับบันทึกและแสดงข้อมูล

หลังจากผู้ใช้ส่งคำสั่งซื้อ ข้อมูลในช่องที่กำหนดเองจำเป็นต้องถูกบันทึกอย่างปลอดภัยไปยังเมตาดาต้าของคำสั่งซื้อ ซึ่งทำผ่าน woocommerce_checkout_update_order_meta ใช้ action hook ในการดำเนินการ ใน callback function ของ hook นี้ เราสามารถใช้ update_post_meta() ฟังก์ชัน เพื่อเก็บค่าฟอร์มที่ผ่านการตรวจสอบลงในออเดอร์ที่เกี่ยวข้อง wp_postmeta ตารางฐานข้อมูล

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

ภาคปฏิบัติ: เพิ่มฟิลด์ “ข้อความของขวัญ”

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

ขั้นตอนที่ 1: เพิ่มช่องข้อมูลในหน้าชำระเงิน

ก่อนอื่น เราต้องใช้ woocommerce_checkout_fields ใช้ฟิลเตอร์เพื่อลงทะเบียนช่องใหม่นี้ เราจะเพิ่มมันหลังจากช่อง “หมายเหตุการสั่งซื้อ” นี่คือโค้ดการใช้งาน ซึ่งควรเพิ่มในไฟล์ functions.php ของธีมลูกหรือผ่านปลั๊กอินฟังก์ชันที่กำหนดเอง

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

รหัสนี้สร้างฟิลด์ประเภท textarea ป้ายกำกับเป็น “ข้อความอวยพรของขวัญ” และตั้งค่าตัวยึดและคลาส CSS ที่เกี่ยวข้องpriority พารามิเตอร์ควบคุมตำแหน่งการแสดงผล

ขั้นตอนที่ 2: บันทึกข้อมูลฟิลด์ไปยังคำสั่งซื้อ

ต่อไปนี้ เราต้องบันทึกข้อความที่ผู้ใช้กรอกไว้เมื่อสร้างคำสั่งซื้อ ใช้ woocommerce_checkout_update_order_meta ใช้ hook ในการดำเนินการ

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

ที่นี่ เราตรวจสอบว่า $_POST['gift_message'] มีค่าหรือไม่ ถ้ามี ใช้ sanitize_textarea_field() ฟังก์ชันเพื่อทำความสะอาดอย่างปลอดภัย แล้วส่งผ่าน update_post_meta() บันทึกเป็นเมตาดาต้าของคำสั่งซื้อ โดยมีคีย์เมตาดาต้าชื่อ _gift_message。

ขั้นตอนที่สาม: แสดงข้อมูลในหลังบ้านและอีเมล

หลังจากบันทึกข้อมูลแล้ว เราต้องทำให้มันปรากฏให้เห็นได้ รหัสต่อไปนี้แสดงวิธีการแสดงฟิลด์นี้ในหน้าลายละเอียดคำสั่งซื้อของหลังบ้านผู้ดูแล และในอีเมลที่ส่งถึงลูกค้า

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />' . esc_html( $gift_message ) . '</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

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

เทคนิคขั้นสูงและข้อควรระวัง

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

การสร้างฟิลด์ที่แสดงตามเงื่อนไข

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

ความปลอดภัยและการทำความสะอาดข้อมูลฟิลด์

ความปลอดภัยเป็นสิ่งสำคัญที่สุด เมื่อประมวลผลข้อมูลที่ผู้ใช้ป้อน จำเป็นต้องตรวจสอบและทำความสะอาดเสมอ สำหรับกล่องข้อความ ให้ใช้ sanitize_text_field() 或 sanitize_textarea_field()สำหรับอีเมล ให้ใช้ sanitize_email()。เมื่อส่งออกข้อมูลไปยัง front-end ต้องใช้ esc_html() 或 wp_kses_post() เพื่อหลีกเลี่ยงการโจมตีแบบ Cross-Site Scripting (XSS)

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

ความเข้ากันได้กับปลั๊กอินและธีมของบุคคลที่สาม

เมื่อเพิ่มฟิลด์ที่กำหนดเอง อาจเกิดความขัดแย้งกับสไตล์หรือสคริปต์ของธีมหรือปลั๊กอินอื่นๆ (โดยเฉพาะปลั๊กอินเพิ่มประสิทธิภาพการชำระเงิน) ขอแนะนำให้พัฒนาผ่านธีมลูกเสมอ และเพิ่มชื่อคลาส CSS ที่เป็นเอกลักษณ์ให้กับองค์ประกอบคอนเทนเนอร์ของฟิลด์ที่กำหนดเอง ก่อนการใช้งานจริง ควรทดสอบในหลายสถานการณ์ รวมถึงธีมที่แตกต่างกันและเมื่อเปิดใช้งานปลั๊กอินที่ใช้บ่อย การใช้เครื่องมือนักพัฒนาของเบราว์เซอร์เพื่อตรวจสอบองค์ประกอบและข้อผิดพลาดของสคริปต์เป็นวิธีสำคัญในการแก้ไขปัญหาความเข้ากันได้

สรุป

ผ่านคำแนะนำในบทความนี้ เราเริ่มจากความเข้าใจความต้องการ แล้วค่อยๆ ลึกลงไปในขั้นตอนการพัฒนาฟิลด์การชำระเงินที่กำหนดเองของ WooCommerce เราได้เรียนรู้วิธีใช้ woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta ใช้สามฮุคหลักนี้เพื่อเพิ่ม ตรวจสอบ และบันทึกฟิลด์ และผ่านกรณีศึกษาการปฏิบัติของ “ข้อความของขวัญ” ได้สาธิตกระบวนการทั้งหมดตั้งแต่การสร้างฟิลด์ไปจนถึงการแสดงข้อมูลอย่างสมบูรณ์ สุดท้าย ได้อภิปรายหัวข้อขั้นสูงเช่น ฟิลด์เงื่อนไข การจัดการความปลอดภัย และความเข้ากันได้

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

คำถามที่พบบ่อย (FAQ)

ข้อมูลของฟิลด์ที่กำหนดเองถูกเก็บไว้ที่ไหน?

ข้อมูลของฟิลด์ที่กำหนดเองมักจะถูกเก็บเป็น “ข้อมูลเมตาของคำสั่งซื้อ” ในฐานข้อมูลของ WordPress wp_postmeta ในตาราง แต่ละข้อมูลมีหมายเลขคำสั่งซื้อที่เกี่ยวข้อง (post_id), คีย์เมตาที่คุณกำหนด (เช่น _gift_message) และค่าของเมต้า คุณสามารถใช้เมธอดของอ็อบเจ็กต์คำสั่งซื้อ WooCommerce $order->get_meta(‘_gift_message’) หรือฟังก์ชัน WordPress get_post_meta() เพื่อรับข้อมูลเหล่านี้

วิธีการเพิ่มการตรวจสอบส่วนหน้า (เช่น การตรวจสอบรูปแบบ) สำหรับฟิลด์ที่กำหนดเอง?

นอกจากใช้ woocommerce_checkout_process นอกจากการใช้ hook เพื่อตรวจสอบฝั่งเซิร์ฟเวอร์แล้ว คุณยังสามารถเพิ่มแอตทริบิวต์ HTML5 ดั้งเดิมสำหรับการตรวจสอบพื้นฐานได้ เช่น pattern สำหรับ regular expressiontype=”email” สำหรับรูปแบบอีเมล สำหรับการตรวจสอบแบบเรียลไทม์ที่ซับซ้อนมากขึ้น จำเป็นต้องเขียนโค้ด JavaScript/jQuery เพื่อฟัง blur 或 input เหตุการณ์ของฟิลด์ ตรวจสอบว่าค่าเป็นไปตามกฎหรือไม่ และให้ข้อเสนอแนะทันที

สามารถเพิ่มฟิลด์ที่กำหนดเองไปยังหน้าลงทะเบียนผู้ใช้ได้หรือไม่

ได้ แต่กระบวนการจะแตกต่างกันเล็กน้อย ฮุคฟิลด์ชำระเงินของ WooCommerce ออกแบบมาสำหรับหน้าชำระเงินโดยเฉพาะ หากต้องการเพิ่มฟิลด์ในหน้าลงทะเบียน “บัญชีของฉัน” คุณต้องใช้ฮุคอื่นที่ WordPress และ WooCommerce จัดให้ เช่น woocommerce_register_form เพื่อเพิ่มฟิลด์woocommerce_created_customer เพื่อบันทึกข้อมูลฟิลด์ไปยังเมตาดาต้าผู้ใช้ หลักการทำงานคล้ายกับฟิลด์ชำระเงิน แต่ฮุคเป้าหมายและตำแหน่งการจัดเก็บข้อมูล (เมตาดาต้าผู้ใช้) ต่างกัน

ทำไมฟิลด์ที่กำหนดเองของฉันไม่แสดงขึ้นมา?

ขั้นแรก ตรวจสอบว่าโค้ดของคุณได้ถูกเพิ่มอย่างถูกต้องหรือไม่ functions.php และไม่มีข้อผิดพลาดทางไวยากรณ์ ประการที่สอง ตรวจสอบว่าคีย์ของอาร์เรย์ฟิลด์ถูกต้องหรือไม่ เช่น คุณได้เพิ่มลงใน $fields[‘order’] ยังคง $fields[‘billing’] ส่วน ประการที่สาม ตรวจสอบว่ามีปลั๊กอินอื่นหรือโค้ดของธีมที่เขียนทับหรือลบฟิลด์ของคุณหรือไม่ สุดท้าย ลองล้างแคชของเว็บไซต์และเบราว์เซอร์ เพราะไฟล์ CSS/JS เก่าอาจส่งผลต่อการแสดงผล