Как добавить настраиваемые поля и вкладки в метабокс данных о продукте WooCommerce по коду

В этом посте мы узнаем, как добавить ваши настраиваемые метаполя в метабокс данных продукта WooCommerce; как добавить поля, а также как добавить свою собственную вкладку. Мы подробно расскажем о том, как добавлять свои поля, куда их добавлять, как их сохранять и, наконец, как отображать их во внешнем интерфейсе.

Добавление настраиваемых полей в существующие панели

Сначала мы рассмотрим, как добавить поле в существующие панели. Нам нужно зацепиться за два крючка; один для вывода поля и один для сохранения его значения. Первый хук зависит от того, на какой вкладке вы хотите отобразить свое поле.

Метабокс данных о продукте

Имейте в виду, что видимость вкладки зависит от типа продукта. Например, вкладка «Общие» удаляется, когда вы переключаетесь на сгруппированный тип продукта. Таким образом, вы должны не только подумать, где ваши настраиваемые поля логически вписываются, но и рассмотреть панель, которая видна для всех желаемых типов продуктов. список самых общих доступных хуков:

• woocommerce_product_options_general_product_data("Общий")
• woocommerce_product_options_inventory_product_data(«Инвентаризация»)
• woocommerce_product_options_shipping("Перевозки")
• woocommerce_product_options_related(«Связанные продукты»)
• woocommerce_product_options_attributes(«Атрибуты»)
• woocommerce_product_options_advanced("Передовой")

Добавление формы ввода

Что касается вывода ввода формы, вы можете вручную вывести ввод HTML формы (например <input type="text"...>, ), но WooCommerce предлагает простые функции для легкого добавления полей любых типов. Я рекомендую использовать их. Ознакомьтесь с обзором всех возможных типов ввода в WooCommerce здесь и узнайте, какие аргументы вы можете передать для управления выводом.

Что касается этого урока, я собираюсь добавить простой текстовый ввод на вкладке инвентаря для записи количества предметов в каждом пакете. Что касается ключа, под которым сохраняется ваше пользовательское значение, всегда добавляйте перед ним символ подчеркивания «_», в моем случае это будет «_number_in_package»:

Сохраните и отредактируйте продукт. Вы должны увидеть, что ваше пользовательское поле появилось в нижней части вкладки Inventory:

Внизу добавлено произвольное поле «Количество в упаковке»

Примечание о видимости полей в зависимости от типа продукта

Метабокс данных продукта WooCommerce поставляется с большим количеством Javascript, который скрывает и показывает как поля, так и вкладки/панели. Вы можете легко использовать это, если хотите, чтобы ваше поле отображалось только для определенных типов продуктов, указав определенные имена классов для вашего поля.

Допустим, вы хотите, чтобы ваше поле отображалось только в том случае, если продукт имеет тип простого продукта, или вы хотите, чтобы оно было скрыто, если продукт является переменным продуктом. WooCommerce прислушивается к определенным именам классов, таким как show_if_<producttype>и hide_if_<producttype>, и вы можете комбинировать несколько классов, чтобы точно настроить, когда ваше поле должно быть скрыто или видно.

Например, если я хочу, чтобы мое поле было видно только для простых продуктов; Я добавлю это в wrapper_classполе ввода:

Вы также можете установить wrapper_class, например, ‘ show_if_simple show_if_grouped‘, чтобы поле отображалось только для продуктов, которые являются либо простыми, либо сгруппированными. Попробуйте сами!

Сохранение пользовательского поля

На данный момент все, что вы вводите в свое поле, не сохраняется. Давайте сделаем это дальше. Мы подключаемся woocommerce_process_product_metaи сохраняем значение из глобального PHP $_POST(отправка формы).

Позвольте мне быстро объяснить приведенный выше код. Вы можете просто сохранить поле, используя update_post_meta(), но в более поздних версиях WooCommerce обработка метаданных продукта была значительно улучшена. Пока у вас есть объект продукта (который мы получаем при вызове wc_get_product()с идентификатором сообщения), вы можете легко манипулировать любой информацией о продукте в объекте и, наконец, вызывать save()один раз для обновления любых изменений. Это очень полезно, особенно если вы хотите сохранить несколько полей — в этом случае вам не нужно запускать операции с базой данных для каждого поля, только в последний раз, когда вы вызываете save().

Используйте update_meta_data()на объекте для всех метаданных, которые вы хотите сохранить.

