在Woocommerce的结算明细之前添加新的自定义结帐字段?

时间:2018-05-09 15:35:52

标签: php wordpress woocommerce checkout hook-woocommerce

我可以在我的WooCommerce结帐屏幕上添加一组自定义字段,但需要将其移到“结算明细”上方。

怎么办呢?

根据this official WooCommerce documentation,这是一个添加额外自定义结帐字段的示例代码:

/**
 * Add the field to the checkout
 */
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

woocommerce_form_field( 'my_field_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Fill in this field'),
    'placeholder'   => __('Enter something'),
    ), $checkout->get_value( 'my_field_name' ));

echo '</div>';

}

2 个答案:

答案 0 :(得分:5)

已更新:结帐帐单字段前只有一个可用的挂钩,可用于在结帐表单中添加自定义字段。试试这个完整的代码:

add_action( 'woocommerce_checkout_before_customer_details', 'custom_checkout_fields_before_billing_details', 20 );
function custom_checkout_fields_before_billing_details(){
    $domain = 'woocommerce';
    $checkout = WC()->checkout;

    echo '<div id="my_custom_checkout_field">';

    echo '<h3>' . __('My New Fields Section') . '</h3>';

    woocommerce_form_field( '_my_field_name', array(
        'type'          => 'text',
        'label'         => __('My 1st new field', $domain ),
        'placeholder'   => __('Please fill in "my 1st new field"', $domain ),
        'class'         => array('my-field-class form-row-wide'),
        'required'      => true, // or false
    ), $checkout->get_value( '_my_field_name' ) );

    echo '</div>';
}

// Custom checkout fields validation
add_action( 'woocommerce_checkout_process', 'custom_checkout_field_process' );
function custom_checkout_field_process() {
    if ( isset($_POST['_my_field_name']) && empty($_POST['_my_field_name']) )
        wc_add_notice( __( 'Please fill in "My 1st new field".' ), 'error' );
}

// Save custom checkout fields the data to the order
add_action( 'woocommerce_checkout_create_order', 'custom_checkout_field_update_meta', 10, 2 );
function custom_checkout_field_update_meta( $order, $data ){
    if( isset($_POST['_my_field_name']) && ! empty($_POST['_my_field_name']) )
        $order->update_meta_data( '_my_field_name', sanitize_text_field( $_POST['_my_field_name'] ) );
}

代码进入活动子主题(或活动主题)的function.php文件。经过测试并正常工作。

您将获得一个包含新自定义字段的新字段(也可以包含许多字段):

enter image description here

官方参考文档:Customizing checkout fields using actions and filters

答案 1 :(得分:1)

WooCommerce使用挂钩显示结帐页面元素,例如结算和发货字段。您可以使用它们添加自己的自定义内容。您会注意到您发布的第一行代码包含 woocommerce_after_order_notes ,这是其中一个钩子。它定义了字段的位置。

如果您想在结算明细之前添加消息,可以使用此挂钩来执行此操作: woocommerce_before_checkout_billing_form

您可以在https://docs.woocommerce.com/wc-apidocs/hook-docs.html

找到完整的WooCommerce挂钩列表