Custom fields wordpress woocommerce

Собственные поля в товарах Woocommerce

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

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

Существуют плагины для добавление пользовательских полей в Woocommerce но мы решим задачу без них.

Эта статья не предназначена для новичков поэтому, если вы совсем не знакомы с программированием под WordPress, лучше воспользуйтесь готовыми плагинами.

Так же обратите внимание, что сейчас мы добавляем собственное поле к простому товару, как добавить поле к вариативному товару я расскажу в следующий раз.

Итак, нам нужно добавить поле «Штрихкод» к товару, логичто буудет его добавить под поле «Артикул» в вкладке «Запасы».

Добавление произвольного поля к товарам в WooCommerce

WooCommerce так же как и WordPress предоставляет API с помощью которого мы можем подключиться к любому событию жизненого цикла страницы.

В нашем случае нам нужно использовать один из хуков для вывода полей на вкладке «Запасы»:

woocommerce_product_options_sku // после артикула

woocommerce_product_options_stock // перед управлением запасами

woocommerce_product_options_stock_fields // после управлением запасами

woocommerce_product_options_stock_status // после статуса остатка

woocommerce_product_options_sold_individually // после опции Продавать индивидуально

woocommerce_product_options_inventory_product_data // после основного контента вкладки

Мы определились что будем добавлять наше поле штрихкод после артикула, это будет обычное текстовое поле. Идем в файл functions.php нашей темы и добавляем:

Атрибут custom_attributes позволяет передать в функцию любые дополнительные параметры (например обязательное ли поле). В нашем случае мы не передаем ничего.

Теперь поле появилось:

Кстати. Мы можем вставить не только текстовое поле, но и числовое, текстовую область, выпадающий список (select), поле с чекбоксом (checkbox), радиокнопки (radio buttons), а так же произвольные поля.

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

Он сохранит значения наших собственных полей для простых товаров, для этого в functions.php добавим:

Вывод произвольного поля в шаблоне

Например, выведем значения нашего поля в карточке товара так же под значением артикула, для этого в шаблоне карточки товара после вывода артикула вставим наш код:

Проверяем, все работает:

Если не хотите править шаблон, то можно вывести это поле с помощью хуков. Напрмер, мы хотим вывести наше поле над кнопкой «В корзину», для этого используем хук woocommerce_before_add_to_cart_form добавив в functions.php следующий код:

Результат будет таким:

Но я обычно делаю это в шаблоне.

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

В этой статье показано как добавить такое же поле «Штрихкод», но к вариативному товару.

WordPress. Связывание записей разного типа.

Добавить поиск по собственным полям в WordPress

Источник

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

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

• Теория. Необходимые хуки и функции
• Хуки на вкладках
• Вкладка «Основные»
• Вкладка «Доставка»
• Вкладка «Запасы»
• Вкладка «Сопутствующие»
• Вкладка «Атрибуты»
• Вкладка «Дополнительно»
• Вкладка «Вариации»
• Хуки для сохранения значения полей
• Хуки для вывода полей
• Функции вывода полей
• Практика. Создаем, сохраняем и выводим произвольные поля
• Создание полей
• Текстовое поле
• Числовое поле
• Текстовая область
• Выпадающий список. Select
• Поле с чекбоксом. Checkbox
• Радиокнопки. Radio buttons
• Произвольное поле. Выбор товаров с поиском
• Произвольная группа полей
• Полный код со всеми видами полей, в том числе и произвольными
• Сохранение полей
• Вывод полей
• Перед кнопкой Добавить в корзину
• После кнопки Добавить в корзину
• Вывод группы полей во вкладке Дополнительная информация
• Вывод выбранных товаров перед вкладками с информацией
• Вывод значения полей на страницах архивов
• Группировка произвольных полей на произвольной вкладке
• Создание произвольной вкладки
• Изменение иконки вкладки
• Добавление содержимого вкладки
• Кейс. Дополнительные поля на вкладке «Основные»
• Задача
• Решение
• Первое. Создаем поля
• Второе. Вывод полей
• Третье. Результат
• Кейс. Произвольное текстовое поле с редактором TinyMCE
• Задача
• Решение
• Первое. Создаем новое поле
• Второе. Выводим значение
• Третье. Результат
• Заключение

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

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

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

