Guide: Anpassa WooCommerce kassafält efter kod

I det här inlägget kommer du att lära dig hur du ändrar, tar bort eller omplacerar standardutcheckningsfält i WooCommerce och hur du lägger till ditt eget anpassade fält.

Utcheckningsfälten filtrerar

WooCommerce erbjuder ett filter för alla kassafält: woocommerce_checkout_fields. Det finns också dedikerade filter för fakturerings- och fraktfält; woocommerce_billing_fieldsoch woocommerce_shipping_fieldsmen de hamnar båda i det ovan nämnda första filtret.

Fälten i woocommerce_checkout_fieldsär strukturerade i en flerdimensionell array så här:

• 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

Varje fält är en array som innehåller följande inställningar (alla fält innehåller inte alla egenskaper):

• label: Fältets synliga etikett i kassan
• placeholder: Ingångens platshållare
• type: Definierar fälttypen. Om det inte är inställt, är det standardinställning för textinmatning, annars kan det vara select, tel, email, textarea, etc.
• required: Ett booleskt värde oavsett om fältet är obligatoriskt eller inte
• class: Klasser som appliceras på fältets omslagselement. Tänk på att detta är en array.
• priority: Heltal som informerar WooCommerce om fältets ordning

Vissa fält har ytterligare egenskaper som är unikt anpassade för vissa fält, och vanligtvis inte något du behöver tänka på.

Ändra standardfält

Genom att lägga till ett filter i woocommerce_checkout_fieldsoch titta på översikten ovan borde det vara ganska lätt att förstå hur man ändrar de befintliga fälten.

Här är ett exempel på hur du ändrar etiketten i telefonfältet:

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

Eller kanske du vill ändra den nödvändiga egenskapen och göra fältet valfritt (eller vice versa)?

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

Men om du vill redigera adressfälten (gäller särskilt _address_1, _postcodeoch _city) kan du behöva använda ett annat filter; nämligen woocommerce_default_address_fields. Som argument för detta filter är arrayen inte längre strukturerad med fakturerings- och fraktnycklar, och fältnycklarna saknar prefixet " billing_" eller " shipping_". Adress 1 finns till exempel i detta filter under nyckeln address_1.

Här är ett exempel på att byta postnummeretikett:

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

Tar bort standardfält

Att ta bort standardfält görs enkelt genom att använda PHP:s unset()arrayfunktion i woocommerce_checkout_fieldsfiltret. Till exempel:

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

Omordning av fält

Omordning av fält görs genom att ändra egenskapen prioritypå fälten. Den här egenskapen lades nyligen till (WooCommerce 3+) och gjorde ombeställning mycket enklare än tidigare där du var tvungen att ordna om arrayen.

Ju lägre siffra, desto högre upp kommer den. Varje fälts prioritet ger ett visst spelrum för att flytta fält däremellan, till exempel börjar förnamn på 10, efternamn på 20, och företag vid 30. Om du ville ha ett fält efter efternamn och före företag, kan du sätta prioritet på 25.

Exempel på flyttande telefonfält före adress:

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

Samma specialfall för adressfält som nämnts tidigare gäller även här. Om du vill ändra till exempel stadens prioritet, använd filtret woocommerce_default_address_fields.

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

Obs: WooCommerce kommer ofta att åsidosätta prioritet i postnummerfältet (ställ det till 65) beroende på land.

Lägger till anpassade fält till kassan

Du har två alternativ för att lägga till anpassade fält; du kan antingen lägga till ett anpassat fält till antingen fakturerings- eller fraktarrayen genom woocommerce_checkout_fieldsfiltret, och WooCommerce kommer att hantera allt om bearbetning och spara det i beställningen. Alternativt kan du använda åtgärder i kassan (till exempel woocommerce_after_order_notes) för att lägga till ett fält, men i det här fallet måste du skriva kod för att bearbeta och spara den manuellt.

Metod 1: Lägga till anpassat fält till fakturering eller frakt med hjälp av kassafilter

Den enkla metoden är att använda samma filter som vi har använt hela tiden; woocommerce_checkout_fieldsoch lägg helt enkelt till ett nytt arrayelement.

WooCommerces dokumentation gör inte detta tydligt, men den här metoden fungerar bara för att lägga till fält till "fakturering" eller "frakt". Dessutom måste din nyckel/namn på fältet föregås med motsvarande överordnade nyckel; till exempel för att lägga till ett fält ‘ my_custom_input‘ till faktureringsmatrisen, måste det heta ‘ billing_my_custom_input‘. Annars kommer WooCommerce inte att spara ditt fält.

Här är ett exempel på att lägga till en icke-obligatorisk anpassad val/rullgardinsmeny för fakturering, placerad precis före telefonen. Genom att ställa in ‘ type‘ till ‘ select‘ och tillhandahålla en array för alternativen för optionsegenskapen ‘ ‘ gör du en vald inmatning.

WooCommerce kommer att bearbeta och spara detta fält som en del av kassafälten automatiskt.

Det finns inget automatiskt sätt att göra ditt fält synligt för beställningsadministratören. Du kan haka på åtgärden woocommerce_admin_order_data_after_billing_addressoch manuellt hämta metafältet, med hjälp av order-ID från orderobjekt som tillhandahålls som argument till åtgärden. Tänk på att värdet kommer att sparas som postmeta med ett inledande "_". I exemplet ovan kommer fältet att sparas som " _billing_my_custom_select" i databasen.

Metod 2: Lägga till anpassat fält med hjälp av åtgärder

Om du stöter på problem med ovanstående metod, eller vill placera ditt område på ett annat sätt, rekommenderar jag att du väljer den här metoden. Det är lite mer kod, men du har mer kontroll. Jag personligen föredrar den här metoden.

Första steget är att välja en åtgärd i kassan där du vill lägga till ditt fält. Detta är helt enkelt en fråga om preferenser om var du vill att ditt område ska visas. Ta en titt i /woocommerce/templates/checkout/mallfiler; t.ex. eller. form-checkout.php_ I mitt exempel har jag valt åtgärden som visas i, efter orderanteckningar.form-billing.php``form-shipping.php``woocommerce_after_order_notes``form-shipping.php

Du använder funktionen woocommerce_form_field och tillhandahåller samma egenskaper som du har sett i woocommerce_checkout_fieldsfiltret (se ovan). Alternativt kan du lägga till HTML runt ditt anpassade fält, som jag har gjort. Här är ett exempel på hur du lägger till ett anpassat fält för att mata in medlems-ID:

Fältet ska nu dyka upp i kassan.

Validering av ditt fält är valfritt. Jag har inkluderat ett exempel på validering för att säkerställa ett giltigt medlems-ID genom att kontrollera dess längd. För validering använd kroken woocommerce_checkout_processoch om du behöver returnera ett fel och stoppa kassaprocessen, använd wc_add_notice().

Nästa steg är faktiskt att spara fältets värde när någon lägger en beställning. För detta använder vi åtgärden woocommerce_checkout_update_order_metaoch sparar helt enkelt fältet som en post-meta till order-ID (tillhandahålls som parameter till åtgärden), och hämtar värdet från $_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']));
    }
}

Ditt anpassade fält ska nu sparas i beställningar.

Om du vill visa fältet i ordning admin, lägg till samma kod som i metod 1. Jag tar med det igen här, justerat för detta exempels fältnamn: