🚫 Indeks w kasie WooCommerce przeszkadza kupującym: 4 sposoby na usunięcie weryfikacji

Dlaczego walidacja kodu pocztowego to zbędna bariera

WooCommerce domyślnie wymaga wypełnienia pola kodu pocztowego i go waliduje. Rzeczywistość jest jednak taka: dziesiątki krajów Afryki, Ameryki Środkowej i Oceanii w ogóle nie używają kodów pocztowych. Klient z Kenii czy Jamajki wpisuje przypadkowe cyfry, otrzymuje błąd i odchodzi.

Zbędne pola i błędy na stronie składania zamówienia bezpośrednio uderzają w konwersję. Według danych Baymard Institute, 17% kupujących z USA porzucało checkout właśnie z powodu zbyt długiego lub skomplikowanego procesu. Usunięcie jednego czy dwóch niepotrzebnych pól to najtańszy sposób na zwiększenie sprzedaży bez budżetu reklamowego.

Poniżej przedstawiam cztery sposoby wyłączenia walidacji: od całkowitego usunięcia pola po prostą zmianę jego nazwy. Proszę wybrać odpowiedni dla swojej grupy odbiorców.

💡 Szybki przegląd:

• Całkowicie usuwamy pole kodu pocztowego przez unset(), dla sklepów, które w ogóle go nie potrzebują
• Czynimy kod pocztowy nieobowiązkowym, dla sklepów o mieszanej geografii klientów
• Usuwamy zbędne pola z formularza adresu rozliczeniowego, jeśli kod pocztowy to tylko część problemu
• Zmieniamy nazwę pola na zrozumiałą dla użytkownika, minimalna ingerencja
• Rozważamy wtyczki, jeśli nie chcą Państwo dotykać kodu

Sposób 1: Całkowicie usunąć pole kodu pocztowego z checkoutu

Najbardziej radykalna i najczystsza metoda. Hook woocommerce_checkout_fields daje pełną kontrolę nad wszystkimi polami checkoutu: pobieramy tablicę, wycinamy billing_postcode i zwracamy z powrotem.

Kod dodaje się do functions.php motywu potomnego:

