🚫 WooCommerce-kassan indeksi häiritsee asiakkaita: 4 tapaa poistaa vahvistus

Miksi postinumeron validointi on turha este

WooCommerce vaatii postinumerokentän oletuksena ja validoi sen. Mutta tässä on todellisuus: kymmenet maat Afrikassa, Keski-Amerikassa ja Oseaniassa eivät käytä postinumeroita lainkaan. Kenialainen tai jamaikalainen ostaja syöttää satunnaisia numeroita, saa virheilmoituksen ja poistuu.

Ylimääräiset kentät ja virheet kassasivulla heikentävät konversiota suoraan. Baymard Instituten mukaan 17% yhdysvaltalaisista ostajista on hylännyt kassan nimenomaan siksi, että se oli liian pitkä tai monimutkainen. Yhden tai kahden turhan kentän poistaminen on halvin tapa kasvattaa myyntiä ilman mainosbudjettia.

Alla neljä tapaa poistaa validointi käytöstä: kentän täydellisestä poistamisesta sen pelkkään uudelleennimeämiseen. Valitse yleisösi perusteella.

💡 Pikakatsaus:

• Poista postinumerokenttä kokonaan unset()-funktiolla, verkkokaupoille jotka eivät tarvitse sitä lainkaan
• Tee postinumerosta valinnainen, verkkokaupoille joilla on maantieteellisesti sekalainen yleisö
• Poista turhat kentät laskutuslomakkeelta, jos postinumero on vain osa ongelmaa
• Muuta kentän nimiö sellaiseksi, jonka käyttäjä ymmärtää, minimaalinen toimenpide
• Harkitse lisäosia, jos et halua koskea koodiin

Tapa 1: Poista postinumerokenttä kokonaan kassalta

Radikaalein ja puhtain tapa. woocommerce_checkout_fields-koukku antaa täyden hallinnan kaikkiin kassan kenttiin: ota taulukko, leikkaa billing_postcode pois ja palauta se.

Lisää koodi lapsiteemasi functions.php-tiedostoon:

1
/**
2
 * Remove the postal code field (billing_postcode) from checkout.
3
 */
4
add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_postcode_checkout' );
5
function quadlayers_remove_billing_postcode_checkout( $fields ) {
6
    unset( $fields['billing']['billing_postcode'] );
7
    return $fields;
8
}

Mitä tässä tapahtuu. woocommerce_checkout_fields-koukku vastaanottaa koko kassakenttätaulukon: laskutus, toimitus ja tilaus. unset()-funktio leikkaa tietyn avaimen billing_postcode pois billing-osiosta. Taulukko palautetaan WooCommercelle ilman postinumerokenttää, joten se katoaa sekä lomakkeesta että validoinnista.

Mutta jos yleisösi on sekalainen ja jotkut asiakkaat tarvitsevat postinumeron, katso tapa 2.

Tapa 2: Tee postinumerosta valinnainen

Kentän poistamisen sijaan voit yksinkertaisesti poistaa pakollisuusmerkinnän. Kenttä pysyy sivulla, mutta ostaja voi ohittaa sen ilman virhettä.

Tässä käytämme woocommerce_default_address_fields-suodatinta, joka käsittelee kaikkien osoitekenttien oletusasetukset:

1
/**
2
 * Make the postal code field optional.
3
 */
4
add_filter( 'woocommerce_default_address_fields', 'quadlayers_optional_postcode_checkout' );
5
function quadlayers_optional_postcode_checkout( $p_fields ) {
6
    $p_fields['postcode']['required'] = false;
7
    return $p_fields;
8
}

Ero ensimmäiseen tapaan on koukussa. woocommerce_default_address_fields toimii yhtä tasoa alempana: se asettaa itse kenttien ominaisuudet (nimiö, paikkamerkkiteksti, pakollisuus) ennen kuin ne päätyvät laskutus- ja toimitusosioihin. Siksi avain on tässä yksinkertaisesti postcode, ilman billing_-etuliitettä.

Sopii verkkokaupoille, jotka myyvät maihin, joissa on postinumeroita, ja maihin, joissa niitä ei ole.

Tapa 3: Poista turhat kentät laskutuslomakkeelta

Usein ongelma on laajempi kuin pelkkä postinumero. Yritys-, osoite_2-, kaupunki- ja osavaltiokentät eivät myöskään ole aina tarpeen: jokainen niistä lisää kitkaa kassalle.

Sama woocommerce_checkout_fields-koukku poistaa minkä tahansa kentän sen tunnisteen perusteella. Tässä on täydellinen luettelo käytettävissä olevista avaimista laskutusosioon:

