Comment dois-je modifier la structure HTML de woocommerce_form_field ?

Question

J'utilise WooCommerce : ajouter des frais de paiement basés sur un bouton radio personnalisé de businessbloomer

Ma question porte sur woocommerce_form_field()ce qui est utilisé dans la partie 1

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

La structure du HTML qui sort estwoocommerce_form_field( 'radio_choice', $args, $chosen );

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

La structure que j'essaie d'obtenir est celle-ci :

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

---

J'ai cherché une solution mais j'ai pu en trouver une pour le bouton radio

Answer 1

Pour réécrire le html de sortie de la woocommerce_form_fieldfonction, 2 crochets de filtre sont disponibles :

1. Filtrer par type : ici on peut spécifier les $args['type']like text, password, datetime, select, radio, etc...

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

1. Filtre général sur les champs de formulaire : un filtre général où l'on peut ensuite ajouter une condition if pour l'appliquer à un type de champ spécifique

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

---

La première option semble la plus adaptée à votre question

Alors

apply_filters( 'woocommerce_form_field_' . $args['type']...

Va être ( Où $args['type']est égal à 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 );

La fonction de rappel utilise $fieldqui contient tout le code HTML de <p>la balise HTML de fermeture </p>, nous avons donc la possibilité de réécrire l'intégralité de la sortie via notre fonction

---

Source utilisée pour cette réponse : wc-template-functions.php#L2847-L2850 , notez l'utilisation de $argsavec laquelle le code peut être construit dynamiquement.

(Ce code a été copié de wc-template-functions.phpla ligne 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>';
}

---

Donc, pour répondre à votre question : Nous obtenons, sur la base du $keyafin qu'il ne soit appliqué que pour cette pièce spécifique

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

Production:

<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 ($10)</label> </li> <li> <input type="radio" value="30" name="radio_choice" id="radio_choice_30"> <label>Option 2 ($30)</label>
        </li>
    </ul>
</div>