1
/**
2
 * Прибираємо поле поштового індексу (billing_postcode) з чекауту.
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
}

Co tu się dzieje. Hook woocommerce_checkout_fields otrzymuje całą tablicę pól checkoutu: billingowe, wysyłkowe i zamówienia. Funkcja unset() wycina z sekcji billing konkretny klucz billing_postcode. Tablica jest zwracana do WooCommerce już bez pola kodu pocztowego, które znika zarówno z formularza, jak i z walidacji.

Jeśli jednak Państwa grupa odbiorców jest mieszana i ktoś jednak potrzebuje kodu pocztowego, proszę spojrzeć na sposób 2.

Sposób 2: Uczynić kod pocztowy nieobowiązkowym

Zamiast usuwać pole, można po prostu zdjąć z niego flagę obowiązkowości. Pole pozostaje na stronie, ale kupujący może je spokojnie pominąć bez błędu.

Tutaj używamy filtra woocommerce_default_address_fields, który odpowiada za domyślne ustawienia wszystkich pól adresowych:

1
/**
2
 * Робимо поле поштового індексу необов'язковим.
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
}

Różnica w stosunku do pierwszego sposobu leży w hooku. woocommerce_default_address_fields działa poziom niżej: ustawia właściwości samych pól (label, placeholder, required), zanim trafią one do sekcji billingowej i wysyłkowej. Dlatego klucz to tutaj po prostu postcode, bez prefiksu billing_.

Pasuje do sklepów, które sprzedają zarówno do krajów z kodami pocztowymi, jak i bez nich.

Sposób 3: Usunąć zbędne pola z formularza adresu rozliczeniowego

Często problem jest szerszy niż jeden kod pocztowy. Pola company, address_2, a także city i state też nie zawsze są potrzebne: każde z nich dodaje tarcia w checkoucie.

Ten sam hook woocommerce_checkout_fields usuwa dowolne pole po jego identyfikatorze. Oto pełna lista dostępnych kluczy dla sekcji billingowej:

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'] );

Nazwy są oczywiste. Prefiks billing_ wskazuje, że pole należy do formularza adresu rozliczeniowego. Na przykład, aby usunąć company i address_2 razem z kodem pocztowym:

1
/**
2
 * Прибираємо company, address_2 та postal code з чекауту.
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
}

Wewnątrz jednej funkcji spokojnie współistnieje kilka unset(), po prostu wymienia Pan/Pani klucze, które chce ukryć.

Sposób 4: Zmiana nazwy pola na zrozumiałą dla użytkownika

Minimalna ingerencja z maksymalnym efektem. Nie dotyka Pan/Pani walidacji, po prostu zmienia tajemniczy napis „Postcode / ZIP" na coś zrozumiałego dla Pana/Pani odbiorców. Na przykład „Dzielnica" lub „Kod pocztowy (jeśli dotyczy)".

Używamy haka gettext, tego samego, przez który WordPress i WooCommerce tłumaczą interfejs:

1
/**
2
 * Змінюємо назви полів чекауту через 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
}

Jeśli chce Pan/Pani zmienić nazwę kilku pól, dodaje Pan/Pani case-y do środka switch:

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
}

Na zrzucie ekranu powyżej widać rezultat kombinacji podejść: kilka pól zostało ukrytych, pole kodu pocztowego zmieniło nazwę na „Area code" i stało się nieobowiązkowe, nagłówki sekcji billing i shipping zostały zastąpione własnymi. Checkout stał się krótszy i bardziej zrozumiały bez wtyczek.

Wtyczki do zarządzania polami checkoutu

Jeśli nie chce Pan/Pani wchodzić w functions.php, są gotowe narzędzia. Rozważmy dwie bezpłatne wtyczki, które rozwiązują zadanie bez ani jednej linii kodu.

Checkout Field Manager for WooCommerce

Checkout Field Manager, jeden z najpopularniejszych edytorów pól checkoutu. Pozwala dodawać, usuwać i zmieniać kolejność pól w sekcjach Billing, Shipping i Additional, wszystko przez interfejs wizualny.

Wtyczka jest bezpłatna, wersja podstawowa pokrywa główne scenariusze: ukrycie pola, uczynienie go nieobowiązkowym, zmianę nazwy. Dla logiki warunkowej (pokazanie pola tylko dla określonego kraju) i dodatkowych typów pól dostępna jest wersja premium.

Direct Checkout for WooCommerce

Direct Checkout for WooCommerce (wcześniej nazywała się „WooCommerce Direct Checkout") rozwiązuje szersze zadanie, upraszcza cały proces składania zamówienia. Oprócz usuwania pól potrafi: pomijać koszyk i prowadzić od razu do checkoutu, zmieniać tekst przycisku „Add to cart", dodawać AJAX-owe dodawanie do koszyka na stronach produktów.

Obie wtyczki są regularnie aktualizowane i kompatybilne z aktualnymi wersjami WordPress i WooCommerce.

⁉️🤔 Często zadawane pytania

Czy można wyłączyć walidację tylko dla określonych krajów?

Tak. Może Pan/Pani podpiąć sprawdzenie WC()->customer->get_billing_country() wewnątrz filtra woocommerce_checkout_fields i stosować unset() lub required = false tylko dla listy krajów bez kodów pocztowych. Dzięki temu kupujący z Niemiec czy USA nadal będą widzieć pole obowiązkowe, a klienci z Kenii, nie.

Czy wysyłka się zepsuje po wyłączeniu walidacji kodu pocztowego?

Zależy od firmy kurierskiej. Serwisy pocztowe takie jak USPS czy Royal Mail używają kodu pocztowego do kalkulacji stawek, dla nich lepiej pozostawić pole obowiązkowe lub przynajmniej widoczne. Jeśli sprzedaje Pan/Pani towary cyfrowe lub pracuje z dostawą kurierską na terenie miasta, kod pocztowy można spokojnie usunąć. Proszę przetestować kalkulację kosztu dla każdej strefy dostawy po zmianach.

Kod nie działa, pole kodu pocztowego pozostało na swoim miejscu. O co chodzi?

Trzy częste przyczyny. Pierwsza: cache, proszę wyczyścić cache strony i przeglądarki, po edycji functions.php otworzyć checkout w trybie incognito. Druga: inna wtyczka lub motyw nadpisuje pole później niż Pana/Pani filtr, proszę spróbować zwiększyć priorytet haka: add_filter( 'woocommerce_checkout_fields', '...', 99 ). Trzecia: edytuje Pan/Pani nie ten functions.php, kod musi być w pliku aktywnego (potomnego) motywu.

Jak usunąć pole kodu pocztowego bez edycji functions.php?

Proszę zainstalować Checkout Field Manager for WooCommerce, pozwala on wyłączać dowolne pola przez panel administracyjny. Albo użyć wtyczki Code Snippets: proszę wkleić kod PHP ze sposobu 1 jako snippet i go aktywować. Obie opcje są bezpieczniejsze niż bezpośrednia edycja functions.php i nie znikają podczas aktualizacji motywu.

Co zrobić, jeśli walidacja kodu pocztowego jest wyłączona, ale WooCommerce i tak wyświetla błąd?

Najprawdopodobniej błąd generuje nie rdzeń WooCommerce, a zewnętrzna wtyczka, na przykład wtyczka firmy kurierskiej lub walidator adresów. Proszę wyłączać wtyczki dostawy i weryfikacji adresu po kolei i znaleźć winowajcę. Proszę również sprawdzić, czy walidacja nie jest zdefiniowana na poziomie JavaScript w motywie, czasami deweloperzy dublują sprawdzenie na froncie.

Praktyczny przykład z wideo

Proszę zobaczyć żywy przykład konfiguracji pól checkoutu, od kodu do rezultatu na froncie:

Co wybrać: kod czy wtyczkę?

Jeśli potrzebują Państwo po prostu usunąć jedno-dwa pola i nie obawiają się edytora motywu, cztery linijki PHP ze sposobu 1 lub 2 w zupełności wystarczą. To lekkie rozwiązanie i nie dodaje zbędnego kodu do witryny.

Jeśli pól do skonfigurowania jest dużo, często eksperymentują Państwo z checkoutem lub nie chcą dotykać pliku functions.php, proszę sięgnąć po Checkout Field Manager for WooCommerce. Jest darmowy i daje wizualną kontrolę nad wszystkimi polami bez ryzyka zawieszenia witryny przez literówkę w kodzie.

Do kompleksowej optymalizacji checkoutu (pominięcie koszyka, przyciski AJAX, niestandardowe etykiety) Direct Checkout for WooCommerce zamyka wszystko w jednej wtyczce.

Główna zasada: po każdej zmianie proszę przeprowadzić zamówienie testowe od początku do końca. Pięć minut testów oszczędza godziny rozpatrywania skarg od prawdziwych klientów.