Хуки на вкладках

Вкладка «Основные»

На вкладке «Основные» можно использовать несколько хуков.

Вкладка «Доставка»

Данная вкладка активна только для физических товаров. Все хуки на вкладке «Доставка».

Вкладка «Запасы»

Все хуки на вкладке «Запасы».

Вкладка «Сопутствующие»

Все хуки на вкладке «Сопутствующие».

Вкладка «Атрибуты»

Все хуки на вкладке «Атрибуты».

Вкладка «Дополнительно»

Все хуки на вкладке «Дополнительно».

Вкладка «Вариации»

Вкладка видна только для вариативных товаров. Все хуки на вкладке «Вариации».

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

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

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

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

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

Поля — дело индивидуальное для каждого товара. Товар в 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

Для сохранения полей используем хук woocommerce_process_product_meta .

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

Другой способ сохранения полей через методы самого WooCommerce.

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

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

Вывод полей

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

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

Тоже самое, только используя методы WooCommerce

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

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

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

Тоже самое, только используя методы WooCommerce

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

Тоже самое, только используя методы WooCommerce

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод значения полей на страницах архивов

Зачем выводить эти данные в ленте товаров не знаю, но вдруг нужно. Для вывода на витрине, странице рубрик, похожих и т.д. требуется использовать соответствующие хуки. Для примера

Перед ценой

После цены

Хуков много, можно по разному вывести при необходимости.

Группировка произвольных полей на произвольной вкладке

Любая вкладка в метабоксе WooCommerce состоит из двух частей:

• сама вкладка
• содержание вкладки

Создание произвольной вкладки

Все вкладки формируются в классе WC_Meta_Box_Product_Data . Для добавления новой вкладки воспользуемся фильтром woocommerce_product_data_tabs .

Изменяя атрибут priority можно изменять положение вкладки в общем списке. Чем больше значение, тем ниже вкладка будет располагаться.

Атрибут class позволяет добавить к вкладке любой класс. Но используя стандартные классы WooCommerce, можно управлять поведением вкладки.

Все классы для управления поведением

• show_if_simple — показывать только для простых товаров
• show_if_variable — показывать только для вариативных товаров
• show_if_grouped — показывать только для сгруппированных товаров
• show_if_external — показывать только для внешних товаров
• hide_if_simple — скрывать для простых товаров
• hide_if_variable — скрывать для вариативных товаров
• hide_if_grouped — скрывать для сгруппированных товаров
• hide_if_external — скрывать для внешних товаров

к содержанию

Изменение иконки вкладки

Для иконки можно использовать что угодно. SVG, просто картинки или существующие шрифты Dashicons или набор самого WooCommerce.

Для изменения иконки достаточно добавить немного стилей:

к содержанию

Добавление содержимого вкладки

Для добавления содержимого используется тот же принцип что и при добавлении на любую другую вкладку. Только используется хук woocommerce_product_data_panels .

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

Получаем такой вид

Важно! ID обертки полей вкладки должен соответствовать атрибуту target , который указан при регистрации вкладки.

А дальше уже стандартно. Сохраняем значения и выводим там где требуется.

Для сохранения и вывода рекомендую использовать методы самого WooCommerce.

Кейс. Дополнительные поля на вкладке «Основные»

Задача

• Добавить дополнительные поля на вкладке Основные
• Вывести значения полей в виде кнопки на странице товара и страницах архивов

Решение

Первое. Создаем поля

Это самое простое. Нужна кнопка, которую можно сформировать из двух полей:

Второе. Вывод полей

Для вывода значений на странице товара используем хук woocommerce_before_add_to_cart_form , на страницах архивов — woocommerce_after_shop_loop_item с приоритетом.

Третье. Результат

• Страница архивов
• Страница товара
• Новые поля в админке

к содержанию

Кейс. Произвольное текстовое поле с редактором TinyMCE

Задача

• создать произвольное текстовое поле с редактором TinyMCE
• вывести значение поля во вкладке «Детали» на странице товара

Решение

Первое. Создаем новое поле

Второе. Выводим значение

Третье. Результат

• Вид поля в админке
• Значение поля на странице товара

к содержанию

Заключение

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

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

Источник