I'm using WooCommerce: Add Checkout Fees Based on Custom Radio Button from businessbloomer
My question is about woocommerce_form_field() which is used in part 1
// etc... echo '<div>'; echo '<h3>Customize Your Order!</h3>'; woocommerce_form_field( 'radio_choice', $args, $chosen ); echo '</div>'; // etc... The structure of the HTML that woocommerce_form_field( 'radio_choice', $args, $chosen ); outputs is
<p> <span> <input type="radio" value="0" name="radio_choice"> <label for="radio_choice_0">No Option</label> <input type="radio" value="10" name="radio_choice"> <label for="radio_choice_10">Option 1 ($10)</label> <input type="radio" value="30" name="radio_choice" checked="checked"> <label for="radio_choice_30">Option 2 ($30)</label> </span> </p> The structure that I'm trying to get is this:
<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> I searched for a solution but I could find one for the radio button
01 Answer
To rewrite the output html from the woocommerce_form_field function there are 2 filter hooks available:
- Filter by type: here we can specify the
$args['type']liketext,password,datetime,select,radio, etc...
/** * Filter by type. */ $field = apply_filters( 'woocommerce_form_field_' . $args['type'], $field, $key, $args, $value ); - General filter on form fields: a general filter where we can then add an if condition to apply this to a specific type of field
/** * General filter on form fields. * * @since 3.4.0 */ $field = apply_filters( 'woocommerce_form_field', $field, $key, $args, $value ); The first option seems most suitable for your question
So
apply_filters( 'woocommerce_form_field_' . $args['type']... Is going to be ( Where $args['type'] is equal to 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 ); The callback function uses $field which contains all HTML from <p> to the closing </p> HTML tag, so we have the ability to rewrite the entire output of this through our function
Source used for this answer: wc-template-functions.php#L2847-L2850, note the use of $args with which the code can be dynamically constructed.
(This code was copied from wc-template-functions.php line 2847 - 2850)
foreach ( $args['options'] as $option_key => $option_text ) { $field .= '<input type="radio" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '" ' . implode( ' ', $custom_attributes ) . '' . checked( $value, $option_key, false ) . ' />'; $field .= '<label for="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '">' . esc_html( $option_text ) . '</label>'; } So to answer your question: We get, based on the $key so that it is applied only for that specific piece
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 ) . '" />'; $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 ); Output:
<div> <ul> <li> <input type="radio" value="0" name="radio_choice"> <label>No Option</label> </li> <li> <input type="radio" value="10" name="radio_choice"> <label>Option 1 ($10)</label> </li> <li> <input type="radio" value="30" name="radio_choice"> <label>Option 2 ($30)</label> </li> </ul> </div> 
