WooCommerce:在结帐时更改计费字段的HTML结构 [英] WooCommerce: Change HTML structure of billing fields in checkout
问题描述
我想在结算字段中使用浮动标签。因此,我需要将< label>
元素放在HTML结构中的< input>
字段之后。 / p>
此刻,我的结构如下:
< p class = form-row form-row-first validate-required id = billing_first_name_field data-priority = 10>
< label for = billing_first_name class =>名字& nbsp;< abbr class = required title = required> *< / abbr>< / label>
< span class = woocommerce-input-wrapper>
< input type = text class = input-text form-control name = billing_first_name id = billing_first_name placeholder = value =名字 autocomplete =给定名称> ;
< / span>
< / p>
我要在input / span元素后添加标签,例如:
< p class = form-row form-row-first validate-required id = billing_first_name_field data-priority = 10>
< span class = woocommerce-input-wrapper>
< input type = text class = input-text form-control name = billing_first_name id = billing_first_name placeholder = value =名字 autocomplete =给定名称> ;
< / span>
< label for = billing_first_name class =>名字& nbsp;< abbr class = required title = required> *< / abbr>< / label>
< / p>
是否可以更改字段的输出?
我发现了一些挂钩来更改字段的某些元素: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
但这与元素的内容有关。不是HTML结构本身。
可能吗?
$ field
包含完整的< p> ...< / p>
输出。
这样您就可以完全调整输出。要使其保持动态,您可以使用$ args
中的值
请参阅: https://github.com/woocommerce/woocommerce/blob/master/includes/wc-template-functions.php#L2830 和随附的代码,该如何执行
function change_woocommerce_field_markup($ field,$ key,$ args, $ value){
if($ key ==='billing_first_name'){
$ field ='my html';
}
返回$ field;
}
add_filter( woocommerce_form_field_text, change_woocommerce_field_markup,10,4);
I want to use floating labels for the billing fields. Therefore I need to place the <label>
element after the <input>
field in the HTML structure.
At the moment my structure looks like this:
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First Name <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name">
</span>
</p>
I want the label after the input/span element, like this:
<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name">
</span>
<label for="billing_first_name" class="">First Name <abbr class="required" title="required">*</abbr></label>
</p>
Is there any way to change the output of the fields?
I found some hooks to change some elements of the fields: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
But that's all related the content of the elements. Not the HTML structure itself. Is that even possible?
$field
contains the complete<p>...</p>
output. So you can completely adjust the output. To keep it dynamic you can use the values from$args
See: https://github.com/woocommerce/woocommerce/blob/master/includes/wc-template-functions.php#L2830 and accompanying code, how to do this
function change_woocommerce_field_markup($field, $key, $args, $value) {
if( $key === 'billing_first_name') {
$field = 'my html';
}
return $field;
}
add_filter("woocommerce_form_field_text","change_woocommerce_field_markup", 10, 4);
这篇关于WooCommerce:在结帐时更改计费字段的HTML结构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!