Woocommerce: help replacing html output

Question

My control and delivery fields are displayed in html with three different line alignments. first, last and wide. I just want them to be first and last - so that each entrance 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=" [e-mail] "></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=" [e-mail] "></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> 

Does anyone know where I can override them? I searched up and down in most / included folders in woocommerce. didn't get the clue.

Answer 1

Can you indicate exactly what you want to change? It is quite difficult to compare and determine the difference.

If you only need to change the classes on some of the fields, the correct way to do this 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 not use JavaScript for this.

Answer 2

Add this class seems to be added dynamically by topic or plugin to trace the root file for the reason for adding this class.

To change classes, you need to use jQuery as a last resort. And, fortunately, there are identifiers for each field, so you can select certain elements and change their properties.

Here is the code that can help you.

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

The above code will change the class to just one div element. Use, modify and add another required code. This code should be queued on the page where you need the changes that will be affected.