![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f68509c.png\")
<\/a><\/p>\nMetabox danych produktu<\/p>\n
Pami\u0119taj, \u017ce widoczno\u015b\u0107 zak\u0142adki r\u00f3\u017cni si\u0119 w zale\u017cno\u015bci od typu produktu. Na przyk\u0142ad karta \u201eOg\u00f3lne" zostaje usuni\u0119ta po prze\u0142\u0105czeniu na zgrupowany typ produktu. Dlatego nie tylko powiniene\u015b rozwa\u017cy\u0107, gdzie logicznie pasuj\u0105 twoje niestandardowe pola, ale musisz wzi\u0105\u0107 pod uwag\u0119 panel, kt\u00f3ry jest widoczny dla wszystkich po\u017c\u0105danych typ\u00f3w produkt\u00f3w. to lista najbardziej og\u00f3lnych dost\u0119pnych haczyk\u00f3w:<\/p>\n
- \n
woocommerce_product_options_general_product_data<\/code>("Og\u00f3lny")<\/li>\nwoocommerce_product_options_inventory_product_data<\/code>("Spis")<\/li>\nwoocommerce_product_options_shipping<\/code>("Wysy\u0142ka")<\/li>\nwoocommerce_product_options_related<\/code>(\u201ePo\u0142\u0105czone produkty”)<\/li>\nwoocommerce_product_options_attributes<\/code>(\u201eAtrybuty”)<\/li>\nwoocommerce_product_options_advanced<\/code>("Zaawansowany")<\/li>\n<\/ul>\nDodawanie danych wej\u015bciowych formularza<\/h3>\n
Je\u015bli chodzi o wyprowadzanie danych wej\u015bciowych formularza, mo\u017cesz r\u0119cznie wyprowadzi\u0107 wej\u015bciowy formularz HTML (np
<input type=\"text\"...><\/code>.), ale WooCommerce oferuje proste funkcje do \u0142atwego dodawania p\u00f3l dowolnego typu. Polecam ich u\u017cywa\u0107. Sprawd\u017a tutaj przegl\u0105d<\/a> wszystkich mo\u017cliwych typ\u00f3w danych wej\u015bciowych WooCommerce i jakie argumenty mo\u017cesz przekaza\u0107, aby kontrolowa\u0107 dane wyj\u015bciowe.<\/p>\nJe\u015bli chodzi o ten samouczek, zamierzam doda\u0107 prosty tekst w zak\u0142adce ekwipunku, aby wpisa\u0107 liczb\u0119 przedmiot\u00f3w w ka\u017cdej paczce. Je\u015bli chodzi o klucz, kt\u00f3ry zostanie zapisany jako Twoja niestandardowa warto\u015b\u0107, zawsze dodaj podkre\u015blenie \u201e_” przed nim, w moim przypadku b\u0119dzie to \u201e_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>\nZapisz i edytuj produkt. Twoje pole niestandardowe powinno pojawi\u0107 si\u0119 na dole karty Zapasy:<\/p>\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f74b757.png\")
<\/a><\/p>\nNiestandardowe pole \u201eNumer w pakiecie” dodane na dole<\/p>\n
Uwaga dotycz\u0105ca widoczno\u015bci w terenie w zale\u017cno\u015bci od rodzaju produktu<\/h3>\n
Metabox danych produktu WooCommerce zawiera wiele skrypt\u00f3w JavaScript, kt\u00f3re ukrywaj\u0105 i wy\u015bwietlaj\u0105 zar\u00f3wno pola, jak i karty\/panele. Mo\u017cesz to \u0142atwo wykorzysta\u0107, je\u015bli chcesz, aby Twoje pole by\u0142o widoczne tylko dla okre\u015blonych typ\u00f3w produkt\u00f3w, podaj\u0105c okre\u015blone nazwy klas w swoim polu.<\/p>\n
Za\u0142\u00f3\u017cmy, \u017ce chcesz, aby pole by\u0142o wy\u015bwietlane tylko wtedy, gdy produkt jest produktem typu prostego, lub chcesz, aby by\u0142o ukryte, je\u015bli produkt jest produktem zmiennym. WooCommerce nas\u0142uchuje okre\u015blonych nazw klas, takich jak
show_if_<producttype><\/code>ihide_if_<producttype><\/code>, i mo\u017cesz \u0142\u0105czy\u0107 wiele klas, aby dostroi\u0107, kiedy twoje pole powinno by\u0107 ukryte lub widoczne.<\/p>\nNa przyk\u0142ad, je\u015bli chc\u0119, aby moje pole by\u0142o widoczne tylko dla prostych produkt\u00f3w; Dodam to w \u201e
wrapper_class<\/code>” do mojego pola wej\u015bciowego:<\/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>\nMo\u017cesz r\u00f3wnie\u017c ustawi\u0107
wrapper_class<\/code>np. \u201eshow_if_simple show_if_grouped<\/code>„, aby pole by\u0142o widoczne tylko dla produkt\u00f3w, kt\u00f3re s\u0105 proste lub zgrupowane. Wypr\u00f3buj sam!<\/p>\nZapisywanie niestandardowego pola<\/h3>\n
W tej chwili wszystko, co wejdziesz na swoje pole, nie jest zapisywane. Zr\u00f3bmy to dalej. Podpinamy si\u0119
woocommerce_process_product_meta<\/code>i zapisujemy warto\u015b\u0107 z globalnego PHP$_POST<\/code>(przesy\u0142anie formularza).<\/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>\nPozwol\u0119 sobie szybko wyja\u015bni\u0107 powy\u017cszy kod. Mo\u017cesz po prostu zapisa\u0107 pole za pomoc\u0105
update_post_meta()<\/code>, ale w nowszych wersjach WooCommerce obs\u0142uga meta produktu zosta\u0142a znacznie ulepszona. Dop\u00f3ki masz obiekt produktu (kt\u00f3ry otrzymujemy przez wywo\u0142aniewc_get_product()<\/code>z identyfikatorem postu), mo\u017cesz \u0142atwo manipulowa\u0107 dowolnymi informacjami o produkcie w obiekcie, a na koniec wywo\u0142a\u0107save()<\/code>raz, aby zaktualizowa\u0107 jakiekolwiek zmiany. Jest to bardzo korzystne, zw\u0142aszcza je\u015bli chcesz zapisa\u0107 wiele p\u00f3l \u2013 w takim przypadku nie musisz uruchamia\u0107 operacji bazy danych dla ka\u017cdego pola, tylko ten ostatni raz, kiedy wywo\u0142aszsave()<\/code>.<\/p>\nU\u017cyj
update_meta_data()<\/code>na obiekcie dla ka\u017cdego metadanych, kt\u00f3re chcesz zapisa\u0107.<\/p>\nDzi\u0119ki powy\u017cszej funkcji twoje pole powinno teraz zosta\u0107 zapisane, gdy zaktualizujesz je w edycji produktu! Pami\u0119taj r\u00f3wnie\u017c, \u017ce korzystaj\u0105c z funkcji WooCommerce do wyprowadzania pola, nie musisz r\u0119cznie pobiera\u0107 warto\u015bci pola przed jego wyprowadzeniem \u2013 jest to w pe\u0142ni automatyczne.<\/p>\n
Wyprowadzanie w\u0142asnego pola w interfejsie u\u017cytkownika<\/h3>\n
Pierwszym krokiem jest ustalenie, kt\u00f3rego haka chcesz u\u017cy\u0107 do wyprowadzenia w\u0142asnego pola. WooCommerce oferuje mn\u00f3stwo dost\u0119pnych hak\u00f3w do kontrolowania dok\u0142adnie tam, gdzie chcesz uzyska\u0107 dane wyj\u015bciowe. Je\u015bli nie masz pewno\u015bci, zajrzyj do
plugins\/woocommerce\/templates\/<\/code>tych plik\u00f3w, a wewn\u0105trz tych plik\u00f3w mo\u017cesz \u0142atwo znale\u017a\u0107 odpowiedni hak. Mo\u017cesz r\u00f3wnie\u017c nadpisa\u0107 szablon i doda\u0107 wynik w szablonie, ale zawsze polecam zamiast tego u\u017cywa\u0107 hook\u00f3w.<\/p>\nJe\u015bli chodzi o mnie, chc\u0119, aby moje niestandardowe pole by\u0142o wy\u015bwietlane w jednym produkcie, w meta div \u2013 wzd\u0142u\u017c miejsca, w kt\u00f3rym WooCommerce wy\u015bwietla SKU i kategori\u0119. Do tego u\u017cyj\u0119 haka
woocommerce_product_meta_start<\/code>. Wewn\u0105trz haczyk\u00f3w (tak jak w przypadku prawie wszystkich haczyk\u00f3w szablon\u00f3w) mo\u017cesz uzyska\u0107 dost\u0119p do globalnego obiektu post. B\u0119d\u0119 kierowa\u0142 si\u0119 t\u0105 sam\u0105 praktyczn\u0105 zasad\u0105, co przy ratowaniu mojego pola; u\u017cyjget_meta()<\/code>na obiekcie produktu, aby uzyska\u0107 moje niestandardowe pole:<\/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>\nDodanie niestandardowej zak\u0142adki i panelu do metabox danych produktu<\/h2>\n
Je\u015bli chcesz doda\u0107 kolekcj\u0119 p\u00f3l niestandardowych, kt\u00f3re logicznie nale\u017c\u0105 do siebie, dobrym pomys\u0142em mo\u017ce by\u0107 pogrupowanie ich na karcie niestandardowej. Aby doda\u0107 niestandardow\u0105 kart\u0119 do metaboxu Product data, musimy podpi\u0105\u0107 si\u0119 pod filtr, aby doda\u0107 sam\u0105 kart\u0119, oraz zaczep do wyprowadzania zawarto\u015bci panelu. Na koniec nadal musimy doda\u0107 ten sam haczyk, co powy\u017cej, aby zapisa\u0107 nasze pola.<\/p>\n
Na przyk\u0142ad zamierzam doda\u0107 niestandardowy panel o nazwie \u201eDodatkowe informacje”, w kt\u00f3rym chc\u0119 doda\u0107 wprowadzanie tekstu, pole wyboru i wprowadzanie liczb.<\/p>\n
Najpierw filtrujemy
woocommerce_product_data_tabs<\/code>i dodajemy nasz\u0105 kart\u0119 do jej tablicy.<\/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>\nMo\u017cemy tu przedstawi\u0107 kilka przydatnych argument\u00f3w. Mo\u017cesz na przyk\u0142ad u\u017cy\u0107 \u201e
class<\/code>„, aby kontrolowa\u0107 widoczno\u015b\u0107 zak\u0142adki w zale\u017cno\u015bci od typu produktu. Je\u015bli go przegapi\u0142e\u015b, sprawd\u017a sekcj\u0119 o widoczno\u015bci pola wspomnian\u0105 powy\u017cej<\/a>. Pami\u0119taj jednak, \u017ce na kartach musisz poda\u0107 klasy jako tablic\u0119, a nie ci\u0105g. Mo\u017cesz r\u00f3wnie\u017c poda\u0107 \u201epriority<\/code>„, aby zdecydowa\u0107, gdzie ma si\u0119 pojawi\u0107 Twoja karta. U\u017cycie np. 25 spowoduje umieszczenie zak\u0142adki zaraz po \u201eInwentarz”.<\/p>\nDomy\u015blnie twoja karta b\u0119dzie wy\u015bwietlana z ikon\u0105 klucza. Niestety nie ma (jak na razie) mo\u017cliwo\u015bci kontrolowania go przez filtr. Je\u015bli jest to dla Ciebie wa\u017cne, mo\u017cesz doda\u0107 administracyjny CSS i doda\u0107 inn\u0105 klas\u0119 do swojej karty. Oto przegl\u0105d<\/a> dost\u0119pnych ikon w WooCommerce.<\/p>\n
Wyj\u015bcie panelu<\/h3>\n
Nast\u0119pnym krokiem jest podpi\u0119cie si\u0119
woocommerce_product_data_panels<\/code>i wyprowadzenie zawarto\u015bci panelu. Wa\u017cn\u0105 uwag\u0105 jest tutaj rozpocz\u0119cie wyj\u015bcia zdiv<\/code>atrybutemid<\/code>o tej samej nazwie, kt\u00f3r\u0105 poda\u0142e\u015b jako klucz w kartach (w moim przypadku ’additional_info<\/code>’). Je\u015bli chodzi o tre\u015b\u0107, to zale\u017cy od Ciebie \u2013 mo\u017cesz doda\u0107 dowolny kod HTML, ale polecam korzystanie z funkcji WooCommerce do wy\u015bwietlania p\u00f3l formularzy. Te same korzy\u015bci zwi\u0105zane z ukrywaniem lub pokazywaniem p\u00f3l r\u00f3wnie\u017c b\u0119d\u0105 dzia\u0142a\u0107 tutaj.<\/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>\nPo zapisaniu powiniene\u015b teraz zobaczy\u0107 zak\u0142adk\u0119 i jej zawarto\u015b\u0107 w Metabox danych produktu (chyba \u017ce produkt jest oczywi\u015bcie produktem zewn\u0119trznym).<\/p>\n