如何在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 $添加自定义整个字段部分c $ c>添加占位符并删除标签。这是代码,但这也无济于事。
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,在我们的案例中为计费字段 $ 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 .= '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>';
}
return $field;
}
这篇关于如何在Woocommerce的结帐字段之间添加标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!