🚫 WooCommerce checkout index stör kunder: 4 sätt att ta bort verifiering

Varför postnummer-validering är en onödig barriär

WooCommerce kräver postnummerfältet som standard och validerar det. Men här är verkligheten: dussintals länder i Afrika, Centralamerika och Oceanien använder inte postnummer alls. En köpare från Kenya eller Jamaica skriver in slumpmässiga siffror, får ett felmeddelande och lämnar sidan.

Extra fält och felmeddelanden på kassasidan skadar konverteringen direkt. Enligt Baymard Institute har 17% av amerikanska köpare övergett en kassa just för att den var för lång eller komplicerad. Att ta bort ett eller två onödiga fält är det billigaste sättet att öka försäljningen utan en annonsbudget.

Nedan fyra sätt att inaktivera valideringen: från att helt ta bort fältet till att bara byta namn på det. Välj utifrån din målgrupp.

💡 Snabb översikt:

• Ta bort postnummerfältet helt via unset(), för butiker som inte behöver det alls
• Gör postnumret valfritt, för butiker med en blandad geografisk målgrupp
• Ta bort onödiga fält från faktureringsformuläret, om postnumret bara är en del av problemet
• Ändra fältetiketten till något användaren förstår, minimal åtgärd
• Överväg tillägg om du föredrar att inte röra kod

Metod 1: Ta bort postnummerfältet helt från kassan

Den mest radikala och renaste metoden. Hooken woocommerce_checkout_fields ger full kontroll över alla kassafält: ta arrayen, klipp bort billing_postcode och returnera den.

Lägg till koden i ditt barntemas functions.php:

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
}

Vad som händer här. Hooken woocommerce_checkout_fields tar emot hela kassafälts-arrayen: fakturering, leverans och order. Funktionen unset() klipper bort den specifika nyckeln billing_postcode ur billing-sektionen. Arrayen returneras till WooCommerce utan postnummerfältet, så det försvinner från både formuläret och valideringen.

Men om din målgrupp är blandad och vissa kunder faktiskt behöver ett postnummer, se metod 2.

Metod 2: Gör postnumret valfritt

Istället för att ta bort fältet kan du helt enkelt avmarkera obligatorisk-flaggan. Fältet finns kvar på sidan, men köparen kan hoppa över det utan ett felmeddelande.

Här använder vi filtret woocommerce_default_address_fields, som hanterar standardinställningar för alla adressfält:

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
}

Skillnaden mot den första metoden ligger i hooken. woocommerce_default_address_fields arbetar en nivå lägre: den sätter egenskaperna för själva fälten (etikett, platshållare, obligatorisk) innan de hamnar i fakturerings- och leveranssektionerna. Därför är nyckeln här helt enkelt postcode, utan prefixet billing_.

Passar för butiker som säljer till länder både med och utan postnummer.

Metod 3: Ta bort onödiga fält från faktureringsformuläret

Ofta är problemet bredare än bara postnumret. Fälten företag, address_2, ort och län behövs inte heller alltid: vart och ett lägger till friktion i kassan.

Samma hook woocommerce_checkout_fields tar bort vilket fält som helst via dess identifierare. Här är den fullständiga listan över tillgängliga nycklar för faktureringssektionen:

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

Namnen är självförklarande. Prefixet billing_ indikerar att fältet tillhör faktureringsformuläret. Till exempel, för att ta bort company och address_2 tillsammans med postnumret:

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
}

Flera unset()-anrop fungerar fint tillsammans i en och samma funktion: lista bara de nycklar du vill dölja.

Metod 4: Döp om ett fält till något användaren förstår

Minimal åtgärd med maximal effekt. Du rör inte valideringen, du ändrar bara den kryptiska etiketten "Postnummer" till något din målgrupp förstår. Till exempel "Stadsdel" eller "Postnummer (om du har ett)".

Vi använder gettext-hooken, samma som WordPress och WooCommerce använder för att översätta gränssnittet:

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
}

Om du vill döpa om flera fält lägger du till case i switchen:

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
}

I skärmbilden ovan ser du resultatet av att kombinera angreppssätt: flera fält är dolda, postnummerfältet har bytt namn till "Riktnummer" och gjorts frivilligt, rubrikerna för fakturerings- och leveransavsnitten har ersatts med egna. Kassan blev kortare och tydligare, helt utan tillägg.

Tillägg för att hantera kassafält

