Woocommerce: help replacing html output

Question

My checkout-billing-fields and shipping-fields are output in html with 3 different row alignements. first, last and wide. I only want to set them to be first, and last - so that each input is next to the other.

Original:

<div class="woocommerce-billing-fields">

    <h3>Faktureringsdetaljer</h3>




    <p class="form-row form-row form-row-first validate-required" id="billing_first_name_field"><label for="billing_first_name" class="">Fornavn <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value=""></p>

    <p class="form-row form-row form-row-last validate-required" id="billing_last_name_field"><label for="billing_last_name" class="">Etternavn <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value=""></p><div class="clear"></div>

    <p class="form-row form-row form-row-wide" id="billing_company_field"><label for="billing_company" class="">Navn på firma</label><input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value=""></p>

    <p class="form-row form-row form-row-wide address-field validate-required" id="billing_address_1_field"><label for="billing_address_1" class="">Adresse <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="Gateadresse" value=""></p>

    <p class="form-row form-row form-row-last address-field validate-required validate-postcode" id="billing_postcode_field"><label for="billing_postcode" class="">Postnummer  <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="Postnummer " value=""></p><div class="clear"></div>

    <p class="form-row form-row form-row-wide address-field validate-required" id="billing_city_field"><label for="billing_city" class="">Sted <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="Sted" value=""></p>

    <p class="form-row form-row form-row-first address-field validate-state" id="billing_state_field" style="display: none"><label for="billing_state" class="">Delstat / Fylke</label><input type="hidden" class="hidden" name="billing_state" id="billing_state" value="" placeholder=""></p>

    <p class="form-row form-row form-row-first validate-required validate-email" id="billing_email_field"><label for="billing_email" class="">Epostadresse <abbr class="required" title="påkrevet">*</abbr></label><input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="[email protected]"></p>

    <p class="form-row form-row form-row-last validate-required validate-phone" id="billing_phone_field"><label for="billing_phone" class="">Telefon <abbr class="required" title="påkrevet">*</abbr></label><input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value=""></p><div class="clear"></div>


</div>

What I want:

<div class="woocommerce-billing-fields">

    <h3>Faktureringsdetaljer</h3>




    <p class="form-row form-row form-row-first validate-required" id="billing_first_name_field"><label for="billing_first_name" class="">Fornavn <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value=""></p>

    <p class="form-row form-row form-row-last validate-required" id="billing_last_name_field"><label for="billing_last_name" class="">Etternavn <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value=""></p>

    <p class="form-row form-row form-row-first" id="billing_company_field"><label for="billing_company" class="">Navn på firma</label><input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value=""></p>

    <p class="form-row form-row form-row-last address-field validate-required" id="billing_address_1_field"><label for="billing_address_1" class="">Adresse <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_address_1" id="billing_address_1" placeholder="Gateadresse" value=""></p>

    <p class="form-row form-row form-row-first address-field validate-required validate-postcode" id="billing_postcode_field"><label for="billing_postcode" class="">Postnummer  <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="Postnummer " value=""></p>

    <p class="form-row form-row form-row-last address-field validate-required" id="billing_city_field"><label for="billing_city" class="">Sted <abbr class="required" title="påkrevet">*</abbr></label><input type="text" class="input-text " name="billing_city" id="billing_city" placeholder="Sted" value=""></p>

    <p class="form-row form-row form-row-first address-field validate-state" id="billing_state_field" style="display: none"><label for="billing_state" class="">Delstat / Fylke</label><input type="hidden" class="hidden" name="billing_state" id="billing_state" value="" placeholder=""></p>

    <p class="form-row form-row form-row-first validate-required validate-email" id="billing_email_field"><label for="billing_email" class="">Epostadresse <abbr class="required" title="påkrevet">*</abbr></label><input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="[email protected]"></p>

    <p class="form-row form-row form-row-last validate-required validate-phone" id="billing_phone_field"><label for="billing_phone" class="">Telefon <abbr class="required" title="påkrevet">*</abbr></label><input type="tel" class="input-text " name="billing_phone" id="billing_phone" placeholder="" value=""></p><div class="clear"></div>


</div>

Anyone know where I can override these? I've been searching up and down in most of the /includes in the woocommerce folders. haven't got a clue.

Answer 1

Can you specify exactly what you want to change? It's quite hard to compare and spot the difference.

If you only want the change the classes on some of the fields, the right way to do that is:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {

    $fields['billing']['billing_company']['class'] = array('form-row', 'form-row', 'form-row-first');
    $fields['billing']['billing_address_1']['class'] = array('form-row', 'form-row', 'form-row-first', 'address-field', 'validate-required');
    $fields['billing']['billing_postcode']['class'] = array('form-row', 'form-row', 'form-row-first', 'address-field', 'validate-required');
    $fields['billing']['billing_city']['class'] = array('form-row', 'form-row', 'form-row-last', 'address-field', 'validate-required');
    $fields['billing']['billing_state']['class'] = array('form-row', 'form-row', 'form-row-first', 'address-field', 'validate-state');
    $fields['billing']['billing_email']['class'] = array('form-row', 'form-row', 'form-row-first', 'address-field', 'validate-email');
    $fields['billing']['billing_phone']['class'] = array('form-row', 'form-row', 'form-row-last', 'address-field', 'validate-phone');
    return $fields;
}

You should absolutely not use JavaScript for this.

Answer 2

Add these class seems to be added dynamically by the theme or a plugin its hard to trace the root file for the cause of adding these class.

In order to change the classes you need to use jQuery as the last resort.And luckily there are ids for each field so you can select specific elements and change their properties.

Here is a code which might help you.

jQuery("#billing_company_field").removeClass( "form-row-wide" ).addClass( "form-row-first" );

The above code will change class for only one div element. Use,Modify and add the other needed code. This code should be enqueued on the page where you need the changes to be affected.