W tym poście dowiemy się, jak dodać niestandardowe pola meta do metaboxa danych produktu WooCommerce; jak dodać pola, a także jak dodać własną niestandardową kartę. Omówimy szczegółowo, jak dodać pola, gdzie je dodać, jak je zapisać i wreszcie jak wyświetlić je w interfejsie użytkownika.
Dodawanie niestandardowych pól do istniejących paneli
Najpierw przyjrzymy się, jak dodać pole do istniejących paneli. Musimy zaczepić o dwa haki; jeden do wyprowadzania pola, a drugi do zapisywania jego wartości. Pierwszy hak zależy od zakładki, w której chcesz wyświetlić swoje pole.
Metabox danych produktu
Pamiętaj, że widoczność zakładki różni się w zależności od typu produktu. Na przykład karta „Ogólne" zostaje usunięta po przełączeniu na zgrupowany typ produktu. Dlatego nie tylko powinieneś rozważyć, gdzie logicznie pasują twoje niestandardowe pola, ale musisz wziąć pod uwagę panel, który jest widoczny dla wszystkich pożądanych typów produktów. to lista najbardziej ogólnych dostępnych haczyków:
woocommerce_product_options_general_product_data("Ogólny")woocommerce_product_options_inventory_product_data("Spis")woocommerce_product_options_shipping("Wysyłka")woocommerce_product_options_related(„Połączone produkty”)woocommerce_product_options_attributes(„Atrybuty”)woocommerce_product_options_advanced("Zaawansowany")
Dodawanie danych wejściowych formularza
Jeśli chodzi o wyprowadzanie danych wejściowych formularza, możesz ręcznie wyprowadzić wejściowy formularz HTML (np <input type="text"...>.), ale WooCommerce oferuje proste funkcje do łatwego dodawania pól dowolnego typu. Polecam ich używać. Sprawdź tutaj przegląd wszystkich możliwych typów danych wejściowych WooCommerce i jakie argumenty możesz przekazać, aby kontrolować dane wyjściowe.
Jeśli chodzi o ten samouczek, zamierzam dodać prosty tekst w zakładce ekwipunku, aby wpisać liczbę przedmiotów w każdej paczce. Jeśli chodzi o klucz, który zostanie zapisany jako Twoja niestandardowa wartość, zawsze dodaj podkreślenie „_” przed nim, w moim przypadku będzie to „_number_in_package”:
Zapisz i edytuj produkt. Twoje pole niestandardowe powinno pojawić się na dole karty Zapasy:
Niestandardowe pole „Numer w pakiecie” dodane na dole
Uwaga dotycząca widoczności w terenie w zależności od rodzaju produktu
Metabox danych produktu WooCommerce zawiera wiele skryptów JavaScript, które ukrywają i wyświetlają zarówno pola, jak i karty/panele. Możesz to łatwo wykorzystać, jeśli chcesz, aby Twoje pole było widoczne tylko dla określonych typów produktów, podając określone nazwy klas w swoim polu.
Załóżmy, że chcesz, aby pole było wyświetlane tylko wtedy, gdy produkt jest produktem typu prostego, lub chcesz, aby było ukryte, jeśli produkt jest produktem zmiennym. WooCommerce nasłuchuje określonych nazw klas, takich jak show_if_<producttype>i hide_if_<producttype>, i możesz łączyć wiele klas, aby dostroić, kiedy twoje pole powinno być ukryte lub widoczne.
Na przykład, jeśli chcę, aby moje pole było widoczne tylko dla prostych produktów; Dodam to w „ wrapper_class” do mojego pola wejściowego:
Możesz również ustawić wrapper_classnp. „ show_if_simple show_if_grouped“, aby pole było widoczne tylko dla produktów, które są proste lub zgrupowane. Wypróbuj sam!
Zapisywanie niestandardowego pola
W tej chwili wszystko, co wejdziesz na swoje pole, nie jest zapisywane. Zróbmy to dalej. Podpinamy się woocommerce_process_product_metai zapisujemy wartość z globalnego PHP $_POST(przesyłanie formularza).
Pozwolę sobie szybko wyjaśnić powyższy kod. Możesz po prostu zapisać pole za pomocą update_post_meta(), ale w nowszych wersjach WooCommerce obsługa meta produktu została znacznie ulepszona. Dopóki masz obiekt produktu (który otrzymujemy przez wywołanie wc_get_product()z identyfikatorem postu), możesz łatwo manipulować dowolnymi informacjami o produkcie w obiekcie, a na koniec wywołać save()raz, aby zaktualizować jakiekolwiek zmiany. Jest to bardzo korzystne, zwłaszcza jeśli chcesz zapisać wiele pól – w takim przypadku nie musisz uruchamiać operacji bazy danych dla każdego pola, tylko ten ostatni raz, kiedy wywołasz save().
Użyj update_meta_data()na obiekcie dla każdego metadanych, które chcesz zapisać.
Dzięki powyższej funkcji twoje pole powinno teraz zostać zapisane, gdy zaktualizujesz je w edycji produktu! Pamiętaj również, że korzystając z funkcji WooCommerce do wyprowadzania pola, nie musisz ręcznie pobierać wartości pola przed jego wyprowadzeniem – jest to w pełni automatyczne.
Wyprowadzanie własnego pola w interfejsie użytkownika
Pierwszym krokiem jest ustalenie, którego haka chcesz użyć do wyprowadzenia własnego pola. WooCommerce oferuje mnóstwo dostępnych haków do kontrolowania dokładnie tam, gdzie chcesz uzyskać dane wyjściowe. Jeśli nie masz pewności, zajrzyj do plugins/woocommerce/templates/tych plików, a wewnątrz tych plików możesz łatwo znaleźć odpowiedni hak. Możesz również nadpisać szablon i dodać wynik w szablonie, ale zawsze polecam zamiast tego używać hooków.
Jeśli chodzi o mnie, chcę, aby moje niestandardowe pole było wyświetlane w jednym produkcie, w meta div – wzdłuż miejsca, w którym WooCommerce wyświetla SKU i kategorię. Do tego użyję haka woocommerce_product_meta_start. Wewnątrz haczyków (tak jak w przypadku prawie wszystkich haczyków szablonów) możesz uzyskać dostęp do globalnego obiektu post. Będę kierował się tą samą praktyczną zasadą, co przy ratowaniu mojego pola; użyj get_meta()na obiekcie produktu, aby uzyskać moje niestandardowe pole:
Dodanie niestandardowej zakładki i panelu do metabox danych produktu
Jeśli chcesz dodać kolekcję pól niestandardowych, które logicznie należą do siebie, dobrym pomysłem może być pogrupowanie ich na karcie niestandardowej. Aby dodać niestandardową kartę do metaboxu Product data, musimy podpiąć się pod filtr, aby dodać samą kartę, oraz zaczep do wyprowadzania zawartości panelu. Na koniec nadal musimy dodać ten sam haczyk, co powyżej, aby zapisać nasze pola.
Na przykład zamierzam dodać niestandardowy panel o nazwie „Dodatkowe informacje”, w którym chcę dodać wprowadzanie tekstu, pole wyboru i wprowadzanie liczb.
Najpierw filtrujemy woocommerce_product_data_tabsi dodajemy naszą kartę do jej tablicy.
Możemy tu przedstawić kilka przydatnych argumentów. Możesz na przykład użyć „ class“, aby kontrolować widoczność zakładki w zależności od typu produktu. Jeśli go przegapiłeś, sprawdź sekcję o widoczności pola wspomnianą powyżej. Pamiętaj jednak, że na kartach musisz podać klasy jako tablicę, a nie ciąg. Możesz również podać „ priority“, aby zdecydować, gdzie ma się pojawić Twoja karta. Użycie np. 25 spowoduje umieszczenie zakładki zaraz po „Inwentarz”.
Domyślnie twoja karta będzie wyświetlana z ikoną klucza. Niestety nie ma (jak na razie) możliwości kontrolowania go przez filtr. Jeśli jest to dla Ciebie ważne, możesz dodać administracyjny CSS i dodać inną klasę do swojej karty. Oto przegląd dostępnych ikon w WooCommerce.
Wyjście panelu
Następnym krokiem jest podpięcie się woocommerce_product_data_panelsi wyprowadzenie zawartości panelu. Ważną uwagą jest tutaj rozpoczęcie wyjścia z divatrybutem ido tej samej nazwie, którą podałeś jako klucz w kartach (w moim przypadku ‘ additional_info‘). Jeśli chodzi o treść, to zależy od Ciebie – możesz dodać dowolny kod HTML, ale polecam korzystanie z funkcji WooCommerce do wyświetlania pól formularzy. Te same korzyści związane z ukrywaniem lub pokazywaniem pól również będą działać tutaj.
Po zapisaniu powinieneś teraz zobaczyć zakładkę i jej zawartość w Metabox danych produktu (chyba że produkt jest oczywiście produktem zewnętrznym).
Pozostaje tylko zapisać dane wprowadzone w polach niestandardowych, a do tego używamy tego samego procesu, co powyżej:
Uwaga: W WooCommerce istnieje ogólna zasada, zgodnie z którą wszystkie pola wyboru są zapisywane jako „ yes“, jeśli są zaznaczone, lub jako pusty ciąg, jeśli nie są zaznaczone. Postępując zgodnie z regułą WooCommerce i zapisując moje zaznaczone pole wyboru jako „ yes“, zapewnia to, że moje woocommerce_wp_checkbox()działa zgodnie z przeznaczeniem, gdy pobiera bieżącą wartość mojego pola.
Wniosek
W tym poście pokażę, jak dodać niestandardowe pola do metaboxa danych produktów WooCommerce, jak je zapisać, jak kontrolować ich widoczność i prosty przykład wyprowadzania pola w interfejsie użytkownika. Pokazałem również, jak dodać niestandardową kartę do metaboxa i dodać tam swoje pola. Mam nadzieję, że pomogło to w samodzielnej personalizacji WooCommerce!