Woocommerce: Hilfe beim Ersetzen der HTML-Ausgabe

Lesezeit: 8 Minuten

Meine Checkout-Rechnungsfelder und Versandfelder werden in html mit 3 verschiedenen Zeilenausrichtungen ausgegeben. zuerst, zuletzt und breit. Ich möchte sie nur als ersten und letzten festlegen – damit jeder Eingang neben dem anderen liegt.

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>

Was ich möchte:

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

Weiß jemand wo ich diese überschreiben kann? Ich habe in den meisten /includes in den Woocommerce-Ordnern auf und ab gesucht. hab keine ahnung.

Benutzer-Avatar
Pelmered

Können Sie genau angeben, was Sie ändern möchten? Es ist ziemlich schwer zu vergleichen und den Unterschied zu erkennen.

Wenn Sie nur die Klassen auf einigen Feldern ändern möchten, ist dies der richtige Weg:

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

Sie sollten dafür auf keinen Fall JavaScript verwenden.

  • Danke @Pelmered – Genau das, was ich brauchte. Ein kleiner Schluckauf ist der <div class="clear"></div> das gibt auch direkt danach aus ['billing_postcode']. Wie entferne ich das?

    – Benutzer1769411

    25. August 2015 um 19:14 Uhr

  • Ach, füge einfach hinzu $fields['billing']['billing_postcode']['clear'] = ''

    – Pelmered

    25. August 2015 um 19:28 Uhr

  • Für weitere Modifikationen einfach var_dump the $fields um eine Vorstellung davon zu bekommen, was Sie ändern sollten, um die gewünschten Änderungen zu erhalten. Es ist eigentlich ganz einfach, wenn Sie die Ausgabe lesen.

    – Pelmered

    25. August 2015 um 19:31 Uhr

  • Danke, das hat es geklärt @Pelmered. habe die gerade hinzugefügt $fields['billing']['billing_postcode']['clear'] = '';

    – Benutzer1769411

    25. August 2015 um 20:06 Uhr

  • Das ist eine wirklich einfache Hook-In-Funktion, da $fields über den Filter übergeben wird, aber in meinem eigenen Fall habe ich bemerkt, dass es nur die Klassennamen für das HTML-Element ändert, das die Felder selbst umschließt. Ich meine, für eine Organisation Zweck, das funktioniert großartig, aber was ist, wenn ich die verschiedenen Klassen ändern möchte, die für alle Eingabetypen innerhalb des Formulars festgelegt sind. Ich versuche, ein .js-Validierungs-Plugin zu implementieren, für das diese benutzerdefinierten Klassen für Beschriftungen, Text, Radio, Kontrollkästchen, Auswahl und alle Arten von Formulareingaben vorhanden sein müssen.

    – Adriano Monecchi

    13. April 2016 um 21:45 Uhr

Das Hinzufügen dieser Klasse scheint dynamisch vom Design oder einem Plugin hinzugefügt zu werden. Es ist schwierig, die Stammdatei für die Ursache des Hinzufügens dieser Klasse zu verfolgen.

Um die Klassen zu ändern, müssen Sie jQuery als letzten Ausweg verwenden. Und glücklicherweise gibt es IDs für jedes Feld, sodass Sie bestimmte Elemente auswählen und ihre Eigenschaften ändern können.

Hier ist ein Code, der Ihnen helfen könnte.

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

Der obige Code ändert die Klasse nur für ein div-Element. Verwenden, ändern und fügen Sie den anderen benötigten Code hinzu. Dieser Code sollte auf der Seite eingereiht werden, auf der die Änderungen wirksam werden sollen.

  • Ja, das ist wirklich der letzte Ausweg. Aber in diesem Fall ist es sehr einfach, dies auf die richtige Weise zu ändern.

    – Pelmered

    25. August 2015 um 18:03 Uhr

1371470cookie-checkWoocommerce: Hilfe beim Ersetzen der HTML-Ausgabe

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy