如何在 Woocommerce 的结帐字段之间添加标题 [英] How to add a heading in between checkout fields of Woocommerce

问题描述

我正在自定义 WooCommerce 结帐页面字段.我想在字段之间添加一个标题(文本).我已经重新排序了这样的字段

I am customizing the WooCommerce checkout page fields. I want to add a heading (text) in between the fields. I have reordered the fields like this

add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');

function ac_checkout_reorder_fields($fields) {

    $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_company", 
        "billing_email", 
        "billing_phone",
        "billing_address_1", 
        "billing_address_2", 
        "billing_postcode", 
        "billing_country" 


    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;
    return $fields;

}

然后我添加了一个这样的新标题

Then I added a new heading like this

add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_heading' );

function add_custom_heading( $checkout ) {

    echo '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>' ;


}

现在重新排列字段并显示自定义标题.但我希望 标题显示在名称的正下方 &公司字段. 使用我的代码，该字段被添加到下面.我如何将其重新定位到我想要的位置.

Now the fields are re-arranged and the custom heading is showing. But I want the heading showing just below the name & company fields. With my code, the field is being added below. How I an reposition this in my desired place.

PS:我还尝试使用此钩子 woocommerce_checkout_fields 添加占位符并删除标签来添加自定义整个字段部分.这是代码，但这也不能帮助我解决问题.

PS: I also tried to add customize the entire fields sections with this hook woocommerce_checkout_fields adding placeholder and removing the labels. Here are the codes but this also does not help me solve the issue.

function add_wc_custom_fields($fields) {
global $woocommerce;
    $countries_obj   = new WC_Countries();
    $countries   = $countries_obj->__get('countries');

     $fields['billing']['billing_first_name'] = array(
            'label' => '',
            'placeholder' => _x('First Name*', 'placeholder', 'woocommerce'),
            'required' => true,
           'class'    => array( 'form-row-first' ),
        );
        $fields['billing']['billing_last_name'] = array(
            'label' => '',
            'placeholder' => _x('last Name*', 'placeholder', 'woocommerce'),
            'required' => true,
           'class'    => array( 'form-row-last' ),
        );
        $fields['billing']['billing_company'] = array(
            'label' => '',
            'placeholder' => _x('Company Name', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('checkout-billing-company')
        );
        $fields['billing']['billing_address_1'] = array(
            'label' => '',
            'placeholder' => _x('Address(Line 1)*', 'placeholder', 'woocommerce'),
            'required' => true,
            'class' => array('checkout-billing-addressL1')
        );
         $fields['billing']['billing_address_2'] = array(
            'label' => '',
            'placeholder' => _x('Address(Line 2)*', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('checkout-billing-addressL2')
        );
         $fields['billing']['billing_email'] = array(
            'label' => '',
            'placeholder' => _x('Email Address*', 'placeholder', 'woocommerce'),
            'required' => true,
            'class' => array('form-row-first')
        );
        $fields['billing']['billing_phone'] = array(
            'label' => '',
            'placeholder' => _x('Phone Number', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-last')
        );
        $fields['billing']['billing_city'] = array(
            'label' => '',
            'placeholder' => _x('Town/City', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-first')
        );

$fields['billing']['billing_state'] = array(
            'label' => '',
            'placeholder' => _x('State/County', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-first')
        );
    $fields['billing']['billing_postcode'] = array(
            'label' => '',
            'placeholder' => _x('Zip/Postcode', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-first')
        );
        $fields['billing']['billing_country'] = array(
            'label' => '',
            'type' => 'select',
            'placeholder' => _x('Country', 'placeholder', 'woocommerce'),
            'required' => false,
            'class' => array('form-row-last'),
              'options'    => $countries
        );
        return $fields;
    }

add_filter('woocommerce_checkout_fields', 'add_wc_custom_fields');

推荐答案

我们可以使用过滤器 'woocommerce_form_field_' .$type... 其中 $type 是输入的类型...在我们的例子中 billing_company 是文本类型...这个过滤器返回该字段的 html，在我们的示例中为 billing 字段，billing_company.. 过滤器有 4 个参数被传递，它们是 $field, $key, $args, $value... 我们只需要其中的两个...

we can use the filter 'woocommerce_form_field_' . $type... where $type is the type of the input... in our case billing_company is of type text... this filter returns the html of the field, in our case billing field, billing_company.. the filter has 4 arguments being passed, these are $field, $key, $args, $value... we just need two of these...

add_action( 'woocommerce_form_field_text','reigel_custom_heading', 10, 2 );
function reigel_custom_heading( $field, $key ){
    // will only execute if the field is billing_company and we are on the checkout page...
    if ( is_checkout() && ( $key == 'billing_company') ) {
        $field .= '<p class="form-row form-row-wide">Custom Heading</p>';
    }
    return $field;
}

重要提示:如果我们不将其格式化为带有 form-row 类的段落，Woocommerce 将把它放在所有计费字段的顶部(原因我不知道).这向我们表明这是黑客"，也许您的目标以不同的方式更好地实现.

Important: If we don’t format it as a paragraph with the class form-row it will be put to the top of all billing fields by Woocommerce (reasons unknown to me). This shows us that this as "Hack" and maybe your goals are achieved better differently.

这篇关于如何在 Woocommerce 的结帐字段之间添加标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！