首页 文章

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

提问于
浏览 次
1

我可以在我的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>';

}
php wordpress woocommerce checkout hook-woocommerce

2 回答

  • 1

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

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

    您可以在https://docs.woocommerce.com/wc-apidocs/hook-docs.html找到完整的WooCommerce挂钩列表

    回复于
  • 4

    Updated: 结帐帐单字段前只有一个可用的挂钩，可用于在结帐表单中添加自定义字段 . 试试这个完整的代码：

    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

    回复于

相关问题