我应该如何更改woocommerce_form_field HTML结构？

问题描述

我正在使用businessbloomer的WooCommerce: Add Checkout Fees Based on Custom Radio Button

我的问题是关于第1部分中使用的woocommerce_form_field()

// etc...
echo '<div id="checkout-radio">';
echo '<h3>Customize Your Order!</h3>';
woocommerce_form_field( 'radio_choice',$args,$chosen );
echo '</div>';
// etc...

woocommerce_form_field( 'radio_choice',$chosen );输出的HTML的结构是

<p class="form-row form-row-wide update_totals_on_change" id="radio_choice_field" data-priority="">
    <span class="woocommerce-input-wrapper"> 
        <input type="radio" class="input-radio " value="0" name="radio_choice" id="radio_choice_0">
        <label for="radio_choice_0" class="radio ">No Option</label>
        <input type="radio" class="input-radio " value="10" name="radio_choice" id="radio_choice_10">
        <label for="radio_choice_10" class="radio ">Option 1 ($10)</label>
        <input type="radio" class="input-radio " value="30" name="radio_choice" id="radio_choice_30" checked="checked">
        <label for="radio_choice_30" class="radio ">Option 2 ($30)</label> 
    </span>
</p>

我想要的结构是这样的：

<div>
    <ul>
        <!-- here every element which is gonna be type radio needs to be with It's label in a <li> element -->

        <li>
            <input type='radio'> </input>
            <label>No option</label>
        </li>
        <li>
            <input type='radio'> </input>
            <label>Option 2</label>
        </li>
        <li>
            <input type='radio'> </input>
            <label>Option 2</label>
        </li>

    </ul>
</div>

---

我搜索了一种解决方案，但是我可以找到一个单选按钮

解决方法

要重写woocommerce_form_field函数的输出html，可以使用2个过滤器挂钩：

1. 按类型过滤：在这里我们可以指定$args['type']，例如text，password，datetime，select，{ {1}}等...

radio

1. 表单字段上的常规过滤器：常规过滤器，我们可以在其中添加if条件，以将其应用于特定类型的字段

/**
 * Filter by type.
 */
$field = apply_filters( 'woocommerce_form_field_' . $args['type'],$field,$key,$args,$value );

---

第一个选项似乎最适合您的问题

所以

/**
 * General filter on form fields.
 *
 * @since 3.4.0
 */
$field = apply_filters( 'woocommerce_form_field',$value );

将会是（其中apply_filters( 'woocommerce_form_field_' . $args['type']... 等于$args['type']）

radio

回调函数使用function filter_woocommerce_form_field_radio( $field,$value ) { // Do something return $field; } add_filter( 'woocommerce_form_field_radio','filter_woocommerce_form_field_radio',10,4 ); ，其中包含从$field到结束<p> HTML标记的所有HTML，因此我们可以通过函数重写其全部输出>

---

此答案使用的来源：wc-template-functions.php#L2847-L2850，请注意使用</p>可以动态构造代码。

（此代码是从$args行2847-2850复制的）

wc-template-functions.php

---

因此回答您的问题：我们得到的是基于foreach ( $args['options'] as $option_key => $option_text ) { $field .= '<input type="radio" class="input-radio ' . esc_attr( implode( ' ',$args['input_class'] ) ) . '" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '" ' . implode( ' ',$custom_attributes ) . ' id="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '"' . checked( $value,$option_key,false ) . ' />'; $field .= '<label for="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '" class="radio ' . implode( ' ',$args['label_class'] ) . '">' . esc_html( $option_text ) . '</label>'; } 的信息，因此它仅适用于该特定作品

$key

输出：

function filter_woocommerce_form_field_radio( $field,$value ) {
    // Based on key
    if ( $key == 'radio_choice' ) {
        if ( ! empty( $args['options'] ) ) {
            
            $field = '<div><ul>';
            
            foreach ( $args['options'] as $option_key => $option_text ) {
                $field .= '<li>';
                $field .= '<input type="radio" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '" />';
                $field .= '<label>' . esc_html( $option_text ) . '</label>';
                $field .= '</li>';
            }
            
            $field .= '</ul></div>';
        }
    }
    
    return $field;
}
add_filter( 'woocommerce_form_field_radio',4 );