![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f68509c.png\")
<\/a><\/p>\nMetaboxen Produktdata<\/p>\n
T\u00e4nk p\u00e5 att flikarnas synlighet varierar beroende p\u00e5 produkttyp. Fliken "Allm\u00e4nt" tas till exempel bort n\u00e4r du byter till en grupperad produkttyp. S\u00e5 du b\u00f6r inte bara t\u00e4nka p\u00e5 var dina anpassade f\u00e4lt logiskt passar in, utan du m\u00e5ste \u00f6verv\u00e4ga en panel som \u00e4r synlig f\u00f6r alla dina \u00f6nskade produkttyper. \u00e4r en lista \u00f6ver de mest allm\u00e4nna tillg\u00e4ngliga krokarna:<\/p>\n
- \n
woocommerce_product_options_general_product_data<\/code>("Allm\u00e4n")<\/li>\nwoocommerce_product_options_inventory_product_data<\/code>("Lager")<\/li>\nwoocommerce_product_options_shipping<\/code>("Frakt")<\/li>\nwoocommerce_product_options_related<\/code>("L\u00e4nkade produkter")<\/li>\nwoocommerce_product_options_attributes<\/code>("Attribut")<\/li>\nwoocommerce_product_options_advanced<\/code>("Avancerad")<\/li>\n<\/ul>\nL\u00e4gga till en formul\u00e4rinmatning<\/h3>\n
N\u00e4r det g\u00e4ller att mata ut en formul\u00e4rinmatning kan du manuellt mata ut formul\u00e4rinmatningen HTML (t.ex.
<input type=\"text\"...><\/code>), men WooCommerce erbjuder enkla funktioner f\u00f6r att enkelt l\u00e4gga till f\u00e4lt av alla typer. Jag rekommenderar att du anv\u00e4nder dem. Kolla in WooCommerces \u00f6versikt<\/a> \u00f6ver alla m\u00f6jliga indatatyper h\u00e4r, och vilka argument du kan skicka f\u00f6r att styra utdata.<\/p>\nN\u00e4r det g\u00e4ller denna handledning kommer jag att l\u00e4gga till en enkel textinmatning p\u00e5 inventeringsfliken f\u00f6r att skriva antalet artiklar i varje paket. N\u00e4r det g\u00e4ller nyckeln som ditt anpassade v\u00e4rde sparas som, l\u00e4gg alltid till ett understreck "_" f\u00f6re det, i mitt fall blir det "_number_in_package":<\/p>\n
add_action('woocommerce_product_options_inventory_product_data', function() {\n woocommerce_wp_text_input([\n 'id' => '_number_in_package',\n 'label' => __('Number in package', 'txtdomain'),\n ]);\n});<\/code><\/pre>\nSpara och redigera en produkt. Du b\u00f6r se ditt anpassade f\u00e4lt visas l\u00e4ngst ned p\u00e5 fliken Inventering:<\/p>\n
![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f74b757.png\")
<\/a><\/p>\nDet anpassade f\u00e4ltet "Nummer i paket" l\u00e4ggs till l\u00e4ngst ner<\/p>\n
En notering om f\u00e4ltsynlighet beroende p\u00e5 produkttyp<\/h3>\n
WooCommerces produktdatametabox kommer med en hel del Javascript som d\u00f6ljer och visar b\u00e5de f\u00e4lt och flikar\/paneler. Du kan enkelt anv\u00e4nda detta om du vill att ditt f\u00e4lt ska vara synligt endast f\u00f6r specifika produkttyper, genom att ange specifika klassnamn till ditt f\u00e4lt.<\/p>\n
L\u00e5t oss s\u00e4ga att du vill att ditt f\u00e4lt endast ska visas om produkten \u00e4r av typen enkel produkt, eller du vill att den ska d\u00f6ljas om produkten \u00e4r en variabel produkt. WooCommerce lyssnar p\u00e5 specifika klassnamn som
show_if_<producttype><\/code>ochhide_if_<producttype><\/code>och du kan kombinera flera klasser f\u00f6r att finjustera n\u00e4r ditt f\u00e4lt ska vara dolt eller synligt.<\/p>\nTill exempel, om jag vill att mitt omr\u00e5de endast ska vara synligt f\u00f6r enkla produkter; Jag l\u00e4gger till detta i ’
wrapper_class<\/code>’ till min f\u00e4ltinmatning:<\/p>\nadd_action('woocommerce_product_options_inventory_product_data', function() {\n woocommerce_wp_text_input([\n 'id' => '_number_in_package',\n 'label' => __('Number in package', 'txtdomain'),\n 'wrapper_class' => 'show_if_simple'\n ]);\n});<\/code><\/pre>\nDu kan ocks\u00e5 st\u00e4lla
wrapper_class<\/code>in p\u00e5 t.ex. ’show_if_simple show_if_grouped<\/code>’ f\u00f6r att f\u00e4ltet endast ska vara synligt f\u00f6r produkter som antingen \u00e4r enkla eller grupperade. Prova sj\u00e4lv!<\/p>\nSparar ditt anpassade f\u00e4lt<\/h3>\n
Fr\u00e5n och med just nu sparas inte allt du anger i ditt f\u00e4lt. L\u00e5t oss g\u00f6ra det h\u00e4rn\u00e4st. Vi hakar p\u00e5
woocommerce_process_product_meta<\/code>och sparar v\u00e4rdet fr\u00e5n PHPs globala$_POST<\/code>(formul\u00e4rinl\u00e4mning).<\/p>\nadd_action('woocommerce_process_product_meta', function($post_id) {\n $product = wc_get_product($post_id);\n $num_package = isset($_POST['_number_in_package'])? $_POST['_number_in_package']: '';\n $product->update_meta_data('_number_in_package', sanitize_text_field($num_package));\n $product->save();\n});<\/code><\/pre>\nL\u00e5t mig snabbt f\u00f6rklara ovanst\u00e5ende kod. Du kan helt enkelt spara f\u00e4ltet genom att anv\u00e4nda
update_post_meta()<\/code>, men i nyare versioner av WooCommerce har hanteringen av produktmeta f\u00f6rb\u00e4ttrats avsev\u00e4rt. S\u00e5 l\u00e4nge du har produktobjektet (som vi f\u00e5r genom att ringawc_get_product()<\/code>med post-ID) kan du enkelt manipulera eventuell produktinformation i objektet, och slutligen ringasave()<\/code>en g\u00e5ng f\u00f6r att uppdatera eventuella \u00e4ndringar. Detta \u00e4r mycket f\u00f6rdelaktigt, s\u00e4rskilt om du vill spara flera f\u00e4lt \u2013 i s\u00e5 fall beh\u00f6ver du inte k\u00f6ra databasoperationer f\u00f6r varje f\u00e4lt, bara den sista g\u00e5ngen du anroparsave()<\/code>.<\/p>\nAnv\u00e4nd
update_meta_data()<\/code>p\u00e5 objektet f\u00f6r varje metadata du vill spara.<\/p>\nMed ovanst\u00e5ende funktion b\u00f6r ditt f\u00e4lt nu sparas n\u00e4r du uppdaterar det i redigera produkt! Observera ocks\u00e5 att genom att anv\u00e4nda WooCommerces funktioner f\u00f6r att mata ut f\u00e4ltet, beh\u00f6ver du inte manuellt f\u00e5 v\u00e4rdet p\u00e5 ditt f\u00e4lt innan du matar ut f\u00e4ltet \u2013 det \u00e4r helt automatiskt.<\/p>\n
Mata ut ditt anpassade f\u00e4lt i frontend<\/h3>\n
F\u00f6rsta steget \u00e4r att ta reda p\u00e5 vilken krok du vill anv\u00e4nda f\u00f6r att mata ut ditt anpassade f\u00e4lt. WooCommerce erbjuder massor av tillg\u00e4ngliga krokar f\u00f6r att styra specifikt var du vill ha utdata. Om du \u00e4r os\u00e4ker, ta en titt p\u00e5
plugins\/woocommerce\/templates\/<\/code>och inuti dessa filer kan du enkelt hitta en l\u00e4mplig krok. Du kan ocks\u00e5 \u00e5sidos\u00e4tta mallen och l\u00e4gga till utdata i mallen, men jag rekommenderar alltid att anv\u00e4nda krokar ist\u00e4llet.<\/p>\nN\u00e4r det g\u00e4ller mig vill jag att mitt anpassade f\u00e4lt ska matas ut i en enda produkt, inuti meta div \u2013 l\u00e4ngs d\u00e4r WooCommerce matar ut SKU och kategori. F\u00f6r detta ska jag anv\u00e4nda kroken
woocommerce_product_meta_start<\/code>. Inuti krokarna (som med n\u00e4stan alla mallkrokar) kan du komma \u00e5t det globala postobjektet. Jag f\u00f6ljer samma tumregel som n\u00e4r jag sparar mitt f\u00e4lt; anv\u00e4ndget_meta()<\/code>p\u00e5 produktobjektet f\u00f6r att f\u00e5 mitt anpassade f\u00e4lt:<\/p>\nadd_action('woocommerce_product_meta_start', function() {\n global $post;\n $product = wc_get_product($post->ID);\n $num_package = $product->get_meta('_number_in_package');\n if (!empty($num_package)) {\n printf('<div class=\"custom-sku\">%s: %s<\/div>', __('Number in package', 'txtdomain'), $num_package);\n }\n});<\/code><\/pre>\nL\u00e4gga till en anpassad flik och panel till produktdatametabox<\/h2>\n
Om du vill l\u00e4gga till en samling anpassade f\u00e4lt som logiskt h\u00f6r ihop, kan det vara en bra id\u00e9 att gruppera dem p\u00e5 en anpassad flik. F\u00f6r att l\u00e4gga till en anpassad flik till produktdatametaboxen m\u00e5ste vi ansluta till ett filter f\u00f6r att l\u00e4gga till sj\u00e4lva fliken och en krok f\u00f6r att mata ut panelens inneh\u00e5ll. Slutligen beh\u00f6ver vi fortfarande l\u00e4gga till samma krok som ovan f\u00f6r att spara v\u00e5ra f\u00e4lt.<\/p>\n
F\u00f6r till exempel kommer jag att l\u00e4gga till en anpassad panel som heter "Ytterligare info" d\u00e4r jag vill l\u00e4gga till en textinmatning, en kryssruta och en nummerinmatning.<\/p>\n
F\u00f6rst filtrerar vi
woocommerce_product_data_tabs<\/code>och l\u00e4gger till v\u00e5r flik till dess array.<\/p>\nadd_filter('woocommerce_product_data_tabs', function($tabs) {\n $tabs['additional_info'] = [\n 'label' => __('Additional info', 'txtdomain'),\n 'target' => 'additional_product_data',\n 'class' => ['hide_if_external'],\n 'priority' => 25\n ];\n return $tabs;\n});<\/code><\/pre>\nDet finns n\u00e5gra anv\u00e4ndbara argument vi kan ge h\u00e4r. Du kan till exempel anv\u00e4nda ’
class<\/code>’ f\u00f6r att kontrollera flikens synlighet beroende p\u00e5 produkttyp. Om du missade det, kolla in avsnittet om f\u00e4ltsynlighet som n\u00e4mns ovan<\/a>. Men kom ih\u00e5g att i flikar m\u00e5ste du tillhandah\u00e5lla klasserna som en array, inte en str\u00e4ng. Du kan ocks\u00e5 ange ’priority<\/code>’ f\u00f6r att best\u00e4mma var din flik ska visas. Anv\u00e4nd t.ex. 25 f\u00f6r att placera fliken direkt efter "Inventering".<\/p>\nSom standard visas din flik med en skiftnyckel som ikon. Tyv\u00e4rr finns det (f\u00f6r n\u00e4rvarande) inget s\u00e4tt att styra det via filtret. Om detta \u00e4r viktigt f\u00f6r dig kan du l\u00e4gga till admin CSS och tillhandah\u00e5lla en annan klass p\u00e5 din flik. H\u00e4r \u00e4r en \u00f6versikt<\/a> \u00f6ver tillg\u00e4ngliga ikoner i WooCommerce.<\/p>\n
Panelutg\u00e5ng<\/h3>\n
N\u00e4sta steg \u00e4r att koppla in
woocommerce_product_data_panels<\/code>och mata ut inneh\u00e5llet p\u00e5 din panel. En viktig anm\u00e4rkning h\u00e4r \u00e4r att starta utg\u00e5ngen med endiv<\/code>med ettid<\/code>attribut med samma namn som du angav som nyckel i tabbar (i mitt fall ’additional_info<\/code>’). N\u00e4r det g\u00e4ller inneh\u00e5llet \u00e4r det upp till dig \u2013 du kan l\u00e4gga till vilken HTML du vill, men jag rekommenderar att du anv\u00e4nder WooCommerces funktioner f\u00f6r att mata ut formul\u00e4rf\u00e4lt. Samma f\u00f6rdelar f\u00f6r att g\u00f6mma eller visa f\u00e4lt kommer att fungera h\u00e4r ocks\u00e5.<\/p>\nadd_action('woocommerce_product_data_panels', function() {\n ?><div id=\"additional_product_data\" class=\"panel woocommerce_options_panel hidden\"><?php\n\u00a0\n woocommerce_wp_text_input([\n 'id' => '_dummy_text_input',\n 'label' => __('Dummy text input', 'txtdomain'),\n 'wrapper_class' => 'show_if_simple',\n ]);\n woocommerce_wp_checkbox([\n 'id' => '_dummy_checkbox',\n 'label' => __('Dummy checkbox', 'txtdomain'),\n 'wrapper_class' => 'hide_if_grouped',\n ]);\n woocommerce_wp_text_input([\n 'id' => '_dummy_number_input',\n 'label' => __('Dummy number input', 'txtdomain'),\n 'type' => 'number',\n 'custom_attributes' => [\n 'step' => '1',\n 'min' => '0'\n ]\n ]);\n ?><\/div><?php\n});<\/code><\/pre>\nEfter att du har sparat ska du nu se fliken och dess inneh\u00e5ll i Product data metabox (om inte produkten \u00e4r en extern produkt f\u00f6rst\u00e5s).<\/p>\n