1
unset( $fields['billing']['billing_company'] );
2
unset( $fields['billing']['billing_address_2'] );
3
unset( $fields['billing']['billing_city'] );
4
unset( $fields['billing']['billing_state'] );
5
unset( $fields['billing']['billing_phone'] );

Nimet ovat itsestään selviä. billing_-etuliite osoittaa, että kenttä kuuluu laskutuslomakkeeseen. Esimerkiksi poistaaksesi company- ja address_2-kentät postinumeron ohella:

1
/**
2
 * Remove company, address_2 and postal code from checkout.
3
 */
4
add_filter( 'woocommerce_checkout_fields', 'quadlayers_remove_billing_fields' );
5
function quadlayers_remove_billing_fields( $fields ) {
6
    unset( $fields['billing']['billing_company'] );
7
    unset( $fields['billing']['billing_address_2'] );
8
    unset( $fields['billing']['billing_postcode'] );
9
    return $fields;
10
}

Useampi unset()-kutsu elää rauhassa rinnakkain saman funktion sisällä: listaat vain ne avaimet, jotka haluat piilottaa.

Tapa 4: Nimeä kenttä uudelleen joksikin, mitä käyttäjä ymmärtää

Minimaalinen toimenpide, maksimaalinen vaikutus. Et koske validointiin, vaan muutat vain kryptisen "Postinumero / ZIP" -otsikon joksikin, mitä yleisösi ymmärtää. Esimerkiksi "Kaupunginosa" tai "Postinumero (jos sinulla on)".

Käytämme gettext-koukkua, samaa jota WordPress ja WooCommerce käyttävät käyttöliittymän kääntämiseen:

1
/**
2
 * Change checkout field labels via gettext.
3
 */
4
add_filter( 'gettext', 'quadlayers_billing_field_strings', 20, 3 );
5
function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
6
    switch ( $translated_text ) {
7
        case 'Postcode / ZIP':
8
            $translated_text = __( 'Area code', 'woocommerce' );
9
            break;
10
    }
11
    return $translated_text;
12
}

Jos haluat nimetä useita kenttiä uudelleen, lisää case-tapauksia switchin sisään:

1
function quadlayers_billing_field_strings( $translated_text, $text, $domain ) {
2
    switch ( $translated_text ) {
3
        case 'Billing details':
4
            $translated_text = __( 'Order information', 'woocommerce' );
5
            break;
6
        case 'Ship to a different address?':
7
            $translated_text = __( 'Send to other location please', 'woocommerce' );
8
            break;
9
        case 'Company name':
10
            $translated_text = __( 'Company', 'woocommerce' );
11
            break;
12
        case 'Postcode / ZIP':
13
            $translated_text = __( 'Area code', 'woocommerce' );
14
            break;
15
    }
16
    return $translated_text;
17
}

Yllä olevassa kuvakaappauksessa on tulos, kun lähestymistapoja yhdistellään: useita kenttiä on piilotettu, postinumerokenttä on nimetty uudelleen "Suuntanumeroksi" ja tehty valinnaiseksi, laskutus- ja toimitusosioiden otsikot on korvattu omilla. Kassasivusta tuli lyhyempi ja selkeämpi ilman lisäosia.

Lisäosat kassakenttien hallintaan

Jos et halua koskea functions.php-tiedostoon, on olemassa valmiita työkaluja. Katsotaan kahta ilmaista lisäosaa, jotka ratkaisevat ongelman ilman yhtäkään koodiriviä.

Checkout field manager for WooCommerce

Checkout Field Manager on yksi suosituimmista kassakenttäeditorista. Sen avulla voit lisätä, poistaa ja järjestellä kenttiä Laskutus-, Toimitus- ja Lisätiedot-osioissa visuaalisen käyttöliittymän kautta.

Lisäosa on ilmainen; perusversio kattaa tärkeimmät skenaariot: kentän piilottamisen, valinnaiseksi tekemisen ja uudelleennimeämisen. Ehdollista logiikkaa (näytä kenttä vain tietylle maalle) ja lisäkenttätyyppejä varten on maksullinen versio.

Direct Checkout for WooCommerce

Direct Checkout for WooCommerce (aiemmin nimeltään "WooCommerce Direct Checkout") ratkaisee laajemman ongelman: se yksinkertaistaa koko kassaprosessin. Kenttien poistamisen lisäksi se voi: ohittaa ostoskorin ja viedä asiakkaan suoraan kassalle, muuttaa "Lisää ostoskoriin" -painikkeen tekstiä ja lisätä AJAX-lisäyksen ostoskoriin tuotesivuilla.

