How should I change the woocommerce_form_field HTML Structure?

by

To rewrite the output html from the woocommerce_form_field function there are 2 filter hooks available:

  1. Filter by type: here we can specify the $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. 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" 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>';
}

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 ) . '" 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 );

Output:

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

More Related Contents:

  1. Add a custom checkbox in WooCommerce checkout which value shows in admin edit order
  2. Reordering checkout fields in WooCommerce 3
  3. Add a new custom field to WooCommerce checkout and display on admin order pages and email notifications
  4. Adding custom field to product category
  5. Make checkout fields required in Woocommerce checkout
  6. WooCommerce : Add custom Metabox to admin order page
  7. Add fee based on specific payment methods in WooCommerce
  8. WooCommerce: Set country by default in checkout page
  9. Customize addresses fields on WooCommerce My account and Checkout
  10. Remove attribute values from product variation title and show them on separate rows
  11. Changing WooCommerce cart item names
  12. Multi checkbox fields in Woocommerce backend
  13. Show hide custom Woocommerce checkout field based on selected payment method
  14. Display in stock data in short description [closed]
  15. Get Order items and WC_Order_Item_Product in WooCommerce 3
  16. How to debug in WooCommerce 3+
  17. Create programmatically a WooCommerce product variation with new attribute values
  18. Add extra meta for orders in Woocommerce
  19. Get WooCommerce product categories from WordPress
  20. Woocommerce get products
  21. WooCommerce: Check if items are already in cart
  22. Updating product stock programmatically in Woocommerce 3
  23. Show Out of stock products at the end in Woocommerce [closed]
  24. Set product sale price programmatically in WooCommerce 3
  25. Create new product attribute programmatically in Woocommerce
  26. Allow specific products to be purchased only if a coupon is applied in Woocommerce
  27. Set cart item price from a hidden input field custom price in Woocommerce 3
  28. Add a quantity field to Ajax add to cart button on WooCommerce shop page
  29. Add a fee to an order programmatically in Woocommerce 3
  30. WooCommerce – send custom email on custom order status change

Leave a Comment