![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f68509c.png\")
<\/a><\/p>\nTuotetietojen metalaatikko<\/p>\n
Muista, ett\u00e4 v\u00e4lilehden n\u00e4kyvyys vaihtelee tuotetyypin mukaan. Esimerkiksi "Yleiset"-v\u00e4lilehti poistetaan, kun vaihdat ryhmiteltyyn tuotetyyppiin. Sinun ei pit\u00e4isi siis vain harkita, miss\u00e4 mukautetut kent\u00e4si loogisesti sopivat, vaan sinun on harkittava paneelia, joka on n\u00e4kyviss\u00e4 kaikille haluamillesi tuotetyypeille. on luettelo yleisimmist\u00e4 saatavilla olevista koukuista:<\/p>\n
- \n
woocommerce_product_options_general_product_data<\/code>("Yleinen")<\/li>\nwoocommerce_product_options_inventory_product_data<\/code>("Varasto"<\/li>\nwoocommerce_product_options_shipping<\/code>("Laivaus")<\/li>\nwoocommerce_product_options_related<\/code>("Linkitetyt tuotteet")<\/li>\nwoocommerce_product_options_attributes<\/code>("Attribuutit")<\/li>\nwoocommerce_product_options_advanced<\/code>("Pitk\u00e4lle kehittynyt")<\/li>\n<\/ul>\nLomakkeen sy\u00f6tteen lis\u00e4\u00e4minen<\/h3>\n
Mit\u00e4 tulee lomakesy\u00f6tteen tulostamiseen, voit tulostaa manuaalisesti lomakkeen sy\u00f6tteen HTML:n (esim
<input type=\"text\"...><\/code>. ), mutta WooCommerce tarjoaa yksinkertaisia \u200b\u200btoimintoja mink\u00e4 tahansa tyyppisten kenttien lis\u00e4\u00e4miseen. Suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n niit\u00e4. Katso t\u00e4\u00e4lt\u00e4 WooCommercen yleiskatsaus<\/a> kaikista mahdollisista sy\u00f6tt\u00f6tyypeist\u00e4 ja siit\u00e4, mit\u00e4 argumentteja voit ohjata tulosteen ohjaamiseen.<\/p>\nMit\u00e4 tulee t\u00e4h\u00e4n opetusohjelmaan, aion lis\u00e4t\u00e4 yksinkertaisen tekstisy\u00f6tteen inventaario-v\u00e4lilehdelle kunkin paketin nimikkeiden lukum\u00e4\u00e4r\u00e4n kirjoittamiseksi. Mit\u00e4 tulee avaimeen, jolla mukautettu arvosi tallennetaan, lis\u00e4\u00e4 aina alaviiva "_" ennen sit\u00e4, minun tapauksessani se on "_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>\nTallenna ja muokkaa tuotetta. Sinun pit\u00e4isi n\u00e4hd\u00e4 mukautettu kentt\u00e4si Mainosjakauma-v\u00e4lilehden alareunassa:<\/p>\n
![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f74b757.png\")
<\/a><\/p>\nMukautettu kentt\u00e4 "Numero paketissa" lis\u00e4tty alareunaan<\/p>\n
Huomautus kent\u00e4n n\u00e4kyvyydest\u00e4 tuotetyypist\u00e4 riippuen<\/h3>\n
WooCommercen tuotetietojen metaboxissa on paljon Javascripti\u00e4, joka piilottaa ja n\u00e4ytt\u00e4\u00e4 sek\u00e4 kent\u00e4t ett\u00e4 v\u00e4lilehdet\/paneelit. Voit helposti hy\u00f6dynt\u00e4\u00e4 t\u00e4t\u00e4, jos haluat kentt\u00e4si n\u00e4kyv\u00e4n vain tietyille tuotetyypeille antamalla kent\u00e4llesi tietyt luokkanimet.<\/p>\n
Oletetaan, ett\u00e4 haluat kent\u00e4n n\u00e4kyv\u00e4n vain, jos tuote on tyyppi\u00e4 yksinkertainen tuote, tai haluat sen olevan piilossa, jos tuote on muuttuva tuote. WooCommerce kuuntelee tiettyj\u00e4 luokkien nimi\u00e4, kuten
show_if_<producttype><\/code>ja,hide_if_<producttype><\/code>ja voit yhdist\u00e4\u00e4 useita luokkia hienos\u00e4\u00e4t\u00e4\u00e4ksesi, milloin kent\u00e4n pit\u00e4isi olla piilossa tai n\u00e4kyviss\u00e4.<\/p>\nJos esimerkiksi haluan, ett\u00e4 kentt\u00e4ni n\u00e4kyy vain yksinkertaisille tuotteille; Lis\u00e4\u00e4n t\u00e4m\u00e4n
wrapper_class<\/code>kent\u00e4n sy\u00f6tteeseeni:<\/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>\nVoit my\u00f6s asettaa
wrapper_class<\/code>esim. ’show_if_simple show_if_grouped<\/code>’, jotta kentt\u00e4 n\u00e4kyy vain tuotteille, jotka ovat joko yksinkertaisia \u200b\u200btai ryhmiteltyj\u00e4. Kokeile itse!<\/p>\nMukautetun kent\u00e4n tallentaminen<\/h3>\n
T\u00e4ll\u00e4 hetkell\u00e4 mit\u00e4 tahansa kentt\u00e4\u00e4n sy\u00f6tt\u00e4m\u00e4\u00e4si ei tallenneta. Tehd\u00e4\u00e4n se seuraavaksi. Kiinnit\u00e4mme
woocommerce_process_product_meta<\/code>ja tallennamme PHP:n globaalin arvon$_POST<\/code>(lomakkeen l\u00e4hetys).<\/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>\nSelit\u00e4n nopeasti yll\u00e4 olevan koodin. Voit yksinkertaisesti tallentaa kent\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4
update_post_meta()<\/code>, mutta uudemmissa WooCommercen versioissa tuotteen k\u00e4sittely\u00e4 on parannettu huomattavasti. Niin kauan kuin sinulla on tuoteobjekti (jonka saamme soittamallawc_get_product()<\/code>viestitunnuksella), voit helposti muokata objektissa olevia tuotetietoja ja lopulta soittaasave()<\/code>kerran p\u00e4ivitt\u00e4\u00e4ksesi muutokset. T\u00e4m\u00e4 on eritt\u00e4in hy\u00f6dyllist\u00e4 varsinkin, jos haluat tallentaa useita kentti\u00e4 \u2013 jolloin sinun ei tarvitse suorittaa tietokantatoimintoja jokaiselle kent\u00e4lle, vain viimeisen kerran, kun soitatsave()<\/code>.<\/p>\nK\u00e4yt\u00e4
update_meta_data()<\/code>objektissa jokaiselle tallennettavalle metadatalle.<\/p>\nYll\u00e4 olevalla toiminnolla kentt\u00e4si pit\u00e4isi nyt tallentua, kun p\u00e4ivit\u00e4t sen editoinnissa! Huomaa my\u00f6s, ett\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 WooCommercen toimintoja kent\u00e4n tulostamiseen, sinun ei tarvitse hankkia kent\u00e4n arvoa manuaalisesti ennen kent\u00e4n tulostamista \u2013 se on t\u00e4ysin automaattinen.<\/p>\n
Mukautetun kent\u00e4n n\u00e4ytt\u00e4minen k\u00e4ytt\u00f6liittym\u00e4ss\u00e4<\/h3>\n
Ensimm\u00e4inen vaihe on selvitt\u00e4\u00e4, mit\u00e4 koukkua haluat k\u00e4ytt\u00e4\u00e4 mukautetun kent\u00e4n tulostamiseen. WooCommerce tarjoaa runsaasti saatavilla olevia koukkuja, joiden avulla voit hallita tarkasti, miss\u00e4 haluat tulostaa. Jos olet ep\u00e4varma, katso
plugins\/woocommerce\/templates\/<\/code>n\u00e4m\u00e4 tiedostot ja l\u00f6yd\u00e4t helposti sopivan koukun. Voit my\u00f6s ohittaa mallin ja lis\u00e4t\u00e4 tulosteen malliin, mutta suosittelen aina koukkujen k\u00e4ytt\u00f6\u00e4 sen sijaan.<\/p>\nMit\u00e4 tulee minuun, haluan, ett\u00e4 mukautettu kentt\u00e4ni tulostetaan yksitt\u00e4isess\u00e4 tuotteessa metadiv:n sis\u00e4ll\u00e4 \u2013 samalla, kun WooCommerce tulostaa SKU:n ja luokan. K\u00e4yt\u00e4n t\u00e4h\u00e4n koukkua
woocommerce_product_meta_start<\/code>. Koukkujen sis\u00e4ll\u00e4 (kuten l\u00e4hes kaikissa mallikoukuissa) p\u00e4\u00e4set k\u00e4siksi globaaliin viestiobjektiin. Noudatan samaa peukalos\u00e4\u00e4nt\u00f6\u00e4 kuin pelastaessani kentt\u00e4ni; k\u00e4yt\u00e4get_meta()<\/code>tuoteobjektissa mukautetun kent\u00e4n hankkimiseen:<\/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>\nMukautetun v\u00e4lilehden ja paneelin lis\u00e4\u00e4minen tuotetietojen metalaatikkoon<\/h2>\n
Jos haluat lis\u00e4t\u00e4 kokoelman mukautettuja kentti\u00e4, jotka kuuluvat loogisesti yhteen, voi olla hyv\u00e4 idea ryhmitell\u00e4 ne mukautetulle v\u00e4lilehdelle. Mukautetun v\u00e4lilehden lis\u00e4\u00e4miseksi Tuotetiedot-metalaatikkoon meid\u00e4n on kytkett\u00e4v\u00e4 suodatin itse v\u00e4lilehden lis\u00e4\u00e4mist\u00e4 varten ja koukku paneelin sis\u00e4ll\u00f6n tulostamista varten. Lopuksi meid\u00e4n on viel\u00e4 lis\u00e4tt\u00e4v\u00e4 sama koukku kuin yll\u00e4 peltojen pelastamiseksi.<\/p>\n
Esimerkiksi aion lis\u00e4t\u00e4 mukautetun paneelin nimelt\u00e4 "Lis\u00e4tiedot", johon haluan lis\u00e4t\u00e4 tekstinsy\u00f6t\u00f6n, valintaruudun ja numeron sy\u00f6tteen.<\/p>\n
Ensin suodatamme
woocommerce_product_data_tabs<\/code>ja lis\u00e4\u00e4mme v\u00e4lilehtemme sen joukkoon.<\/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>\nT\u00e4ss\u00e4 on joitain hy\u00f6dyllisi\u00e4 argumentteja. Voit esimerkiksi
class<\/code>ohjata v\u00e4lilehden n\u00e4kyvyytt\u00e4 tuotetyypist\u00e4 riippuen k\u00e4ytt\u00e4m\u00e4ll\u00e4 n\u00e4pp\u00e4int\u00e4. Jos unohdat sen, tutustu yll\u00e4 mainittuun<\/a> kent\u00e4n n\u00e4kyvyytt\u00e4 k\u00e4sittelev\u00e4\u00e4n osioon. Muista kuitenkin, ett\u00e4 v\u00e4lilehdiss\u00e4 luokat on annettava taulukkona, ei merkkijonona. Voit my\u00f6spriority<\/code>m\u00e4\u00e4ritt\u00e4\u00e4, miss\u00e4 v\u00e4lilehti n\u00e4kyy. Esim. 25:n k\u00e4ytt\u00e4minen asettaa v\u00e4lilehden heti "Inventory" j\u00e4lkeen.<\/p>\nOletusarvoisesti v\u00e4lilehti n\u00e4kyy jakoavainkuvakkeena. Valitettavasti (t\u00e4ll\u00e4 hetkell\u00e4) ei ole mahdollista ohjata sit\u00e4 suodattimen kautta. Jos t\u00e4m\u00e4 on sinulle t\u00e4rke\u00e4\u00e4, voit lis\u00e4t\u00e4 j\u00e4rjestelm\u00e4nvalvojan CSS:n ja tarjota eri luokan v\u00e4lilehdelle. T\u00e4ss\u00e4 on yleiskatsaus<\/a> k\u00e4ytett\u00e4viss\u00e4 olevista kuvakkeista WooCommercessa.<\/p>\n
Paneelin ulostulo<\/h3>\n
Seuraava vaihe on
woocommerce_product_data_panels<\/code>paneelin sis\u00e4ll\u00f6n kytkeminen ja tulostaminen. T\u00e4rke\u00e4 huomautus t\u00e4ss\u00e4 on aloittaa tuloste attribuutilla,div<\/code>jolla onid<\/code>sama nimi kuin annoit n\u00e4pp\u00e4imeksi v\u00e4lilehdiss\u00e4 (minun tapauksessani ’additional_info<\/code>’). Mit\u00e4 tulee sis\u00e4lt\u00f6\u00f6n, se on sinun p\u00e4\u00e4tett\u00e4viss\u00e4si \u2013 voit lis\u00e4t\u00e4 mit\u00e4 tahansa HTML-koodia, mutta suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n WooCommercen toimintoja lomakekenttien tulostamiseen. Samat edut kenttien piilottamisessa tai n\u00e4ytt\u00e4misess\u00e4 toimivat my\u00f6s t\u00e4\u00e4ll\u00e4.<\/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>\nTallennuksen j\u00e4lkeen sinun pit\u00e4isi nyt n\u00e4hd\u00e4 v\u00e4lilehti ja sen sis\u00e4lt\u00f6 Tuotetiedot-metalaatikossa (ellei tuote tietenk\u00e4\u00e4n ole ulkoinen tuote).<\/p>\n