必填的自定义WooCommerce结帐字段不会验证输入的值 [英] Required custom WooCommerce checkout fields don't validate entered value

问题描述

我要在店面子主题 functions.php 文件中添加WooCommerce自定义结帐字段。

它们具有必需属性。

的目的是使这些字段显示在页面顶部的计费字段之前。

I'm adding WooCommerce custom checkout fields in a Storefront child theme functions.php file.
They have a "required" attribute.
The aim is to have these fields appear at the top of the page, before the billing fields.

单击提交按钮继续操作时，付款，我收到了必填的自定义字段验证错误（请填写您的姓名），即使使用有效数据填充字段，也无法继续付款。

when clicking the submit button to proceed to payment, I'm getting the required custom field validation error ('please fill in your name') and can't continue with payment, even though filling the field with valid data.

任何提示如何解决此问题或在哪里开始调试？

Any clue how to fix this or where to start debugging ?

这是 functions.php ：

add_action( 'woocommerce_before_checkout_form', 'my_custom_checkout_fields' );

function my_custom_checkout_fields( $checkout ) {

    echo '<div id="my_custom_checkout_field" class="col4-set"><h2>' . __('name') . '</h2>';

    woocommerce_form_field( 'developer_name', array(
        'type'          => 'text',
        'class'         => array('developer_name-class form-row form-row-first'),
        'label'         => __('name'),
        'placeholder'   => __('fill in your name'), 
        'required'      => true,
        ), $checkout->get_value( 'developer_name' ));                               

    echo '</div>';

}

/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
if ( ! $_POST['developer_name'] )
        wc_add_notice( __( 'please fill in your name' ), 'error' );  
}

---

我尝试了以下操作，但他们都没有帮助：

---

I tried the following but none of them helped:

1。更改：

if ( ! $_POST['developer_name'] ) 

到

if ( empty( $_POST['developer_name']) )

2。更改触发器：

 add_action( 'woocommerce_before_checkout_form', 'my_custom_checkout_fields' ); 

到

add_action( 'woocommerce_after_checkout_form', 'my_custom_checkout_fields' );

3。更新到最新的Woocomerce 3.0.5版本

我正在运行Wordpress 4.7.4

相关的活动插件：

Uni CPO-WooCommerce选项和价格计算公式

I'm running Wordpress 4.7.4
additional related active plugins:
Uni CPO - WooCommerce Options and Price Calculation Formulas

推荐答案

正如您可以在 woocommerce_before_checkout_form 钩子中阅读的那样，它位于结帐表单之前（因此不在结帐表单之外）。 因此，此自定义字段无法在此挂钩中使用。

您可以改用 woocommerce_checkout_update_order_meta 动作挂钩，由于其中没有$ checkout参数，因此对代码进行了一些小的更改。

You can use instead woocommerce_checkout_update_order_meta action hook, making some little changes in your code as there is no $checkout argument available in it.

这将在页面顶部的计费字段之前显示字段…

因此，您现在的完整代码应为：

So your complete code should be now:

/**
 * Add the field to the checkout
 */
add_action( 'woocommerce_checkout_before_customer_details', 'my_custom_checkout_fields' );

function my_custom_checkout_fields() {

    echo '<div id="my_custom_checkout_field" class="col4-set"><h2>' . __('name') . '</h2>';

    woocommerce_form_field( 'developer_name', array(
        'type'          => 'text',
        'class'         => array('developer_name-class form-row form-row-first'),
        'label'         => __('name'),
        'placeholder'   => __('fill in your name'),
        'required'      => true,
    ), WC()->checkout->get_value( 'developer_name' ));

    echo '</div>';

}

/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['developer_name'] )
        wc_add_notice( __( 'Please fill in your name.' ), 'error' );
}


// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta', 10, 1 );
function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['developer_name'] ) ) {
        update_post_meta( $order_id, 'Developer name', sanitize_text_field( $_POST['developer_name'] ) );
    }
}

// Display the custom-field in orders view
add_action( 'woocommerce_order_details_after_customer_details', 'display_my_custom_field_in_orde_details', 10, 1 );
function display_my_custom_field_in_orde_details( $order ) {

    $developer_name = get_post_meta( $order->get_id(), 'Developer name',  true );

    if ( ! empty( $developer_name ) ):
    ?>
        <table class="woocommerce-table woocommerce-table--customer-details shop_table customer_details">
            <tbody><tr>
                <th>Developer name:</th>
                <td><?php echo $developer_name; ?></td>
            </tr></tbody>
        </table>
    <?php
    endif;
}

此代码位于您的活动子主题（或主题）的function.php文件中）或在任何插件文件中。

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

此代码已通过测试，可用于WooCommerce 3.0+版本

This code is tested and works for WooCommerce version 3.0+

这篇关于必填的自定义WooCommerce结帐字段不会验证输入的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！