如何在 Woocommerce 中的 woocommerce-account-fields 上方添加标题

Question

序言

我的问题与asked here 非常相似。我猜想，答案也将与here 非常相似。

场景

结帐页面显示典型的结算字段。下面是 div 类woocommerce-account-fields，其中是 div 类create-account。嵌套在其中的表单有两个字段，account_username 和 account_password。

我想与此挂钩并在最后一个帐单字段 (billing_email) 下方和 account_username 字段上方显示一个标题。

我尝试了什么

阅读上面提到的问题和答案，我想我可以做这样的事情：

add_action( 'woocommerce_form_field_text','XYZ_checkout_custom_heading', 10, 2 );

function XYZ_checkout_custom_heading( $field, $key ){
    if ( is_checkout() && ( $key == 'billing_email') ) {
        $field .= '<div id="add_custom_heading"><h3>' . __('MY CUSTOM HEADING') . '</h3></div>';
    }
    return $field;
}

但是这样做的结果是页面没有变化。但是，如果我使用key == 'account_username，它会起作用，除非标题显然出现在错误的位置（在帐户用户名字段下方，而不是在其上方）。

这是我所指的视觉截图。

Answer 1

如果我理解正确，该位置在“创建帐户”区域上方。

如果是这样，你可以使用动作钩子woocommerce_before_checkout_registration_form

add_action( 'woocommerce_before_checkout_registration_form','XYZ_checkout_custom_heading');

function XYZ_checkout_custom_heading( ){
    echo '<div id="add_custom_heading"><h3>' . __('MY CUSTOM HEADING') . '</h3></div>';
}

你仍然可以使用woocommerce_form_field_text，但你不应该使用$field .= <heading>。但改为使用$field = <heading> . $field。这样，您的标题就会添加到顶部。不在底部。这就像field + heading 当你在做$field .= <heading> 但heading + field 和$field = <heading> . $field 时@

add_action( 'woocommerce_form_field_text','XYZ_checkout_custom_heading', 10, 2 );

function XYZ_checkout_custom_heading( $field, $key ){
    if ( is_checkout() && ( $key == 'account_username') ) {
        $field = '<div id="add_custom_heading"><h3>' . __('MY CUSTOM HEADING') . '</h3></div>' . $field;
    }
    return $field;
}

还要注意$key == 'account_username'。