เจาะลึก WooCommerce Custom Checkout Fields: คู่มือการพัฒนาอย่างสมบูรณ์

ภาพรวมระบบฟิลด์เช็คเอาท์ของ WooCommerce

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

แกนกลางของระบบทั้งหมดคือ class-wc-checkout.php ไฟล์และภายในนั้น WC_Checkout คลาส ฟิลด์ทั้งหมดถูกจัดกลุ่มเป็น “ฟิลด์เซ็ต” หลักหลายชุดตามวัตถุประสงค์การใช้งาน โดยที่ใช้บ่อยที่สุดคือ billing(ฟิลด์บิล)shipping(ฟิลด์การจัดส่ง) และ order(ฟิลด์หมายเหตุการสั่งซื้อ เป็นต้น) ฟิลด์เซ็ตแต่ละชุดเองก็คืออาร์เรย์ที่มีคำจำกัดความฟิลด์หลายรายการ การเข้าใจโครงสร้างลำดับชั้นนี้เป็นขั้นตอนแรกในการดำเนินการปรับแต่งใดๆ เนื่องจากการปรับเปลี่ยนทั้งหมดเกี่ยวข้องกับการจัดการอาร์เรย์ฟิลด์รวมนี้ นักพัฒนาซอฟต์แวร์ไม่จำเป็นต้องแก้ไขไฟล์หลักโดยตรง แต่สามารถเข้าแทรกแซงกระบวนการนี้ผ่านชุดการดำเนินการและฮุ๊กตัวกรองที่ออกแบบมาอย่างดี ซึ่งรับประกันความยั่งยืนของฟังก์ชันการทำงานที่ปรับแต่งเองและความเข้ากันได้กับเวอร์ชันในอนาคต

ใช้ Hook ภายในเพื่อเพิ่มและแก้ไขฟิลด์

WooCommerce มีระบบ Hook ที่ทรงพลังและใช้งานง่าย ช่วยให้นักพัฒนาสามารถเพิ่ม ลบ แก้ไข และค้นหาฟิลด์การชำระเงินได้อย่างปลอดภัย นี่คือวิธีมาตรฐานในการพัฒนาที่กำหนดเอง ซึ่งหลีกเลี่ยงปัญหาการบำรุงรักษาที่เกิดจากการแก้ไขไฟล์เทมเพลตหลักโดยตรง

แนะนำให้อ่าน คู่มือปฏิบัติจริงสำหรับการเพิ่มประสิทธิภาพเว็บไซต์อีคอมเมิร์ซ WooCommerce และการพัฒนา Plugin ขั้นสูง。

วิธีการเพิ่มฟิลด์ใหม่ลงในแบบฟอร์มการชำระเงิน

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

UltaHost WordPress โฮสติ้ง

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

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

