Juhend: WooCommerce’i kassaväljade kohandamine koodi järgi

Viimati uuendatud nov. 11, 2022

Sisu

Kassaväljade filter

Vaikeväljade muutmine

Vaikeväljade eemaldamine

Väljade ümberjärjestamine

Kohandatud väljade lisamine kassasse

1 meetod: kohandatud välja lisamine arveldus- või kohaletoimetamisse kassafiltri abil

2 meetod: kohandatud välja lisamine toimingute abil

Sellest postitusest saate teada, kuidas WooCommerce’is vaikimisi kassavälju muuta, eemaldada või ümber paigutada ning kuidas lisada oma kohandatud välja.

Kassaväljade filter

WooCommerce pakub filtrit kõikide kassaväljade jaoks: woocommerce_checkout_fields. Arveldus- ja tarneväljade jaoks on ka spetsiaalsed filtrid; woocommerce_billing_fieldsja woocommerce_shipping_fieldsneed mõlemad satuvad ülalmainitud esimesse filtrisse.

Väljad woocommerce_checkout_fieldson struktureeritud mitmemõõtmelises massiivis järgmiselt:

billing
- billing_first_name
- billing_last_name
- billing_company
- billing_address_1
- billing_address_2
- billing_city
- billing_postcode
- billing_country
- billing_state
- billing_email
- billing_phone
order
- order_comments
shipping
- shipping_first_name
- shipping_last_name
- shipping_company
- shipping_address_1
- shipping_address_2
- shipping_city
- shipping_postcode
- shipping_country
- shipping_state
account
- account_username
- account_password
- account_password-2

Iga väli on massiiv, mis sisaldab järgmisi sätteid (kõik väljad ei sisalda kõiki atribuute):

label: välja nähtav silt kassas
placeholder: sisendi kohatäide
type: määrab välja tüübi. Kui seda pole määratud, on see vaikimisi tekstisisestus, muidu võib see olla select, tel, email, textareajne.
required: tõeväärtus, olenemata sellest, kas väli on kohustuslik või mitte
class: klassid, mida rakendatakse välja ümbriselemendile. Pidage meeles, et see on massiiv.
priority: täisarv, mis teavitab WooCommerce’i välja tellimusest

Mõnel väljal on täiendavad atribuudid, mis on teatud väljade jaoks ainulaadselt kohandatud ja mis tavaliselt ei pea mõtlema.

Vaikeväljade muutmine

Lisades filtri woocommerce_checkout_fieldsja vaadates ülaltoodud ülevaadet, peaks olema üsna lihtne mõista, kuidas olemasolevaid välju muuta.

Siin on näide telefoniväljal siltide muutmise kohta.

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['label'] = __('Mobile phone', 'textdomain');
    return $fields;
});

Või äkki soovite muuta nõutavat atribuuti, muutes välja valikuliseks (või vastupidi)?

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['required'] = false;
    return $fields;
});

Kui aga soovid aadressivälju redigeerida (kehtib eelkõige _address_1, _postcodeja _city) puhul, võib tekkida vajadus kasutada teistsugust filtrit; nimelt woocommerce_default_address_fields. Selle filtri argumendina pole massiivi enam struktureeritud arveldus- ja tarnevõtmetega ning väljavõtmetel puuduvad eesliitega ” billing_" või ” shipping_” osad. Aadress 1 on näiteks selles filtris võtme all address_1.

Siin on näide sihtnumbri sildi muutmisest:

add_filter('woocommerce_default_address_fields', function($address_fields) {
    $address_fields['postcode']['label'] = __('Postcode', 'textdomain');
    return $address_fields;
});

Vaikeväljade eemaldamine

Vaikeväljade eemaldamine on lihtne, kasutades filtris PHP unset()massiivi funktsiooni. woocommerce_checkout_fieldsNäiteks:

add_filter('woocommerce_checkout_fields', function($fields) {
    unset($fields['billing']['billing_city']);
    return $fields;
});

Väljade ümberjärjestamine

Väljade ümberjärjestamine toimub väljade atribuuti muutes priority. See atribuut lisati hiljuti (WooCommerce 3+) ja muutis järjestuse muutmise palju lihtsamaks kui varem, kui tuli massiivi ümber korraldada.

Mida väiksem number, seda kõrgemale see tuleb. Iga välja prioriteet annab teatud tegevusruumi väljade liigutamiseks nende vahel, näiteks eesnimi algab 10-st, perekonnanimi 20-st ja ettevõte 30-st. Kui soovite välja perekonnanime järel ja ettevõtte ees, võite seada prioriteediks 25.

Näide telefonivälja teisaldamisest enne aadressi:

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['priority'] = 35;
    return $fields;
});

Siin kehtib sama aadressiväljade erijuhtum, nagu varem mainitud. Kui soovite muuta näiteks linna prioriteeti, kasutage filtrit woocommerce_default_address_fields.

add_filter('woocommerce_default_address_fields', function($address_fields) {  
    $address_fields['city']['priority'] = 45;
    return $address_fields;
});

Märkus. WooCommerce alistab sageli sõltuvalt riigist sihtnumbri välja prioriteedi (määrates selle väärtusele 65).

Kohandatud väljade lisamine kassasse

Kohandatud väljade lisamiseks on kaks võimalust; saate filtri kaudu lisada kohandatud välja kas arveldus- või woocommerce_checkout_fieldstarnemassiivile ning WooCommerce tegeleb kõigega selle töötlemise ja tellimusele salvestamise kohta. Teise võimalusena võite välja lisamiseks kasutada kassas toiminguid (näiteks woocommerce_after_order_notes), kuid sel juhul peate selle töötlemiseks ja käsitsi salvestamiseks koodi kirjutama.

