WooCommerce: HTML-Struktur der Abrechnungsfelder im Checkout ändern

Lesezeit: 2 Minuten

Ich möchte Floating-Labels für die Abrechnungsfelder verwenden. Daher muss ich die platzieren <label> Element nach dem <input> Feld in der HTML-Struktur.

Momentan sieht meine Struktur so aus:

<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
    <label for="billing_first_name" class="">First Name&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name">
    </span>
</p>

Ich möchte das Label nach dem input/span-Element wie folgt:

<p class="form-row form-row-first validate-required" id="billing_first_name_field" data-priority="10">
    <span class="woocommerce-input-wrapper">
        <input type="text" class="input-text form-control" name="billing_first_name" id="billing_first_name" placeholder="" value="First Name" autocomplete="given-name">
    </span>
    <label for="billing_first_name" class="">First Name&nbsp;<abbr class="required" title="required">*</abbr></label>
</p>

Gibt es eine Möglichkeit, die Ausgabe der Felder zu ändern?

Ich habe einige Haken gefunden, um einige Elemente der Felder zu ändern: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

Aber das ist alles, was den Inhalt der Elemente betrifft. Nicht die HTML-Struktur selbst. Ist das überhaupt möglich?

$field enthält das komplette <p>...</p> Ausgang. So können Sie die Ausgabe vollständig anpassen. Um es dynamisch zu halten, können Sie die Werte von verwenden $args


Sehen: https://github.com/woocommerce/woocommerce/blob/master/includes/wc-template-functions.php#L2830 und begleitenden Code, wie man das macht

function change_woocommerce_field_markup($field, $key, $args, $value) {
    if( $key === 'billing_first_name') {
        $field = 'my html';
    }
    return $field;
} 

add_filter("woocommerce_form_field_text","change_woocommerce_field_markup", 10, 4);

963240cookie-checkWooCommerce: HTML-Struktur der Abrechnungsfelder im Checkout ändern

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

Privacy policy