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

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

Часто возникает необходимость добавить уникальный блок информации, дополнительное описание или кастомный функционал на страницу товара в WooCommerce без изменений шаблонов темы. Прямое редактирование файлов шаблонов неудобно, сложно масштабируется и не безопасно при обновлениях. Лучший способ — использовать хуки WooCommerce, которые позволяют вставлять код в нужные места.

Если у вас нет опыта работы с хуками, то вы можете столкнуться с проблемами: неверное расположение контента, конфликт с другими плагинами или некорректное отображение. Правильное понимание структуры хуков и их приоритетов решит эти вопросы.

Как найти нужный хук для добавления контента на страницу товара

WooCommerce использует множество экшенов и фильтров на странице товара. Чтобы определить подходящий хук:

• Откройте файл content-single-product.php из папки woocommerce/templates вашей темы или плагина.
• Изучите вызовы do_action(), например woocommerce_before_single_product_summary, woocommerce_single_product_summary, woocommerce_after_single_product_summary.
• Используйте плагин Query Monitor или добавьте дебаг-вывод в функцию для определения текущих хуков.

Например, чтобы добавить контент после цены, используйте хук woocommerce_single_product_summary с приоритетом 25 (цена выводится на приоритете 10).

Пошаговое решение: добавляем блок с информацией после цены товара

1. В файл functions.php вашей дочерней темы или в плагин вставьте следующий код:

function wpwp_add_custom_info_after_price() {
    echo '<div class="custom-info" style="margin-top:10px; font-weight:bold; color:#0073aa;">Дополнительная информация о товаре</div>';
}
add_action('woocommerce_single_product_summary', 'wpwp_add_custom_info_after_price', 25);

2. Сохраните изменения и обновите страницу товара. Блок "Дополнительная информация о товаре" появится сразу после цены.

3. Для более сложного вывода можно использовать глобальную переменную $product для доступа к данным товара:

function wpwp_add_stock_status_after_price() {
    global $product;
    if ( ! $product ) return;
    if ( $product->is_in_stock() ) {
        echo '<div style="color:green;">Товар в наличии</div>';
    } else {
        echo '<div style="color:red;">Товар закончился</div>';
    }
}
add_action('woocommerce_single_product_summary', 'wpwp_add_stock_status_after_price', 25);

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

• Очистите кэш сайта и браузера, если используете кэширование.
• Зайдите на любую страницу товара и убедитесь, что ваш блок отображается там, где нужно (после цены).
• Проверьте на разных товарах и в разных состояниях (в наличии/нет в наличии).
• Откройте инструменты разработчика браузера (F12) для проверки, что HTML-код добавлен корректно и нет ошибок JS.

Частые ошибки и как их исправить

• Контент не отображается: возможно, хук указан неправильно или приоритет не подходит. Проверьте имя хука в шаблоне WooCommerce, используйте отладку.
• Ошибка "Call to undefined function": код добавлен вне PHP-тегов или в неправильном месте.
• Конфликты стилей: добавленный контент перекрывается стилями темы. Используйте уникальные классы и CSS для изоляции.
• Код добавлен в родительскую тему: при обновлении изменения исчезнут. Используйте дочернюю тему или плагин для кастомизации.

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

• Не добавляйте тяжелую логику или запросы к базе данных в функции, вызываемые на хуках страницы товара — это замедлит загрузку.
• Используйте wp_cache_get() и wp_cache_set() для кэширования вычисляемых данных.
• Всегда проверяйте существование глобальных переменных перед использованием: if ( ! $product ) return;.
• Избегайте вывода данных напрямую без экранирования. Для безопасного вывода используйте esc_html() или esc_attr().

Сравнение способов добавления контента на страницу товара WooCommerce