Molemmat lisäosat päivitetään säännöllisesti ja ne ovat yhteensopivia WordPressin ja WooCommercen nykyisten versioiden kanssa.

⁉️🤔 Usein kysytyt kysymykset

Voinko poistaa validoinnin käytöstä vain tietyille maille?

Kyllä. Voit sitoa tarkistuksen WC()->customer->get_billing_country()-kutsuun woocommerce_checkout_fields-suodattimen sisällä ja käyttää unset()-funktiota tai required = false -asetusta vain niiden maiden listalle, joissa ei ole postinumeroita. Näin ostajat Saksasta tai Yhdysvalloista näkevät edelleen pakollisen kentän, kun taas asiakkaat Keniasta eivät.

Rikkoutuuko toimitus, jos postinumeron validointi poistetaan käytöstä?

Riippuu toimitustavasta. Postipalvelut, kuten USPS tai Royal Mail, käyttävät postinumeroa hintojen laskentaan; niille on parempi pitää kenttä pakollisena tai ainakin näkyvissä. Jos myyt digitaalisia tuotteita tai käytät kuriiritoimitusta kaupungin sisällä, voit turvallisesti poistaa postinumeron. Testaa kustannuslaskenta jokaiselle toimitusvyöhykkeelle muutosten tekemisen jälkeen.

Koodi ei toimi; postinumerokenttä on edelleen siellä. Mikä on vialla?

Kolme yleistä syytä. Ensimmäinen: välimuisti. Tyhjennä sivustosi ja selaimesi välimuisti; functions.php-tiedoston muokkaamisen jälkeen avaa kassa incognito-tilassa. Toinen: toinen lisäosa tai teema ohittaa kentän myöhemmin kuin suodattimesi. Kokeile nostaa koukun prioriteettia: add_filter( 'woocommerce_checkout_fields', '...', 99 ). Kolmas: muokkaat väärää functions.php-tiedostoa. Koodin on oltava aktiivisen (lapsi)teeman tiedostossa.

Miten poistan postinumerokentän muokkaamatta functions.php-tiedostoa?

Asenna Checkout field manager for WooCommerce; sen avulla voit poistaa minkä tahansa kentän käytöstä hallintapaneelin kautta. Tai käytä Code Snippets -lisäosaa: liitä tavan 1 PHP-koodi pätkänä ja aktivoi se. Molemmat vaihtoehdot ovat turvallisempia kuin functions.php-tiedoston suora muokkaaminen, eivätkä ne katoa teeman päivittyessä.

Entä jos postinumeron validointi on poistettu käytöstä, mutta WooCommerce antaa silti virheen?

Todennäköisesti virhettä ei tuota WooCommercen ydin, vaan kolmannen osapuolen lisäosa, kuten toimitustapalisäosa tai osoitteen validointityökalu. Poista toimitus- ja osoitteenvarmennuslisäosat yksi kerrallaan löytääksesi syyllisen. Tarkista myös, onko validointi asetettu JavaScript-tasolla teemassa; joskus kehittäjät kopioivat tarkistuksen frontendiin.

Käytännön esimerkki videolta

Katso live-esimerkki kassakenttien määrityksestä koodista frontendin lopputulokseen:

Koodi vai lisäosa: kumpi kannattaa valita?

Jos haluat poistaa vain yhden tai kaksi kenttää ja teemaeditorin käyttö on sinulle tuttua, neljä riviä PHP:tä menetelmästä 1 tai 2 riittää. Se on kevyt ratkaisu eikä lisää ylimääräistä koodia sivustolle.

Jos sinulla on paljon kenttiä muokattavana, testailet kassasivua usein tai et halua koskea functions.php-tiedostoon, valitse Checkout Field Manager for WooCommerce. Se on ilmainen ja antaa visuaalisen hallinnan kaikkiin kenttiin ilman riskiä, että koko sivusto hajoaa kirjoitusvirheeseen koodissa.

Jos tavoitteena on kattava kassan optimointi (ostoskorin ohittaminen, AJAX-painikkeet, mukautetut tekstit), Direct Checkout for WooCommerce hoitaa kaiken yhdellä lisäosalla.

Kultainen sääntö: tee muutosten jälkeen aina testitilaus alusta loppuun. Viisi minuuttia testausta säästää tunneilta todellisten asiakkaiden valitusten selvittelyä.