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

คุณต้องการเพิ่มช่องการชำระเงินแบบกำหนดเองไปยังอีเมลในร้านค้า WooCommerce ของคุณหรือไม่?

WooCommerce เป็นปลั๊กอินอีคอมเมิร์ซที่มีประสิทธิภาพสำหรับ WordPress ที่ปรับเปลี่ยนได้เอง

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

ลบข้อมูลเพิ่มเติมจากช่องการชำระเงินแบบกำหนดเอง

ขั้นตอนแรกคือการเพิ่มข้อมูลโค้ด PHP แบบกำหนดเองในไฟล์ function.php ของธีมของคุณเพื่อลบฟิลด์ที่อยู่ออกจากหน้าจอการเรียกเก็บเงิน:

 ฟังก์ชัน woocommerce_remove_additional_information_checkout($fields){

    unset( $fields["billing_first_name"] );

    unset( $fields["billing_last_name"] );

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

}

add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );

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

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

เพิ่มฟิลด์การชำระเงินที่กำหนดเองไปยังอีเมล WooCommerce

ควรเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของธีมของคุณ ฉันแนะนำให้ใช้ธีมลูกเพื่อไม่ให้การเปลี่ยนแปลงของคุณหายไประหว่างการอัปเกรด

1. เพิ่ม WooCommerce Custom Checkout Field

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

 ฟังก์ชัน njengah_custom_checkout_fields ($fields){

$fields['njengah_extra_fields'] = อาร์เรย์ (

'njengah_text_field' => อาร์เรย์ (

'type' => 'ข้อความ',

'จำเป็น' => จริง

'label' => __( 'ป้อนฟิลด์ข้อความ' )

),

'njengah_dropdown' => อาร์เรย์ (

'type' => 'เลือก',

'options' => array( 'first' => __( 'First Option' ), 'second' => __( 'Second Option' ), 'third' => __( 'ตัวเลือกที่สาม' ) ),

'จำเป็น' => จริง

'label' => __( 'ช่องรายการแบบเลื่อนลง' )

)

);

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

}

add_filter( 'woocommerce_checkout_fields', 'njengah_custom_checkout_fields' );

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

$checkout = WC()->เช็คเอาท์(); ?>

<div class="extra-fields">

<h3><?php _e( 'ช่องเพิ่มเติม' ); ?></h3>

<?php

foreach ( $checkout->checkout_fields['njengah_extra_fields'] เป็น $key => $field ) : ?>

<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

</div>

<?php }

add_action( 'woocommerce_checkout_after_customer_details' ,'njengah_extra_checkout_fields' );

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

2. บันทึกข้อมูลของ Custom Checkout WooCommerce Fields

เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php เพื่อบันทึกข้อมูลของฟิลด์การชำระเงินที่กำหนดเอง WooCommerce

 ฟังก์ชั่น njengah_save_extra_checkout_fields ( $order_id, $posted ){

// อย่าลืมการฆ่าเชื้อที่เหมาะสม หากคุณใช้ฟิลด์ประเภทอื่น

if( isset( $posted['njengah_text_field'] ) ) {

update_post_meta( $order_id, '_njengah_text_field', sanitize_text_field( $posted['njengah_text_field'] ) );

}

if( isset( $posted['njengah_dropdown'] ) && in_array( $posted['njengah_dropdown'], array( 'แรก', 'ที่สอง', 'ที่สาม' ) ) ) {

update_post_meta( $order_id, '_njengah_dropdown', $posted['njengah_dropdown'] );

}

}

add_action( 'woocommerce_checkout_update_order_meta', 'njengah_save_extra_checkout_fields', 10, 2 );

3. แสดงข้อมูลของฟิลด์ที่กำหนดเองของ WooCommerce ให้กับผู้ใช้

เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php เพื่อแสดงข้อมูลของฟิลด์ที่กำหนดเองของ WooCommerce ให้กับผู้ใช้

 ฟังก์ชัน njengah_display_order_data( $order_id ){ ?>

<h2><?php _e( 'ข้อมูลเพิ่มเติม' ); ?></h2>

<table class="shop_table shop_table_responsive added_info">

<tbody>

<tr>

<th><?php _e( 'ใส่ฟิลด์ข้อความ:' ); ?></th>

<td><?php echo get_post_meta( $order_id, '_njengah_text_field', จริง); ?></td>

</tr>

<tr>

<th><?php _e( 'ช่องรายการแบบเลื่อนลง:' ); ?></th>

<td><?php echo get_post_meta( $order_id, '_njengah_dropdown', true ); ?></td>

</tr>

</tbody>

</table>

<?php }

add_action( 'woocommerce_thankyou', 'njengah_display_order_data', 20 );

