WooCommerce — мощный инструмент для создания интернет-магазина на WordPress. Часто возникает необходимость добавить дополнительные поля к товарам, например, для сбора уникальной информации или отображения дополнительных характеристик. В этой статье расскажу, как добавить кастомные поля в карточку товара WooCommerce без использования плагинов, используя только код и стандартные хуки WooCommerce.
Почему стоит добавлять кастомные поля вручную?
Использование плагинов для кастомных полей зачастую упрощает задачу, но приводит к зависимости, усложняет поддержку и иногда тормозит сайт. Добавление полей через код даёт полный контроль, минимизирует нагрузку и позволяет создать именно то, что нужно, без лишних функций.
Кроме того, кодовое решение проще интегрировать с кастомными темами и другими доработками.
Основные хуки WooCommerce для добавления кастомных полей
Для добавления кастомных полей нам понадобятся три ключевых хука:
woocommerce_product_options_general_product_data— для вывода поля в админке на странице редактирования товара;woocommerce_process_product_meta— для сохранения значения поля при сохранении товара;woocommerce_single_product_summary— для вывода поля на странице товара на фронтенде.
Рассмотрим подробно, как использовать каждый из них.
Добавляем кастомное поле в админке WooCommerce
Допустим, нам нужно добавить текстовое поле "Производитель" (manufacturer). Для этого используем хук woocommerce_product_options_general_product_data, который позволяет добавить новые поля в общий блок данных товара.
add_action('woocommerce_product_options_general_product_data', 'wpcatalog_add_custom_manufacturer_field');
function wpcatalog_add_custom_manufacturer_field() {
woocommerce_wp_text_input( array(
'id' => '_wpcatalog_manufacturer',
'label' => __('Производитель', 'woocommerce'),
'desc_tip' => 'true',
'description' => __('Введите имя производителя товара.', 'woocommerce')
) );
}
Функция woocommerce_wp_text_input — удобная функция WooCommerce для добавления текстового поля с описанием и подсказкой.
Сохраняем значение кастомного поля при сохранении товара
Чтобы данные поля сохранялись, подключаемся к хуку woocommerce_process_product_meta и сохраняем значение в мета-данные товара.
add_action('woocommerce_process_product_meta', 'wpcatalog_save_custom_manufacturer_field');
function wpcatalog_save_custom_manufacturer_field($post_id) {
$manufacturer = isset($_POST['_wpcatalog_manufacturer']) ? sanitize_text_field($_POST['_wpcatalog_manufacturer']) : '';
update_post_meta($post_id, '_wpcatalog_manufacturer', $manufacturer);
}
Обратите внимание на использование sanitize_text_field для безопасности и корректного сохранения данных.
Выводим кастомное поле на странице товара
Чтобы показать информацию о производителе на странице товара, используем хук woocommerce_single_product_summary, который отвечает за вывод основных элементов карточки товара.
add_action('woocommerce_single_product_summary', 'wpcatalog_show_custom_manufacturer_field', 25);
function wpcatalog_show_custom_manufacturer_field() {
global $product;
$manufacturer = get_post_meta($product->get_id(), '_wpcatalog_manufacturer', true);
if (!empty($manufacturer)) {
echo '<p class="product-manufacturer"><strong>' . __('Производитель:', 'woocommerce') . '</strong> ' . esc_html($manufacturer) . '</p>';
}
}
Значение выводится в отдельном параграфе с классом product-manufacturer, чтобы можно было удобно стилизовать его в CSS темы.
Добавление других типов полей: селект, чекбокс, дата
Кроме текстовых полей, WooCommerce поддерживает и другие типы, например селект или чекбокс. Например, добавим поле "Страна производства" с выбором из списка.
add_action('woocommerce_product_options_general_product_data', 'wpcatalog_add_country_select_field');
function wpcatalog_add_country_select_field() {
woocommerce_wp_select( array(
'id' => '_wpcatalog_country',
'label' => __('Страна производства', 'woocommerce'),
'options' => array(
'' => __('Выберите страну', 'woocommerce'),
'ru' => 'Россия',
'cn' => 'Китай',
'us' => 'США',
'de' => 'Германия'
)
) );
}
add_action('woocommerce_process_product_meta', 'wpcatalog_save_country_select_field');
function wpcatalog_save_country_select_field($post_id) {
$country = isset($_POST['_wpcatalog_country']) ? sanitize_text_field($_POST['_wpcatalog_country']) : '';
update_post_meta($post_id, '_wpcatalog_country', $country);
}
add_action('woocommerce_single_product_summary', 'wpcatalog_show_country_select_field', 26);
function wpcatalog_show_country_select_field() {
global $product;
$country = get_post_meta($product->get_id(), '_wpcatalog_country', true);
$countries = array(
'ru' => 'Россия',
'cn' => 'Китай',
'us' => 'США',
'de' => 'Германия'
);
if (!empty($country) && isset($countries[$country])) {
echo '<p class="product-country"><strong>' . __('Страна производства:', 'woocommerce') . '</strong> ' . esc_html($countries[$country]) . '</p>';
}
}
Так можно легко расширять карточку товара любыми полями.
Советы по безопасности и производительности
При работе с кастомными полями важно всегда фильтровать и валидировать данные, поступающие из формы, чтобы избежать XSS и других уязвимостей. Используйте функции sanitize_text_field, esc_html и другие, соответствующие типу данных.
Также не добавляйте слишком много полей, чтобы не перегружать интерфейс и базу данных. Если требуется много настроек, рассмотрите создание отдельного мета-бокса с помощью add_meta_box.
Использование плагинов WPShop для оптимизации работы с кастомными полями
Если вы хотите более гибкое управление кастомными полями, можно обратить внимание на плагины из магазина WPSHOP. Например, плагин Clearfy Pro помогает оптимизировать работу WooCommerce и WordPress в целом, а Expert Review позволит добавить отзывы с дополнительными полями и структурированными данными.
Но для базовых задач, как в данной статье, кодовый подход — самый быстрый и надёжный.