我应该如何更改 woocommerce_form_field HTML 结构?
How should I change the woocommerce_form_field HTML Structure?
我正在使用来自 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', $args, $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 ()</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 ()</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 个过滤器挂钩可用:
- 按类型过滤:这里我们可以指定
$args['type']
,如text
、password
、datetime
、select
, radio
, 等等...
/**
* Filter by type.
*/
$field = apply_filters( 'woocommerce_form_field_' . $args['type'], $field, $key, $args, $value );
- 表单字段的通用过滤器:通用过滤器,然后我们可以在其中添加 if 条件以将其应用于特定类型的字段
/**
* General filter on form fields.
*
* @since 3.4.0
*/
$field = apply_filters( 'woocommerce_form_field', $field, $key, $args, $value );
第一个选项似乎最适合你的问题
所以
apply_filters( 'woocommerce_form_field_' . $args['type']...
将是(其中 $args['type']
等于 radio
)
function filter_woocommerce_form_field_radio( $field, $key, $args, $value ) {
// Do something
return $field;
}
add_filter( 'woocommerce_form_field_radio', 'filter_woocommerce_form_field_radio', 10, 4 );
回调函数使用$field
,其中包含从<p>
到结束</p>
HTML标签的所有HTML,所以我们可以重写通过我们的函数
的全部输出
此答案使用的来源:wc-template-functions.php#L2847-L2850,请注意使用 $args
可以动态构造代码。
(此代码复制自 wc-template-functions.php
第 2847 - 2850 行)
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, $key, $args, $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', 'filter_woocommerce_form_field_radio', 10, 4 );
输出:
<div>
<ul>
<li>
<input type="radio" value="0" name="radio_choice" id="radio_choice_0">
<label>No Option</label>
</li>
<li>
<input type="radio" value="10" name="radio_choice" id="radio_choice_10">
<label>Option 1 ()</label>
</li>
<li>
<input type="radio" value="30" name="radio_choice" id="radio_choice_30">
<label>Option 2 ()</label>
</li>
</ul>
</div>
我正在使用来自 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', $args, $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 ()</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 ()</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 个过滤器挂钩可用:
- 按类型过滤:这里我们可以指定
$args['type']
,如text
、password
、datetime
、select
,radio
, 等等...
/**
* Filter by type.
*/
$field = apply_filters( 'woocommerce_form_field_' . $args['type'], $field, $key, $args, $value );
- 表单字段的通用过滤器:通用过滤器,然后我们可以在其中添加 if 条件以将其应用于特定类型的字段
/**
* General filter on form fields.
*
* @since 3.4.0
*/
$field = apply_filters( 'woocommerce_form_field', $field, $key, $args, $value );
第一个选项似乎最适合你的问题
所以
apply_filters( 'woocommerce_form_field_' . $args['type']...
将是(其中 $args['type']
等于 radio
)
function filter_woocommerce_form_field_radio( $field, $key, $args, $value ) {
// Do something
return $field;
}
add_filter( 'woocommerce_form_field_radio', 'filter_woocommerce_form_field_radio', 10, 4 );
回调函数使用$field
,其中包含从<p>
到结束</p>
HTML标签的所有HTML,所以我们可以重写通过我们的函数
此答案使用的来源:wc-template-functions.php#L2847-L2850,请注意使用 $args
可以动态构造代码。
(此代码复制自 wc-template-functions.php
第 2847 - 2850 行)
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, $key, $args, $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', 'filter_woocommerce_form_field_radio', 10, 4 );
输出:
<div>
<ul>
<li>
<input type="radio" value="0" name="radio_choice" id="radio_choice_0">
<label>No Option</label>
</li>
<li>
<input type="radio" value="10" name="radio_choice" id="radio_choice_10">
<label>Option 1 ()</label>
</li>
<li>
<input type="radio" value="30" name="radio_choice" id="radio_choice_30">
<label>Option 2 ()</label>
</li>
</ul>
</div>