add_action( 'woocommerce_view_order', 'njengah_display_order_data', 20 );

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

4. แสดงฟิลด์คำสั่งซื้อที่กำหนดเองของผู้ดูแลระบบ WooCommerce

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

 ฟังก์ชั่น njengah_display_order_data_in_admin( $order ){ ?>

<div class="order_data_column">

<h4><?php _e( 'ข้อมูลเพิ่มเติม', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'แก้ไข', 'woocommerce' ); ?></a></h4>

<div class="address">

<?php

echo '<p><strong>' __( 'ช่องข้อความ' ) . ':</strong>' get_post_meta( $order->id, '_njengah_text_field', จริง) '</p>';

echo '<p><strong>' __( 'หล่นลง' ) . ':</strong>' get_post_meta( $order->id, '_njengah_dropdown', true ) '</p>'; ?>

</div>

<div class="edit_address">

<?php woocommerce_wp_text_input( array( 'id' => '_njengah_text_field', 'label' => __( 'Some field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>

<?php woocommerce_wp_text_input( array( 'id' => '_njengah_dropdown', 'label' => __( 'Another field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>

</div>

</div>

<?php }

add_action( 'woocommerce_admin_order_data_after_order_details', 'njengah_display_order_data_in_admin' );




ฟังก์ชัน njengah_save_extra_details ( $post_id, $post ){

update_post_meta( $post_id, '_njengah_text_field', wc_clean( $_POST[ '_njengah_text_field' ] ) );

update_post_meta( $post_id, '_njengah_dropdown', wc_clean( $_POST[ '_njengah_dropdown' ] ) );

}

add_action( 'woocommerce_process_shop_order_meta', 'njengah_save_extra_details', 45, 2 );

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

5. เพิ่มฟิลด์ที่กำหนดเองของ WooCommerce เพื่อสั่งซื้ออีเมล

เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php เพื่อเพิ่มฟิลด์ที่กำหนดเองของ WooCommerce เพื่อสั่งซื้ออีเมล หากคุณต้องการปรับแต่งเอาต์พุตในอีเมล คุณสามารถเพิ่มข้อความลงใน hooks ที่มีอยู่ในเทมเพลตอีเมลได้

 ฟังก์ชัน njengah_email_order_meta_fields ($fields, $sent_to_admin, $order) {

$fields['instagram'] = อาร์เรย์ (

'label' => __( 'บางฟิลด์' ),

'value' => get_post_meta( $order->id, '_njengah_text_field', จริง),

);

$fields['licence'] = อาร์เรย์ (

'label' => __( 'ช่องอื่น' ),

'value' => get_post_meta( $order->id, '_njengah_dropdown', จริง),

);

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

}

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

ฟังก์ชั่น njengah_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {

$njengah_text_field = get_post_meta( $order->id, '_njengah_text_field', จริง);

$njengah_dropdown = get_post_meta( $order->id, '_njengah_dropdown', จริง);

ถ้า( $plain_text ){

echo 'ค่าสำหรับบางฟิลด์คือ' $njengah_text_field ' ในขณะที่ค่าของฟิลด์อื่นคือ ' $njengah_dropdown;

} อื่น {

echo '<p>ค่าสำหรับ <strong>ช่องข้อความที่ป้อน</strong> คือ ' $njengah_text_field. ' ในขณะที่ค่าของ <strong>ดรอปดาวน์</strong> คือ ' $njengah_dropdown '</p>';

}

}

add_action('woocommerce_email_customer_details', 'njengah_show_email_order_meta', 30, 3 );

บทสรุป

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

บทความที่คล้ายกัน

1. วิธีเพิ่มฟิลด์ข้อความที่กำหนดเองของ Woocommerce บนหน้าผลิตภัณฑ์
2. วิธีสร้างพื้นที่วิดเจ็ตที่กำหนดเองใน WordPress ทีละขั้นตอน
3. วิธีการย้ายหน้าร้านเมนูหลัก WooCommerce
4. วิธีซ่อนอัตราค่าจัดส่งหากมีการจัดส่งฟรี WooCommerce
5. วิธีซ่อนปริมาณในสต็อกใน WooCommerce
6. วิธีซ่อน SKU, หมวดหมู่, แท็ก Meta Product Page WooCommerce
7. วิธีซ่อนปุ่มอัปเดตหน้ารถเข็น WooCommerce
8. วิธีซ่อนคำอธิบายผลิตภัณฑ์ หัวเรื่อง WooCommerce
9. วิธีซ่อนแท็บใด ๆ หน้าบัญชีของฉัน WooCommerce
10. วิธีเปลี่ยนข้อความแสดงข้อผิดพลาดของ WooCommerce Checkout