WooCommerce:在结帐时更改帐单字段的 HTML 结构 [英] WooCommerce: Change HTML structure of billing fields in checkout

问题描述

我想对帐单字段使用浮动标签.因此，我需要将 元素放在 HTML 结构中的 字段之后.

目前我的结构是这样的:

<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10"><label for="billing_first_name" class="">名字<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>

我想要 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="First Name" autocomplete="given-name"></span><label for="billing_first_name" class="">名字<abbr class="required" title="required">*</abbr></label></p>

有没有办法改变字段的输出?

我发现了一些改变字段元素的钩子:https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

但这都与元素的内容有关.不是 HTML 结构本身.这甚至可能吗?

解决方案

$field 包含完整的

...

输出.所以你可以完全调整输出.为了保持动态，您可以使用 $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 = '我的 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&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="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&nbsp;<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屋！