เชี่ยวชาญ WooCommerce ฟิลด์เช็คเอาท์ที่กำหนดเอง: คู่มือฉบับสมบูรณ์ตั้งแต่การสร้างไปจนถึงการตรวจสอบ

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

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

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

จากมุมมองทางเทคนิค หน้าเช็คเอาต์ของ WooCommerce คือแบบฟอร์มที่ประกอบด้วยชุดฟิลด์มาตรฐาน ซึ่งโครงสร้างถูกกำหนดโดยฮุคแอ็กชัน (Action Hook) และฮุคตัวกรอง (Filter Hook) นี่หมายความว่าเราสามารถใช้ปลั๊กอินหรือไฟล์ฟังก์ชันของธีม ใช้ฮุคเหล่านี้เพื่อ “เชื่อมต่อ” เข้ากับขั้นตอนการชำระเงิน เพื่อเพิ่ม ลบ หรือแก้ไขฟิลด์ การเข้าใจกลไกหลักนี้เป็นพื้นฐานสำหรับการดำเนินการกำหนดเองใดๆ

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

สามวิธีในการสร้างฟิลด์เช็คเอาท์ที่กำหนดเอง

WooCommerce มีวิธีที่ยืดหยุ่นในการเพิ่มฟิลด์ที่กำหนดเอง คุณสามารถเลือกวิธีที่เหมาะสมที่สุดตามระดับทักษะทางเทคนิคและความต้องการของคุณ

UltaHost WordPress โฮสติ้ง

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

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

ใช้ปลั๊กอินสำหรับการเพิ่มโดยไม่ต้องเขียนโค้ดอย่างรวดเร็ว

สำหรับผู้ดูแลเว็บไซต์ที่ไม่คุ้นเคยกับการเขียนโค้ดหรือโครงการที่ต้องการดำเนินการอย่างรวดเร็ว การใช้ปลั๊กอินเฉพาะทางเป็นวิธีที่สะดวกที่สุด มีปลั๊กอินที่ยอดเยี่ยมในตลาด เช่น “Checkout Field Editor for WooCommerce” หรือ “WooCommerce Checkout Manager”

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

เพิ่มฟิลด์ที่กำหนดเองผ่านโค้ด

นี่เป็นวิธีที่ทรงพลังและยืดหยุ่นที่สุด โดยการแก้ไขไฟล์ functions.php ของธีมหรือสร้างปลั๊กอินที่กำหนดเองขึ้นมา สิ่งสำคัญคือการใช้ woocommerce_checkout_fields ฟิลเตอร์ฮุค

ฮุคนี้ช่วยให้คุณสามารถปรับเปลี่ยนอาร์เรย์ของช่องทางการชำระเงินได้ ตัวอย่างเช่น หากคุณต้องการเพิ่มช่องสำหรับกรอกชื่อบริษัทในส่วน “ข้อมูลการเรียกเก็บเงิน” คุณสามารถเขียนโค้ดดังนี้:

แนะนำให้อ่าน วิธีเพิ่มฟิลด์ที่กำหนดเองและเมตาดาต้าสำหรับหน้า WooCommerce。

add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
    $fields['billing']['billing_company_custom'] = array(
        'label'       => __('公司名称（自定义）', 'woocommerce'),
        'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25, // 控制显示顺序，数字越小越靠前
    );
    return $fields;
}

โค้ดนี้จะเพิ่มช่องข้อความที่จำเป็นต้องกรอกเข้าไปในช่องทางการเรียกเก็บเงิน ประเด็นสำคัญคือชื่อคีย์ของอาร์เรย์ช่อง (เช่น billing_company_custom) และชุดช่องที่อยู่ใน (['billing'] 或 ['shipping']、['order']）。

ใช้คุณสมบัติตรรกะเงื่อนไขของ WooCommerce

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

การใช้งานโค้ดล้วนๆ มักต้องพึ่งพา woocommerce_after_checkout_billing_form 或 woocommerce_after_checkout_shipping_form ฮุกเพื่อแสดงผลโครงสร้าง HTML ของฟิลด์ และเขียนสคริปต์ jQuery เพื่อติดตามการเปลี่ยนแปลงของฟิลด์อื่นๆ (เช่น ช่องทำเครื่องหมาย) เพื่อควบคุมการแสดงหรือซ่อนฟิลด์เป้าหมาย อย่างไรก็ตาม วิธีนี้ต้องใช้ความสามารถด้าน JavaScript ในระดับหนึ่ง วิธีที่ง่ายกว่าคือการใช้ปลั๊กอินจัดการฟิลด์ขั้นสูงที่มีการตั้งค่าตรรกะเงื่อนไขแบบเห็นภาพ

hosting.com 共享主机

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

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

ตรวจสอบและบันทึกข้อมูลฟิลด์ที่กำหนดเอง

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

การตรวจสอบความถูกต้องของข้อมูลระหว่าง Front-end และ Back-end

เพื่อป้องกันการส่งข้อมูลที่ไม่ถูกต้องหรือข้อมูลที่เป็นอันตราย จำเป็นต้องตรวจสอบความถูกต้องที่ฝั่งเซิร์ฟเวอร์ (Back-end) ซึ่งทำได้ผ่าน woocommerce_checkout_process Action Hooks

ต่อจากตัวอย่างก่อนหน้านี้ หากเราเพิ่มฟิลด์ billing_company_custom ซึ่งเป็นฟิลด์บังคับ เราต้องมั่นใจว่าลูกค้าไม่ได้เว้นว่างไว้:

แนะนำให้อ่าน WooCommerce พัฒนาเชิงปฏิบัติ: สร้างเว็บไซต์อีคอมเมิร์ซระดับมืออาชีพตั้งแต่เริ่มต้น。

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
        wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
    }
}

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

