Modify html on checkout page?

  • Resolved the_lar

    (@the_lar)


    5 years, 5 months ago

    Hi,

    I’m trying to wrap ‘some’ of the fields of the checkout page in a div and inject some buttons because I am implementing some address validation.

    Basically to start with I need a wrapper around company, address line 1, address line 2, town and postcode so I can show/hide them but I can’t seem to get anything to work. Here’s what I’ve tried –

    In my filters file:

    
function change_woocommerce_field_markup($field, $key, $args, $value){
    if($key === 'billing_company') {
        $field = '<div class="address-wrapper">'.$field;
    }
    else if ($key === 'billing_postcode') {
        $field = $field.'</div>';
    }
    else {
        $field = $field;
    }
    return $field;
}
add_filter('woocommerce_form_field', '\App\change_woocommerce_field_markup', 10, 4);

    So I’m prepending and appending the relevant fields with the html that opens and closes the wrapper. However the resultant HTML looks like this:

    
<div class="address-wrapper"></div>
<p class="form-row form-row-first validate-required" id="billing_first_name_field"....
<p class="form-row form-row-last validate-required" id="billing_last_name_field"....

    So it’s putting the wrapper at the top of the container! I don’t get it, what’s going on with this?

    Thanks
    Kevin

Viewing 1 replies (of 1 total)
  • function change_woocommerce_field_markup( $field, $key, $args, $value ) {

    //  Remove the .form-row class from the current field wrapper

    $field = str_replace('form-row', '', $field);

    //  Wrap the field (and its wrapper) in a new custom div, adding .form-row so the reshuffling works as expected, and adding the field priority

    $field = '<div class="form-row single-field-wrapper" data-priority="' . $args['priority'] . '">' . $field . '</div>';

    return $field;
}

add_filter( 'woocommerce_form_field', 'change_woocommerce_field_markup', 10, 4 );
Viewing 1 replies (of 1 total)
  • The topic ‘Modify html on checkout page?’ is closed to new replies.

Tags