1 meetod: kohandatud välja lisamine arveldus- või kohaletoimetamisse kassafiltri abil

Lihtne meetod on kasutada sama filtrit, mida oleme kogu aeg kasutanud; woocommerce_checkout_fieldsja lisage lihtsalt uus massiivi element.

WooCommerce’i dokumentatsioon seda selgelt ei selgita, kuid see meetod töötab ainult väljade lisamiseks väljadele "arveldamine" või "saatmine". Samuti peab teie võtme/välja nime ees olema vastav vanemvõti; näiteks välja ‘ my_custom_input‘ lisamiseks arveldusmassiivile tuleb sellele panna nimi ‘ billing_my_custom_input‘. Vastasel juhul ei salvesta WooCommerce teie välja.

Siin on näide mittevajaliku kohandatud valiku/rippmenüü lisamisest arveldamiseks, mis asub vahetult enne telefoninumbrit. Määrates ‘ type‘ väärtuseks select‘ ja pakkudes atribuudi ‘ ‘ valikute jaoks massiivi, optionsteete valitud sisendi.

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_my_custom_select'] = [
        'label' => __('My custom select', 'textdomain'),
        'required' => false,
        'type' => 'select',
        'options' => [
            '' => __('Choose which you prefer', 'textdomain'),
            'dogs' => __('Dogs are best', 'textdomain'),
            'cats' => __('I prefer cats', 'textdomain')
        ],
        'class' => ['form-row-wide'],
        'priority' => 85
    ];
    return $fields;
});

WooCommerce töötleb ja salvestab selle välja automaatselt kassaväljade osana.

Tellimuse administraatoris pole automaatset võimalust oma välja nähtavaks teha. Saate toimingu külge haakida woocommerce_admin_order_data_after_billing_addressja käsitsi hankida metavälja, kasutades toimingu argumendina esitatud tellimuse objekti tellimuse ID-d. Pidage meeles, et väärtus salvestatakse post-meta, mille ees on "_". Ülaltoodud näites salvestatakse väli _billing_my_custom_selectandmebaasi nimega " ".

add_action('woocommerce_admin_order_data_after_billing_address', function($order) {
    $my_value = get_post_meta($order->id, '_billing_my_custom_select', true);
    if (!empty($my_value)) {
        echo '<p><strong>'. __('My custom select', 'textdomain'). ':</strong> '. $my_value. '</p>';
    }
});

2 meetod: kohandatud välja lisamine toimingute abil

Kui teil tekib ülaltoodud meetodiga probleeme või soovite oma välja teistmoodi positsioneerida, soovitan seda meetodit kasutada. See on natuke rohkem koodi, kuid teil on suurem kontroll. Mina isiklikult eelistan seda meetodit.

Esimene samm on valida kassas toiming, kuhu soovite oma välja lisada. See on lihtsalt eelistuse küsimus, kus soovite oma välja kuvada. Heitke pilk /woocommerce/templates/checkout/mallifailidele; nt või. form-checkout.php_ Oma näites olen valinud toimingu, mis kuvatakse tellimuse märkuste järel.form-billing.php``form-shipping.php``woocommerce_after_order_notes``form-shipping.php

Kasutate funktsiooni woocommerce_form_field ja pakute samad omadused, mida nägite woocommerce_checkout_fieldsfiltris (vt ülal). Soovi korral saate oma kohandatud väljale lisada HTML-i, nagu olen teinud. Siin on näide kohandatud välja lisamisest liikme ID sisestamiseks:

add_action('woocommerce_after_order_notes', function($checkout) {
    echo '<div id="my_custom_checkout_field"><h3>'. __('Members', 'textdomain'). '</h3>';
 
    woocommerce_form_field('member_id', [
        'type' => 'text',
        'class' => ['form-row-wide'],
        'label' => __('Member ID', 'textdomain'),
    ], $checkout->get_value('member_id'));
 
    echo '</div>';
});

Väli peaks nüüd kassasse ilmuma.

Teie välja kinnitamine on valikuline. Lisasin valideerimise näite, et tagada kehtiv liikme ID esitamine, kontrollides selle pikkust. Kasutage kinnitamiseks konksu woocommerce_checkout_processja kui teil on vaja tõrketeadet tagastada ja ostuprotsess peatada, kasutage wc_add_notice().

add_action('woocommerce_checkout_process', function() {
    if (!empty($_POST['member_id'])) {
        $given_member_id = $_POST['member_id'];
        if (strlen($given_member_id) < 5 || strlen($given_member_id) > 10) {
            wc_add_notice(__('Invalid member ID', 'textdomain'), 'error');
        }
    }
});

Järgmine samm on tegelikult välja väärtuse salvestamine alati, kui keegi tellimuse esitab. Selleks kasutame toimingut woocommerce_checkout_update_order_metaja salvestame välja lihtsalt tellimuse ID postituse metana (mis antakse toimingu parameetrina), hankides väärtuse alates $_POST.

add_action('woocommerce_checkout_update_order_meta', function($order_id) {
    if (!empty($_POST['member_id'])) {
        update_post_meta($order_id, 'member_id', sanitize_text_field($_POST['member_id']));
    }
}

Teie kohandatud väli tuleks nüüd tellimuste hulka salvestada.

Kui soovite välja kuvada järjekorras admin, lisage sama kood, mis meetodis 1. Lisan selle uuesti siia, kohandades selle näite välja nimega:

add_action('woocommerce_admin_order_data_after_billing_address', function($order) {
    $member_id = get_post_meta($order->id, 'member_id', true);
    if (!empty($member_id)) {
        echo '<p><strong>'. __('Member ID', 'textdomain'). ':</strong> '. $member_id. '</p>';
    }
});

: awhitepixel.com