Добавление произвольных полей в товарах Woocommerce. Большая инструкция

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

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

Продолжим. Вот такая штука у нас получиться.

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

Теория. Необходимые хуки и функции

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

Нужные хуки

Хуки для добавление полей на вкладку

Для добавления полей в нужную вкладку, в нашем случае это вкладка «Основные» используется хук

Если необходимо подключить поле в другой вкладке, то можно использовать такие хуки

Хуки для сохранения значения полей

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

Это базовый хук, который позволяет сохранять значения произвольных полей для простых товаров

Хуки для вывода полей

Поля — дело индивидуальное для каждого товара. А товар в Woocomerce — это запись, соответственно можно выводить товары и просто редактируя нужный файл. Но это не наш метод. А потому будем использовать хуки. Например, используем хук для вывода поля перед и после кнопки «Добавить в корзину».

Перед кнопкой

После кнопки

Нужные функции

Согласно API Woocommerce существуют такие функции добавления полей

  • Простое поле — woocommerce_wp_text_input();
  • Область текста — woocommerce_wp_textarea_input();
  • Скрытое поле — woocommerce_wp_hidden_input();
  • Поле чекбокса — woocommerce_wp_checkbox();
  • Выпадающий список — woocommerce_wp_select();
  • Радиокнопки — woocommerce_wp_radio();
Более подробно посмотреть функции можно в документации

Вот эти функции и будем использовать. Но это еще не все, для большего эффекта, напишем собственные поля, независимые от API.

Практика. Создаем, сохраняем и выводим произвольные поля

Создание полей

Итак, начнем. Создаем функцию и прикручиваем ее к нужному хуку.

Пока ничего сложного. Просто функция, которая ничего не делает. Блок с классом options_group позволяет визуально разделять группы полей.

Текстовое поле

Обратите внимание, на два момента.

Во-первых, атрибут custom_attributes позволяет передать в функцию любые дополнительные параметры. В данном конкретно случае — это параметр определяет обязательное поле.

Во-вторых, использование атрибута desc_tip, позволяет выводить описание поля не как обычно, а во всплывающей подсказке. Иногда это очень удобно. Данный атрибут работает с любым типом полей.

Числовое поле

Это то же простое текстовое поле, но с типом number. Тип из арсенала HTML5 позволяет ограничить ввод данных только числами.

Можно определить произвольные атрибуты: шаг, минимальное и максимальное значение. В нашем случае, атрибут step — это значение по умолчанию, а min — минимальное значение. То есть ожидается ввод любого положительного числа

Текстовая область

Ничего сложно. В конкретном случае еще переданы дополнительные параметры (общие для все типов полей):

  • class — позволяет добавлять к полям произвольные класс;
  • style — добавление произвольных стилей (в данном случае задана ширина и цвет фона);
  • wrapper_class — произвольный класс для обертки всего поля;
  • name — собственный параметр name.
Внимание! Это относиться ко всем типам полей. Напомню, в глобальную переменную $_POST приходят значения поля name и при изменении параметра name на собственный, ловить надо именно это значение, а не id Иначе, просто не сохраниться значение поля.

Выпадающий список. Select

Добавляется параметр options, в который передается массив значений.

Поле с чекбоксом. Checkbox

Просто поле с галочкой. Возвращает Да/Нет.

Радиокнопки. Radio buttons

Примерно тоже самое, что и селект, только внешний вид разный. Хотя селектом пользоваться иногда удобнее.

Произвольное поле. Выбор товаров с поиском

Аналог поля на вкладке Сопутствующие Апсел или Кроссел. Вводите первые три буквы из названия товара и происходит автоматический поиск. Находит все товары, кроме текущего. Удобная вещь иногда.

Произвольная группа полей

Просто группа из трех полей. В данном случае, реальный пример для ввода дополнительных размеров, которое используется в одном из моих проектов.

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

Если коротко, то можно создать любое поле. Все зависит только от ваших желаний и умений.

Сохранение полей

Повторюсь. Для сохранения полей используем хук woocommerce_process_product_meta. А дальше все просто — выдергиваем нужное значение из переменной $_POST, если там что-то есть то записываем в поле. Подробно расписывать не буду, вроде и так понятно и весь код откомментирован.

Код не идеальный, конечно, но рабочий. Есть идеи по улучшению, пишите в комментариях.

Вот так должно получиться в итоге

создание произвольных полей в Woocommerce

Вывод полей

Вывод значений производится через штатную функцию самого WordPress get_post_meta(). Примерно так

А конкретно по примерным полям из статьи, то можно вывод подвесить в нужном месте карточки товара.

Перед кнопкой Добавить в корзину

Выведем текстовое, цифровое и область текста.

Самый простой вариант

Вариант с проверками и форматированием

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

Вывод значений полей перед кнопкой Добавить в корзину

После кнопки Добавить в корзину

Выводим заначения селекта, радиокнопки и чека. Данные поля работают по условию и выводят что одно.

Пример кода (написано на коленке для примера, но все работает)

В итоге получаем.
Были такие значения в админке

Вывод произвольных полей в Woocomerce

И получаем, такой вывод

Изменяем значения

Получаем

Вывод группы полей во вкладке Дополнительная информация

Используем хук woocommerce_product_additional_information и получаем такой код

Вот так это выглядит

Вывод выбранных товаров перед вкладками с информацией

Ну и самое вкусное: выведем список выбранных товаров перед вкладками. Зачем так делать не занаю, но вдруг кому пригодиться.

Итак, наше поле возвращает нам массив ID товаров, значит нам достаточно запихать сей массив в функцию wc_get_products и вывести нужные товары. Примерно так, выводим список заголовков выбранных товаров.

Код не идеальный, надо конечно и проверки сделать, но все работает. Получим такой вот список выбранных товаров

Резюме

В статье разобрал создание и вывод различных типов полей для простых товаров в Woocommerce.  Как с использованием штатного API так и создание своих собственных полей и групп полей. Разжевал все очень подробно. Весь код в статье рабочий и проверенный, хоть и не идеальный.

На этом все, если остались вопросы, пишите в комментариях, не забудьте поделиться статьей в соцсетях. Всем успехов, пока-пока!

10 комментариев

  1. Данил 02.10.2017
    • Артем 02.10.2017
      • Данил 04.10.2017
        • Артем 04.10.2017
          • Данил 04.10.2017
          • Артем 04.10.2017
  2. Андрей 06.10.2017
  3. Александр 08.10.2017
    • Артем 09.10.2017

Оставить комментарий

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

Подписывайся!

Подписывайся!

Подписывайтесь на новости сайта, чтобы ничего не пропустить

Спасибо, что подписались!