Woocommerce - 如何在结帐页面上更改结帐字段的html标记？

Question

我使用这个钩子：

add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_field' );
function add_custom_field( $checkout ) {

echo '<div id="custom_field_wrapper">';  
woocommerce_form_field( 'custom_field', array(
'type'          => 'text',
'class'         => array('custom_field_class'),
'label'         => __('Custom Field'),
'placeholder'   => __('Please input value ...'),
'required'   => false, ), 
$checkout->get_value( 'custom_field' ) ); 
echo '</div>';
}

我得到了这个标记：

<div id="custom_field_wrapper">
    <p class="form-row custom_field_class" id="custom_field_field" data-priority="">
        <label for="custom_field" class="">Custom Field</label>
        <input type="text" class="input-text " name="custom_field" id="custom_field" placeholder="Please input value ..." value="">
    </p>
</div>

但是所需的标记看起来像这样：

<div class="row order-form__row">
    <div class="col-lg-3 col-md-4">
        <label class="label" for="index-field">Индекс:</label>
    </div>
    <div class="col-lg-6 col-md-6">
        <input class="input" type="text" name="index" id="index-field"/>
    </div>
    <div class="col-lg-3 col-md-2"><a class="field-after" href="javascript:void(0);" target="_blank">Забыли индекс?</a></div>
</div>

聪明的人有助于解决困境......如何根据要求更改html标记？