如何在Woocommerce中的woocommerce-accounts-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'。