6

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.

Improve this question

2 Answers 2

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks @Pelmered - Just what I needed. one small hiccup is the <div class="clear"></div> that also outputs right after ['billing_postcode']. How do I remove this?
Ah, just add $fields['billing']['billing_postcode']['clear'] = ''
For more modifications just var_dump the $fields to get an idea of what you should change to obtain the desired changes. It's actually quite straight forward when you read the output.
Thanks, that sorted it out @Pelmered. just added the $fields['billing']['billing_postcode']['clear'] = '';
That's a really straight forward hooked in function as $fields is passed via the filter, however, on my own case, I've noticed it only changes the class names for the html element which wrap the fields itself.I mean, for an organizational purpose, that works great, but what if I want to change the various classes which are set for all the input types within the form. I'm trying to implement a .js validation plugin which requires these custom classes to exist for labels, text, radio, checkbox, select and all types of form inputs.
|
1

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.

Improve this answer

1 Comment

Yes, this is really the last resort. But in this case, it is very easy to change this in the right way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.