Om du inte vill röra functions.php finns det färdiga verktyg. Låt oss titta på två gratistillägg som löser problemet utan en enda rad kod.

Checkout field manager for WooCommerce

Checkout Field Manager, en av de mest populära redigerarna för kassafält. Det låter dig lägga till, ta bort och ändra ordning på fält i avsnitten Fakturering, Leverans och Övrigt, allt via ett visuellt gränssnitt.

Tillägget är gratis; grundversionen täcker de vanligaste scenarierna: dölj ett fält, gör det frivilligt, döp om det. För villkorslogik (visa ett fält bara för ett visst land) och ytterligare fälttyper finns en premiumversion.

Direct Checkout for WooCommerce

Direct Checkout for WooCommerce (hette tidigare "WooCommerce Direct Checkout") löser ett bredare problem: det förenklar hela kassaprocessen. Förutom att ta bort fält kan det: hoppa över varukorgen och ta kunden direkt till kassan, ändra texten på "Lägg i varukorg"-knappen, lägga till AJAX-baserad lägg-i-varukorg på produktsidor.

Båda tilläggen uppdateras regelbundet och är kompatibla med aktuella versioner av WordPress och WooCommerce.

⁉️🤔 Vanliga frågor

Kan jag inaktivera validering bara för vissa länder?

Ja. Du kan knyta kontrollen till WC()->customer->get_billing_country() inuti woocommerce_checkout_fields-filtret och bara tillämpa unset() eller required = false för listan med länder som saknar postnummer. På så sätt ser köpare från Tyskland eller USA fortfarande ett obligatoriskt fält, medan kunder från Kenya inte gör det.

Kan frakten sluta fungera efter att postnummervalideringen inaktiverats?

Det beror på frakttjänsten. Posttjänster som USPS eller Royal Mail använder postnumret för att beräkna priser; för dem är det bättre att behålla fältet som obligatoriskt eller åtminstone synligt. Om du säljer digitala varor eller använder budleverans inom en stad kan du tryggt ta bort postnumret. Testa kostnadsberäkningen för varje fraktzon efter att du gjort ändringar.

Koden fungerar inte, postnummerfältet är kvar. Vad är fel?

Tre vanliga orsaker. För det första: cache. Rensa webbplatsens och webbläsarens cache; öppna kassan i inkognitoläge efter att du redigerat functions.php. För det andra: ett annat tillägg eller tema skriver över fältet senare än ditt filter. Prova att höja hook-prioriteten: add_filter( 'woocommerce_checkout_fields', '...', 99 ). För det tredje: du redigerar fel functions.php. Koden måste ligga i det aktiva (child-)temats fil.

Hur tar jag bort postnummerfältet utan att redigera functions.php?

Installera Checkout field manager for WooCommerce; det låter dig inaktivera alla fält via adminpanelen. Eller använd tillägget Code Snippets: klistra in PHP-koden från metod 1 som ett snippet och aktivera det. Båda alternativen är säkrare än att direkt redigera functions.php och försvinner inte när temat uppdateras.

Vad händer om postnummervalideringen är inaktiverad, men WooCommerce fortfarande ger ett fel?

Troligtvis genereras felet inte av WooCommerce core utan av ett tredjepartstillägg, till exempel ett frakttjänsttillägg eller en adressvaliderare. Inaktivera frakt- och adressverifieringstillägg ett i taget för att hitta boven. Kontrollera också om validering är satt på JavaScript-nivå i temat; ibland dubblerar utvecklare kontrollen på frontend.

Ett praktiskt exempel från videon

Se ett live-exempel på konfiguration av kassafält, från kod till resultatet i frontend:

Kod eller tillägg: vilket ska du välja?

Om du bara behöver ta bort ett eller två fält och är bekväm med temaredigeraren räcker fyra rader PHP från metod 1 eller 2. Det är lättviktigt och lägger inte till extra kod på sajten.

Om du har många fält att konfigurera, ofta experimenterar med kassan eller föredrar att inte röra functions.php, välj Checkout Field Manager for WooCommerce. Det är gratis och ger dig visuell kontroll över alla fält utan risk att sajten kraschar på grund av ett stavfel i koden.

För heltäckande kassaoptimering (hoppa över varukorgen, AJAX-knappar, anpassade etiketter) täcker Direct Checkout for WooCommerce allt i ett enda tillägg.

Grundregeln: efter alla ändringar, kör en testorder från början till slut. Fem minuters testande sparar timmar av att reda ut klagomål från riktiga kunder.