บันทึกข้อมูลฟิลด์ลงในคำสั่งซื้อ

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

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

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

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

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
    if ( ! empty($_POST['billing_company_custom']) ) {
        update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
    }
}

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

แสดงข้อมูลฟิลด์ในส่วนหน้าและหลังบ้าน

หลังจากบันทึกข้อมูลแล้ว คุณต้องตรวจสอบให้แน่ใจว่าสามารถดูและจัดการได้ในหลายตำแหน่งสำคัญ

แสดงในรายละเอียดคำสั่งซื้อและอีเมล

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

แก้ไขรายละเอียดคำสั่งซื้อในแอดมิน สามารถใช้ได้ woocommerce_admin_order_data_after_billing_address hooks:

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<p><strong>'.__('自定义公司名').':</strong> ' . $company_custom . '</p>';
    }
}

ในทำนองเดียวกัน ใช้ woocommerce_email_order_meta_fields ตัวกรองสามารถเพิ่มฟิลด์นี้ไปยังเนื้อหาอีเมลคำสั่งซื้อ

แสดงในมุมมองคำสั่งซื้อ “บัญชีของฉัน”

ลูกค้าควรสามารถดูข้อมูลที่พวกเขากรอกไว้ในขณะนั้นได้ เมื่อดูรายละเอียดคำสั่งซื้อเก่าในหน้าบัญชีของตน ซึ่งทำได้ผ่าน woocommerce_order_details_after_order_table Action Hook:

add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<h2>'.__('额外信息').'</h2>';
        echo '<table class="woocommerce-table shop_table extra_info"><tbody>';
        echo '<tr><th>'.__('自定义公司名').':</th><td>' . $company_custom . '</td></tr>';
        echo '</tbody></table>';
    }
}

สรุป

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

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

ทำไมฟิลด์ที่กำหนดเองที่เพิ่มขึ้นจึงไม่แสดงบนหน้าชำระเงิน?

โปรดตรวจสอบตามขั้นตอนต่อไปนี้: ก่อนอื่น ตรวจสอบให้แน่ใจว่ารหัสของคุณได้ถูกเพิ่มลงในธีมอย่างถูกต้อง functions.php ไฟล์หรือปลั๊กอินที่กำหนดเอง และไม่มีข้อผิดพลาดทางไวยากรณ์ ประการที่สอง ตรวจสอบว่าคีย์ของอาร์เรย์ฟิลด์ถูกซ้อนกันอย่างถูกต้องใน $fields['billing']、$fields['shipping'] 或 $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。

จะตั้งค่าฟิลด์ที่กำหนดเองเป็นตัวเลือกหรือบังคับได้อย่างไร?

เมื่อเพิ่มฟิลด์ผ่านโค้ด คุณสามารถตั้งค่าในอาร์เรย์ฟิลด์ได้ที่ 'required' => true 或 'required' => falseหากฟิลด์เป็นบังคับอยู่แล้วแต่คุณต้องการเปลี่ยนเป็นตัวเลือก เพียงแค่ทำการเปลี่ยนแปลงใน woocommerce_checkout_fields ฟังก์ชันตัวกรองเปลี่ยนฟิลด์นี้เป็น required พารามิเตอร์เป็น false ได้ โปรดทราบว่าหลังจากแก้ไขแล้ว คุณต้องปรับหรือลบตรรกะการตรวจสอบใน woocommerce_checkout_process ตามนั้น

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

ค่าของฟิลด์ที่กำหนดเองจะถูกจัดเก็บหลักในตาราง wp_postmeta ของ WordPress (คำนำหน้าตารางอาจแตกต่างกัน) แต่ละระเบียนเชื่อมโยงกับ post_id(ตรงกับรหัสคำสั่งซื้อ) ใน wp_posts ตารางผ่านทาง meta_key(เช่น ชื่อคีย์ที่คุณใช้เมื่อบันทึก เช่น _billing_company_custom) เพื่อระบุmeta_value จะเก็บค่าจริงของฟิลด์ คุณสามารถค้นหาข้อมูลเหล่านี้ผ่านเครื่องมือจัดการฐานข้อมูลหรือฟังก์ชัน get_post_meta() ของ WordPress ได้

สามารถแสดงฟิลด์ที่กำหนดเองตามผลิตภัณฑ์ที่แตกต่างกันได้หรือไม่

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