WooCommerce：在结帐时更改帐单字段的 HTML 结构答案

【问题标题】：WooCommerce: Change HTML structure of billing fields in checkoutWooCommerce：在结帐时更改帐单字段的 HTML 结构
【发布时间】：2020-08-02 18:21:21
【问题描述】：

我想为帐单字段使用浮动标签。因此，我需要在 HTML 结构中的 <input> 字段之后放置 <label> 元素。

目前我的结构是这样的：

<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>

我想要 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="">First Name&nbsp;<abbr class="required" title="required">*</abbr></label>
</p>

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

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

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

【问题讨论】：

标签： php wordpress woocommerce checkout

【解决方案1】：

$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';
    }
    return $field;
} 

add_filter("woocommerce_form_field_text","change_woocommerce_field_markup", 10, 4);

【讨论】：