С помощью вышеуказанной функции ваше поле теперь должно сохраняться при его обновлении в продукте редактирования! Также обратите внимание, что при использовании функций WooCommerce для вывода поля вам не нужно вручную получать значение вашего поля перед выводом поля — это полностью автоматически.

Вывод вашего пользовательского поля в интерфейсе

Первый шаг — выяснить, какой хук вы хотите использовать для вывода вашего пользовательского поля. WooCommerce предлагает множество доступных крючков для управления тем, где именно вы хотите получить результат. Если вы не уверены, взгляните на plugins/woocommerce/templates/эти файлы, и вы легко сможете найти подходящий хук. Вы также можете переопределить шаблон и добавить вывод в шаблон, но я всегда рекомендую вместо этого использовать хуки.

Что касается меня, я хочу, чтобы мое пользовательское поле выводилось в одном продукте внутри мета-дива — вместе с тем, где WooCommerce выводит SKU и категорию. Для этого я буду использовать крючок woocommerce_product_meta_start. Внутри хуков (как и почти во всех хуках шаблонов) вы можете получить доступ к глобальному объекту записи. Я буду следовать тому же эмпирическому правилу, что и при спасении своего поля; используйте get_meta()объект продукта для получения моего пользовательского поля:

Добавление пользовательской вкладки и панели в метабокс данных о продукте

Если вы хотите добавить набор настраиваемых полей, которые логически связаны друг с другом, было бы неплохо сгруппировать их внутри настраиваемой вкладки. Чтобы добавить пользовательскую вкладку в метабокс данных о продукте, нам нужно подключиться к фильтру для добавления самой вкладки и к крючку для вывода содержимого панели. Наконец, нам все еще нужно добавить тот же хук, что и выше, для сохранения наших полей.

Например, я собираюсь добавить пользовательскую панель под названием «Дополнительная информация», где я хочу добавить текстовый ввод, флажок и числовой ввод.

Во- первых, мы фильтруем woocommerce_product_data_tabsи добавляем нашу вкладку в его массив.

Здесь мы можем привести несколько полезных аргументов. Например, вы можете использовать ‘ class‘ для управления видимостью вкладки в зависимости от типа продукта. Если вы пропустили это, ознакомьтесь с разделом о видимости полей, упомянутым выше. Но имейте в виду, что во вкладках вам нужно предоставлять классы в виде массива, а не строки. Вы также можете указать ‘ priority‘, чтобы решить, где должна отображаться ваша вкладка. Использование, например, 25 поместит вкладку сразу после «Инвентаризация».

По умолчанию ваша вкладка будет отображаться с гаечным ключом в качестве значка. К сожалению, (на данный момент) нет возможности управлять им через фильтр. Если это важно для вас, вы можете добавить административный CSS и указать другой класс для своей вкладки. Вот обзор доступных иконок в WooCommerce.

Выход панели

Следующий шаг — подключение woocommerce_product_data_panelsи вывод содержимого вашей панели. Важным примечанием здесь является начало вывода divс idатрибутом с тем же именем, которое вы указали в качестве ключа на вкладках (в моем случае ‘ additional_info‘). Что касается содержимого, то это зависит от вас — вы можете добавить любой HTML-код, который хотите, но я рекомендую использовать функции WooCommerce для вывода полей формы. Те же преимущества для скрытия или отображения полей будут работать и здесь.

После сохранения вы должны увидеть вкладку и ее содержимое в метабоксе данных продукта (если, конечно, продукт не является внешним продуктом).

Все, что осталось, это сохранить данные, введенные в ваши настраиваемые поля, и для этого мы используем тот же процесс, что и выше:

Примечание. В WooCommerce существует общее правило, согласно которому все флажки сохраняются как «yes», если они отмечены, или как пустая строка, если они не отмечены. Следуя правилу WooCommerce и сохраняя мой отмеченный флажок как «yes», это гарантирует, что моя woocommerce_wp_checkbox()работа работает так, как предполагалось, когда она извлекает текущее значение моего поля.

Вывод

В этом посте я покажу, как добавить ваши настраиваемые поля в метабокс данных о продукте WooCommerce, как их сохранить, как контролировать их видимость, а также простой пример вывода вашего поля во внешнем интерфейсе. Я также показал, как добавить пользовательскую вкладку в метабокс и добавить туда свои поля. Я надеюсь, что это помогло вам настроить WooCommerce самостоятельно!