function add_invoice_title_field( $checkout_fields ) {
    $checkout_fields['billing']['billing_invoice_type'] = array(
        'type' => 'select',
        'label' => '发票抬头',
        'required' => true,
        'options' => array(
            'personal' => '个人',
            'company' => '单位'
        ),
        'class' => array('form-row-wide'),
        'priority' => 21, // 紧跟在“公司名称”字段之后
    );
    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_invoice_title_field' );

โค้ดด้านบนสร้างกล่องเลือกแบบดรอปดาวน์ในพื้นที่ฟิลด์บิล แต่ละคำนิยามฟิลด์คืออาร์เรย์เชื่อมโยงซึ่งใน type, label, required คู่คีย์-ค่าเหล่านี้กำหนดพฤติกรรมและรูปลักษณ์ของฟิลด์priority พารามิเตอร์นี้มีความสำคัญอย่างยิ่ง เนื่องจากควบคุมลำดับการแสดงผลของฟิลด์ในฟอร์ม โดยตัวเลขที่น้อยกว่าจะแสดงอยู่ด้านหน้า

ปรับเปลี่ยนหรือลบคุณสมบัติของฟิลด์ที่มีอยู่

ความต้องการทางธุรกิจอาจจำเป็นต้องปรับเปลี่ยนฟิลด์เริ่มต้น ตัวอย่างเช่น ในบางภูมิภาค อาจกำหนดให้ฟิลด์ “รหัสไปรษณีย์” ไม่จำเป็นต้องกรอก หรือซ่อนฟิลด์ “รัฐ/จังหวัด” ซึ่งสามารถดำเนินการได้ผ่านการจัดการพารามิเตอร์ที่ส่งผ่าน woocommerce_checkout_fields 过滤器的数组来实现。

function adjust_default_fields( $fields ) {
    // 将账单邮编字段设为非必填
    $fields['billing']['billing_postcode']['required'] = false;

// 完全移除账单州/省字段
    unset( $fields['billing']['billing_state'] );

// 更改邮箱字段的占位符文本
    $fields['billing']['billing_email']['placeholder'] = '用于接收订单确认信';

return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'adjust_default_fields' );

ผ่าน unset() 函数可以彻底删除一个字段。更多情况下，你是通过覆盖数组中的某个属性（如 required, label, class）来修改字段的行为。

字段验证与数据持久化

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

แนะนำให้อ่าน คู่มือขั้นสูงสุดสำหรับการเพิ่มประสิทธิภาพเว็บไซต์ WooCommerce: วิเคราะห์ตั้งแต่การตั้งค่าไปจนถึงแคช。

ดำเนินการตรรกะการตรวจสอบความถูกต้องที่ส่วนหลัง

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

function validate_custom_fields_during_checkout() {
    // 检查自定义的“发票抬头”字段
    if ( isset( $_POST['billing_invoice_type'] ) && $_POST['billing_invoice_type'] == 'company' ) {
        // 如果选择了“单位”发票，则检查是否填写了公司名称
        if ( empty( $_POST['billing_company'] ) ) {
            wc_add_notice( '选择“单位”发票抬头时，必须填写公司名称。', 'error' );
        }
    }

// 验证一个自定义的文本字段，确保其格式
    if ( ! empty( $_POST['billing_custom_id'] ) && ! preg_match( '/^CUSTd{6}$/', $_POST['billing_custom_id'] ) ) {
        wc_add_notice( '客户编号格式错误，应为 CUST 后接6位数字。', 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_custom_fields_during_checkout' );

บันทึกค่าฟิลด์ไปยังเมตาดาต้าคำสั่งซื้อ

หลังจากตรวจสอบความถูกต้องสำเร็จ ขั้นตอนต่อไปคือการบันทึกค่าของฟิลด์ที่กำหนดเองอย่างถาวรเมื่อมีการสร้างคำสั่งซื้อ ซึ่งทำได้ผ่าน woocommerce_checkout_update_order_meta Action Hook ฮุคนี้จะทำงานหลังจากที่คำสั่งซื้อถูกสร้างขึ้น และส่งผ่าน ID ของคำสั่งซื้อ คุณควรใช้ของ WordPress update_post_meta() ฟังก์ชันสำหรับจัดเก็บข้อมูลฟอร์มเป็นข้อมูลเมตาของคำสั่งซื้อ

function save_custom_checkout_field_data( $order_id ) {
    // 保存发票类型
    if ( ! empty( $_POST['billing_invoice_type'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_type', sanitize_text_field( $_POST['billing_invoice_type'] ) );
    }

// 保存客户编号
    if ( ! empty( $_POST['billing_custom_id'] ) ) {
        update_post_meta( $order_id, '_billing_custom_id', sanitize_text_field( $_POST['billing_custom_id'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_data' );

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

hosting.com 共享主机

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

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

แสดงข้อมูลที่กำหนดเองในหน้าจอที่เกี่ยวข้องกับคำสั่งซื้อ

หลังจากบันทึกข้อมูลแล้ว มักจะต้องแสดงผลใหม่อีกครั้งในหลาย ๆ ที่ รวมถึง: 1) หน้าจอการจัดการคำสั่งซื้อในแอดมิน WordPress; 2) หน้าออเดอร์รายละเอียดใน “บัญชีของฉัน” ของผู้ใช้ด้านหน้า; 3) อีเมลคำสั่งซื้อที่ส่งถึงลูกค้าและผู้ดูแลระบบ ซึ่งช่วยรับรองความสมบูรณ์และความโปร่งใสของข้อมูลธุรกรรม

ผสานรวมฟิลด์ที่กำหนดเองในหน้ารายละเอียดคำสั่งซื้อด้านหลังระบบ

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

function display_custom_order_meta_in_admin( $order ) {
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    if ( $invoice_type ) {
        $display_type = ( $invoice_type == 'company' ) ? '单位' : '个人';
        echo '<p><strong>ประเภทใบแจ้งหนี้:</strong> ' . esc_html( $ประเภทการแสดง ) . '</p>';
    }

$custom_id = get_post_meta( $order-&gt;get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<p><strong>หมายเลขลูกค้า:</strong> ' . esc_html( $รหัสที่กำหนดเอง ) . '</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

แสดงข้อมูลในหน้าร้านและอีเมล

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

แนะนำให้อ่าน เรียนรู้การพัฒนา WordPress Plugin: สร้างโมดูลฟังก์ชันที่กำหนดเองที่มีประสิทธิภาพตั้งแต่เริ่มต้น。

// 在前台“查看订单”页面显示
function display_custom_data_in_order_view( $order ) {
    $custom_id = get_post_meta( $order->get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<h2>ข้อมูลเพิ่มเติม</h2><table class="shop_table custom-info"><tbody><tr><th>หมายเลขลูกค้า:</th><td>' . esc_html( $รหัสที่กำหนดเอง ) . '</td></tr></tbody></table>';
    }
}
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_data_in_order_view' );

// 将自定义字段加入订单邮件
function add_custom_field_to_emails( $keys ) {
    $keys[] = '_billing_custom_id'; // 这个键对应的值会被加入到邮件中
    $keys[] = '_billing_invoice_type';
    return $keys;
}
add_filter( 'woocommerce_email_order_meta_keys', 'add_custom_field_to_emails' );

สรุป

การสร้างฟิลด์ชำระเงิน WooCommerce ที่กำหนดเองเป็นกระบวนการพัฒนาที่สมบูรณ์ตั้งแต่การแสดงผลอินเทอร์เฟซไปจนถึงการจัดเก็บข้อมูล หัวใจสำคัญอยู่ที่การทำความเข้าใจและใช้ระบบ Hook ของ WooCommerce อย่างยืดหยุ่น: ใช้ woocommerce_checkout_fields ตัวกรองเพื่อกำหนดและปรับเปลี่ยนโครงสร้างฟิลด์ ผ่าน woocommerce_checkout_process ดำเนินการตรวจสอบตรรกะที่จำเป็น; ใช้ woocommerce_checkout_update_order_meta ดำเนินการจัดเก็บข้อมูลที่ถูกต้องอย่างถาวร; สุดท้าย ใช้ฮุกที่เกี่ยวข้องกับการแสดงผลต่างๆ (เช่น woocommerce_admin_order_data_after_billing_address 和 woocommerce_email_order_meta_keys) เพื่อแสดงข้อมูลในส่วนหลังบ้าน หน้างาน และอีเมล ตามรูปแบบนี้ นักพัฒนาสามารถสร้างประสบการณ์การชำระเงินที่ทรงพลัง มีเสถียรภาพ และสอดคล้องกับความต้องการทางธุรกิจอย่างใกล้ชิด ในขณะเดียวกันก็มั่นใจในความสามารถในการบำรุงรักษาและความปลอดภัยในการอัปเกรดโค้ด

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

สามารถเพิ่มกฎการตรวจสอบสำหรับฟิลด์ที่กำหนดเองได้หรือไม่ เช่น อนุญาตให้ป้อนเฉพาะตัวเลข?

ได้ ตามที่อธิบายไว้ในส่วน “การตรวจสอบฟิลด์และการคงอยู่ของข้อมูล” ของบทความนี้ คุณสามารถเขียนตรรกะการตรวจสอบ PHP ใดๆ ใน woocommerce_checkout_process ฟังก์ชันคอลแบ็คของฮุค ตัวอย่างเช่น ใช้ is_numeric() ฟังก์ชันหรือนิพจน์ทั่วไป preg_match() เพื่อตรวจสอบว่าค่าฟิลด์เป็นตัวเลขล้วนหรือไม่ หากการตรวจสอบล้มเหลว ให้เรียกใช้ wc_add_notice() แสดงข้อผิดพลาดเท่านั้น

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

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

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

จะทำให้ฟิลด์ที่กำหนดเองแสดงเฉพาะวิธีการจัดส่งบางอย่างได้อย่างไร

สิ่งนี้ต้องการการรวมตรรกะการตัดสินใจตามเงื่อนไข คุณสามารถตรวจสอบวิธีการจัดส่งในรถเข็นหรือเซสชันปัจจุบันขณะเพิ่มหรือแก้ไขฟิลด์ได้ ตัวอย่างเช่น ใช้ WC()->session->get('chosen_shipping_methods') รับ ID วิธีการจัดส่งที่เลือก หากไม่ตรงตามเงื่อนไข สามารถใช้ unset() ลบฟิลด์นี้ออกจากอาร์เรย์ของฟิลด์ หรือใช้คลาส CSS เฉพาะ (เช่น hidden) ร่วมกับ JavaScript เพื่อแสดง/ซ่อนแบบไดนามิก

ฉันแก้ไขฟิลด์แล้ว แต่หน้าชำระเงินไม่มีการเปลี่ยนแปลง อาจเป็นเพราะอะไร

ก่อนอื่น โปรดตรวจสอบให้แน่ใจว่ารหัสที่คุณกำหนดเองทำงานถูกต้อง (เช่น ของธีม) functions.php 文件没有语法错误）。其次，检查代码逻辑，确认你修改的是正确的字段数组键名（例如 billing ยังคง shipping）。然后，清除所有可能存在的缓存，包括对象缓存、页面缓存和浏览器缓存。最后，尝试切换到默认主题（如Storefront）并禁用其他插件，以排除冲突。

保存的自定义字段数据能用于后续的订单搜索或报表分析吗？

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