{"id":234001,"date":"2023-02-28T20:16:00","date_gmt":"2023-02-28T17:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234001"},"modified":"2022-11-11T13:44:25","modified_gmt":"2022-11-11T10:44:25","slug":"guide-anpassa-woocommerce-kassafaelt-efter-kod","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/guide-anpassa-woocommerce-kassafaelt-efter-kod\/","title":{"rendered":"Guide: Anpassa WooCommerce kassaf\u00e4lt efter kod"},"content":{"rendered":"\n<p>I det h\u00e4r inl\u00e4gget kommer du att l\u00e4ra dig hur du \u00e4ndrar, tar bort eller omplacerar standardutcheckningsf\u00e4lt i <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce<\/a> och hur du l\u00e4gger till ditt eget anpassade f\u00e4lt.<\/p>\n<h2>Utcheckningsf\u00e4lten filtrerar<\/h2>\n<p>WooCommerce erbjuder ett filter f\u00f6r alla kassaf\u00e4lt: <code>woocommerce_checkout_fields<\/code>. Det finns ocks\u00e5 dedikerade filter f\u00f6r fakturerings- och fraktf\u00e4lt; <code>woocommerce_billing_fields<\/code>och <code>woocommerce_shipping_fields<\/code>men de hamnar b\u00e5da i det ovan n\u00e4mnda f\u00f6rsta filtret.<\/p>\n<p>F\u00e4lten i <code>woocommerce_checkout_fields<\/code>\u00e4r strukturerade i en flerdimensionell array s\u00e5 h\u00e4r:<\/p>\n<ul>\n<li><code>billing<\/code>\n<ul>\n<li><code>billing_first_name<\/code><\/li>\n<li><code>billing_last_name<\/code><\/li>\n<li><code>billing_company<\/code><\/li>\n<li><code>billing_address_1<\/code><\/li>\n<li><code>billing_address_2<\/code><\/li>\n<li><code>billing_city<\/code><\/li>\n<li><code>billing_postcode<\/code><\/li>\n<li><code>billing_country<\/code><\/li>\n<li><code>billing_state<\/code><\/li>\n<li><code>billing_email<\/code><\/li>\n<li><code>billing_phone<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>order<\/code>\n<ul>\n<li><code>order_comments<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>shipping<\/code>\n<ul>\n<li><code>shipping_first_name<\/code><\/li>\n<li><code>shipping_last_name<\/code><\/li>\n<li><code>shipping_company<\/code><\/li>\n<li><code>shipping_address_1<\/code><\/li>\n<li><code>shipping_address_2<\/code><\/li>\n<li><code>shipping_city<\/code><\/li>\n<li><code>shipping_postcode<\/code><\/li>\n<li><code>shipping_country<\/code><\/li>\n<li><code>shipping_state<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>account<\/code>\n<ul>\n<li><code>account_username<\/code><\/li>\n<li><code>account_password<\/code><\/li>\n<li><code>account_password-2<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Varje f\u00e4lt \u00e4r en array som inneh\u00e5ller f\u00f6ljande inst\u00e4llningar (alla f\u00e4lt inneh\u00e5ller inte alla egenskaper):<\/p>\n<ul>\n<li><code>label<\/code>: F\u00e4ltets synliga etikett i kassan<\/li>\n<li><code>placeholder<\/code>: Ing\u00e5ngens platsh\u00e5llare<\/li>\n<li><code>type<\/code>: Definierar f\u00e4lttypen. Om det inte \u00e4r inst\u00e4llt, \u00e4r det standardinst\u00e4llning f\u00f6r textinmatning, annars kan det vara <code>select<\/code>, <code>tel<\/code>, <code>email<\/code>, <code>textarea<\/code>, etc.<\/li>\n<li><code>required<\/code>: Ett booleskt v\u00e4rde oavsett om f\u00e4ltet \u00e4r obligatoriskt eller inte<\/li>\n<li><code>class<\/code>: Klasser som appliceras p\u00e5 f\u00e4ltets omslagselement. T\u00e4nk p\u00e5 att detta \u00e4r en array.<\/li>\n<li><code>priority<\/code>: Heltal som informerar WooCommerce om f\u00e4ltets ordning<\/li>\n<\/ul>\n<p>Vissa f\u00e4lt har ytterligare egenskaper som \u00e4r unikt anpassade f\u00f6r vissa f\u00e4lt, och vanligtvis inte n\u00e5got du beh\u00f6ver t\u00e4nka p\u00e5.<\/p>\n<h2>\u00c4ndra standardf\u00e4lt<\/h2>\n<p>Genom att l\u00e4gga till ett filter i <code>woocommerce_checkout_fields<\/code>och titta p\u00e5 \u00f6versikten ovan borde det vara ganska l\u00e4tt att f\u00f6rst\u00e5 hur man \u00e4ndrar de befintliga f\u00e4lten.<\/p>\n<p>H\u00e4r \u00e4r ett exempel p\u00e5 hur du \u00e4ndrar etiketten i telefonf\u00e4ltet:<\/p>\n<pre><code>add_filter('woocommerce_checkout_fields', function($fields) {\n    $fields['billing']['billing_phone']['label'] = __('Mobile phone', 'textdomain');\n    return $fields;\n});<\/code><\/pre>\n<p>Eller kanske du vill \u00e4ndra den n\u00f6dv\u00e4ndiga egenskapen och g\u00f6ra f\u00e4ltet valfritt (eller vice versa)?<\/p>\n<pre><code>add_filter('woocommerce_checkout_fields', function($fields) {\n    $fields['billing']['billing_phone']['required'] = false;\n    return $fields;\n});<\/code><\/pre>\n<p>Men om du vill redigera adressf\u00e4lten (g\u00e4ller s\u00e4rskilt <code>_address_1<\/code>, <code>_postcode<\/code>och <code>_city<\/code>) kan du beh\u00f6va anv\u00e4nda ett annat filter; n\u00e4mligen <code>woocommerce_default_address_fields<\/code>. Som argument f\u00f6r detta filter \u00e4r arrayen inte l\u00e4ngre strukturerad med fakturerings- och fraktnycklar, och f\u00e4ltnycklarna saknar prefixet &quot; <code>billing_<\/code>&quot; eller &quot; <code>shipping_<\/code>&quot;. Adress 1 finns till exempel i detta filter under nyckeln <code>address_1<\/code>.<\/p>\n<p>H\u00e4r \u00e4r ett exempel p\u00e5 att byta postnummeretikett:<\/p>\n<pre><code>add_filter('woocommerce_default_address_fields', function($address_fields) {\n    $address_fields['postcode']['label'] = __('Postcode', 'textdomain');\n    return $address_fields;\n});<\/code><\/pre>\n<h2>Tar bort standardf\u00e4lt<\/h2>\n<p>Att ta bort standardf\u00e4lt g\u00f6rs enkelt genom att anv\u00e4nda PHP:s <code>unset()<\/code>arrayfunktion i <code>woocommerce_checkout_fields<\/code>filtret. Till exempel:<\/p>\n<pre><code>add_filter('woocommerce_checkout_fields', function($fields) {\n    unset($fields['billing']['billing_city']);\n    return $fields;\n});<\/code><\/pre>\n<h2>Omordning av f\u00e4lt<\/h2>\n<p>Omordning av f\u00e4lt g\u00f6rs genom att \u00e4ndra egenskapen <code>priority<\/code>p\u00e5 f\u00e4lten. Den h\u00e4r egenskapen lades nyligen till (WooCommerce 3+) och gjorde ombest\u00e4llning mycket enklare \u00e4n tidigare d\u00e4r du var tvungen att ordna om arrayen.<\/p>\n<p>Ju l\u00e4gre siffra, desto h\u00f6gre upp kommer den. Varje f\u00e4lts prioritet ger ett visst spelrum f\u00f6r att flytta f\u00e4lt d\u00e4remellan, till exempel b\u00f6rjar f\u00f6rnamn p\u00e5 10, efternamn p\u00e5 20, och f\u00f6retag vid 30. Om du ville ha ett f\u00e4lt efter efternamn och f\u00f6re f\u00f6retag, kan du s\u00e4tta prioritet p\u00e5 25.<\/p>\n<p>Exempel p\u00e5 flyttande telefonf\u00e4lt f\u00f6re adress:<\/p>\n<pre><code>add_filter('woocommerce_checkout_fields', function($fields) {\n    $fields['billing']['billing_phone']['priority'] = 35;\n    return $fields;\n});<\/code><\/pre>\n<p>Samma specialfall f\u00f6r adressf\u00e4lt som n\u00e4mnts tidigare g\u00e4ller \u00e4ven h\u00e4r. Om du vill \u00e4ndra till exempel stadens prioritet, anv\u00e4nd filtret <code>woocommerce_default_address_fields<\/code>.<\/p>\n<pre><code>add_filter('woocommerce_default_address_fields', function($address_fields) {  \n    $address_fields['city']['priority'] = 45;\n    return $address_fields;\n});<\/code><\/pre>\n<p>Obs: WooCommerce kommer ofta att \u00e5sidos\u00e4tta prioritet i postnummerf\u00e4ltet (st\u00e4ll det till 65) beroende p\u00e5 land.<\/p>\n<h2>L\u00e4gger till anpassade f\u00e4lt till kassan<\/h2>\n<p>Du har tv\u00e5 alternativ f\u00f6r att l\u00e4gga till anpassade f\u00e4lt; du kan antingen l\u00e4gga till ett anpassat f\u00e4lt till antingen fakturerings- eller fraktarrayen genom <code>woocommerce_checkout_fields<\/code>filtret, och WooCommerce kommer att hantera allt om bearbetning och spara det i best\u00e4llningen. Alternativt kan du anv\u00e4nda \u00e5tg\u00e4rder i kassan (till exempel <code>woocommerce_after_order_notes<\/code>) f\u00f6r att l\u00e4gga till ett f\u00e4lt, men i det h\u00e4r fallet m\u00e5ste du skriva kod f\u00f6r att bearbeta och spara den manuellt.<\/p>\n<h3>Metod 1: L\u00e4gga till anpassat f\u00e4lt till fakturering eller frakt med hj\u00e4lp av kassafilter<\/h3>\n<p>Den enkla metoden \u00e4r att anv\u00e4nda samma filter som vi har anv\u00e4nt hela tiden; <code>woocommerce_checkout_fields<\/code>och l\u00e4gg helt enkelt till ett nytt arrayelement.<\/p>\n<p><a href=\"https:\/\/docs.woocommerce.com\/document\/tutorial-customising-checkout-fields-using-actions-and-filters\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerces dokumentation<\/a> g\u00f6r <strong>inte detta tydligt<\/strong>, men den h\u00e4r metoden fungerar bara f\u00f6r att l\u00e4gga till f\u00e4lt till &quot;fakturering&quot; eller &quot;frakt&quot;. Dessutom m\u00e5ste din nyckel\/namn p\u00e5 f\u00e4ltet f\u00f6reg\u00e5s med motsvarande \u00f6verordnade nyckel; till exempel f\u00f6r att l\u00e4gga till ett f\u00e4lt &#8217; <code>my_custom_input<\/code>&#8217; till faktureringsmatrisen, m\u00e5ste det heta &#8217; <code>billing_my_custom_input<\/code>&#8217;. Annars kommer WooCommerce inte att spara ditt f\u00e4lt.<\/p>\n<p>H\u00e4r \u00e4r ett exempel p\u00e5 att l\u00e4gga till en icke-obligatorisk anpassad val\/rullgardinsmeny f\u00f6r fakturering, placerad precis f\u00f6re telefonen. Genom att st\u00e4lla in &#8217; <code>type<\/code>&#8217; till &#8217; <code>select<\/code>&#8217; och tillhandah\u00e5lla en array f\u00f6r alternativen f\u00f6r <code>options<\/code>egenskapen &#8217; &#8217; g\u00f6r du en vald inmatning.<\/p>\n<pre><code>add_filter('woocommerce_checkout_fields', function($fields) {\n    $fields['billing']['billing_my_custom_select'] = [\n        'label' =&gt; __('My custom select', 'textdomain'),\n        'required' =&gt; false,\n        'type' =&gt; 'select',\n        'options' =&gt; [\n            '' =&gt; __('Choose which you prefer', 'textdomain'),\n            'dogs' =&gt; __('Dogs are best', 'textdomain'),\n            'cats' =&gt; __('I prefer cats', 'textdomain')\n        ],\n        'class' =&gt; ['form-row-wide'],\n        'priority' =&gt; 85\n    ];\n    return $fields;\n});<\/code><\/pre>\n<p>WooCommerce kommer att bearbeta och spara detta f\u00e4lt som en del av kassaf\u00e4lten automatiskt.<\/p>\n<p>Det finns inget automatiskt s\u00e4tt att g\u00f6ra ditt f\u00e4lt synligt f\u00f6r best\u00e4llningsadministrat\u00f6ren. Du kan haka p\u00e5 \u00e5tg\u00e4rden <code>woocommerce_admin_order_data_after_billing_address<\/code>och manuellt h\u00e4mta metaf\u00e4ltet, med hj\u00e4lp av order-ID fr\u00e5n orderobjekt som tillhandah\u00e5lls som argument till \u00e5tg\u00e4rden. T\u00e4nk p\u00e5 att v\u00e4rdet kommer att sparas som postmeta med ett inledande &quot;_&quot;. I exemplet ovan kommer f\u00e4ltet att sparas som &quot; <code>_billing_my_custom_select<\/code>&quot; i databasen.<\/p>\n<pre><code>add_action('woocommerce_admin_order_data_after_billing_address', function($order) {\n    $my_value = get_post_meta($order-&gt;id, '_billing_my_custom_select', true);\n    if (!empty($my_value)) {\n        echo '&lt;p&gt;&lt;strong&gt;'. __('My custom select', 'textdomain'). ':&lt;\/strong&gt; '. $my_value. '&lt;\/p&gt;';\n    }\n});<\/code><\/pre>\n<h3>Metod 2: L\u00e4gga till anpassat f\u00e4lt med hj\u00e4lp av \u00e5tg\u00e4rder<\/h3>\n<p>Om du st\u00f6ter p\u00e5 problem med ovanst\u00e5ende metod, eller vill placera ditt omr\u00e5de p\u00e5 ett annat s\u00e4tt, rekommenderar jag att du v\u00e4ljer den h\u00e4r metoden. Det \u00e4r lite mer kod, men du har mer kontroll. Jag personligen f\u00f6redrar den h\u00e4r metoden.<\/p>\n<p>F\u00f6rsta steget \u00e4r att v\u00e4lja en \u00e5tg\u00e4rd i kassan d\u00e4r du vill l\u00e4gga till ditt f\u00e4lt. Detta \u00e4r helt enkelt en fr\u00e5ga om preferenser om var du vill att ditt omr\u00e5de ska visas. Ta en titt i <code>\/woocommerce\/templates\/checkout\/<\/code>mallfiler; t.ex. eller. <code>form-checkout.php<\/code>_ I mitt exempel har jag valt \u00e5tg\u00e4rden som visas i, efter orderanteckningar.<code>form-billing.php``form-shipping.php``woocommerce_after_order_notes``form-shipping.php<\/code><\/p>\n<p>Du anv\u00e4nder funktionen woocommerce_form_field och tillhandah\u00e5ller samma egenskaper som du har sett i <code>woocommerce_checkout_fields<\/code>filtret (se ovan). Alternativt kan du l\u00e4gga till HTML runt ditt anpassade f\u00e4lt, som jag har gjort. H\u00e4r \u00e4r ett exempel p\u00e5 hur du l\u00e4gger till ett anpassat f\u00e4lt f\u00f6r att mata in medlems-ID:<\/p>\n<pre><code>add_action('woocommerce_after_order_notes', function($checkout) {\n    echo '&lt;div id=\"my_custom_checkout_field\"&gt;&lt;h3&gt;'. __('Members', 'textdomain'). '&lt;\/h3&gt;';\n\u00a0\n    woocommerce_form_field('member_id', [\n        'type' =&gt; 'text',\n        'class' =&gt; ['form-row-wide'],\n        'label' =&gt; __('Member ID', 'textdomain'),\n    ], $checkout-&gt;get_value('member_id'));\n\u00a0\n    echo '&lt;\/div&gt;';\n});<\/code><\/pre>\n<p>F\u00e4ltet ska nu dyka upp i kassan.<\/p>\n<p>Validering av ditt f\u00e4lt \u00e4r valfritt. Jag har inkluderat ett exempel p\u00e5 validering f\u00f6r att s\u00e4kerst\u00e4lla ett giltigt medlems-ID genom att kontrollera dess l\u00e4ngd. F\u00f6r validering anv\u00e4nd kroken <code>woocommerce_checkout_process<\/code>och om du beh\u00f6ver returnera ett fel och stoppa kassaprocessen, anv\u00e4nd <code>wc_add_notice()<\/code>.<\/p>\n<pre><code>add_action('woocommerce_checkout_process', function() {\n    if (!empty($_POST['member_id'])) {\n        $given_member_id = $_POST['member_id'];\n        if (strlen($given_member_id) &lt; 5 || strlen($given_member_id) &gt; 10) {\n            wc_add_notice(__('Invalid member ID', 'textdomain'), 'error');\n        }\n    }\n});<\/code><\/pre>\n<p>N\u00e4sta steg \u00e4r faktiskt att spara f\u00e4ltets v\u00e4rde n\u00e4r n\u00e5gon l\u00e4gger en best\u00e4llning. F\u00f6r detta anv\u00e4nder vi \u00e5tg\u00e4rden <code>woocommerce_checkout_update_order_meta<\/code>och sparar helt enkelt f\u00e4ltet som en post-meta till order-ID (tillhandah\u00e5lls som parameter till \u00e5tg\u00e4rden), och h\u00e4mtar v\u00e4rdet fr\u00e5n <code>$_POST<\/code>.<\/p>\n<pre><code>add_action('woocommerce_checkout_update_order_meta', function($order_id) {\n    if (!empty($_POST['member_id'])) {\n        update_post_meta($order_id, 'member_id', sanitize_text_field($_POST['member_id']));\n    }\n}<\/code><\/pre>\n<p>Ditt anpassade f\u00e4lt ska nu sparas i best\u00e4llningar.<\/p>\n<p>Om du vill visa f\u00e4ltet i ordning admin, l\u00e4gg till samma kod som i metod 1. Jag tar med det igen h\u00e4r, justerat f\u00f6r detta exempels f\u00e4ltnamn:<\/p>\n<pre><code>add_action('woocommerce_admin_order_data_after_billing_address', function($order) {\n    $member_id = get_post_meta($order-&gt;id, 'member_id', true);\n    if (!empty($member_id)) {\n        echo '&lt;p&gt;&lt;strong&gt;'. __('Member ID', 'textdomain'). ':&lt;\/strong&gt; '. $member_id. '&lt;\/p&gt;';\n    }\n});<\/code><\/pre>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En guide i hur du \u00e4ndrar, tar bort eller omplacerar standardutcheckningsf\u00e4lt i WordPress WooCommerce, och hur du l\u00e4gger till ditt eget anpassade f\u00e4lt, efter kod.<\/p>\n","protected":false},"author":1,"featured_media":239420,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[848,1110,818,818,848,858,858,868,868],"tags":[1173],"class_list":["post-234001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-n-a","category-plugins-3","category-woocommerce-9","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/234001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=234001"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/234001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/239420"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=234001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=234001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=234001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}