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

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

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

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

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

• woocommerce_before_single_product — перед началом вывода товара;
• woocommerce_before_single_product_summary — перед блоком с картинкой и описанием;
• woocommerce_single_product_summary — внутри основного блока с описанием и ценой;
• woocommerce_after_single_product_summary — после основного содержимого;
• woocommerce_after_single_product — в самом конце страницы товара.

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

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

1. Создаем функцию для вывода контента

function wpwp_custom_product_message() {
    echo '<div class="wpwp-custom-message" style="padding: 15px; margin-top: 20px; background: #f9f9f9; border: 1px solid #ddd;">';
    echo '<p>Обратите внимание: доставка бесплатная при заказе от 5000 рублей.</p>';
    echo '<button onclick="alert(\'Спасибо за интерес!\')" style="padding: 10px 20px; background-color: #0073aa; color: #fff; border: none; cursor: pointer;">Узнать подробнее</button>';
    echo '</div>';
}

2. Подключаем функцию к нужному хуку

Допустим, хотим вывести сообщение сразу после цены и кнопки «В корзину» — используем хук woocommerce_single_product_summary с приоритетом 35 (стандартные элементы идут с приоритетами 10–30):

add_action('woocommerce_single_product_summary', 'wpwp_custom_product_message', 35);

3. Добавляем код в functions.php или собственный плагин

Вставьте оба блока кода в файл functions.php активной темы или лучше в отдельный плагин для удобства поддержки.

Как проверить, что добавленный контент отображается

• Откройте любую страницу товара на сайте.
• Найдите под ценой и кнопкой «В корзину» блок с текстом «Обратите внимание: доставка бесплатная при заказе от 5000 рублей» и кнопку «Узнать подробнее».
• Нажмите кнопку — должно появиться alert-сообщение.
• Если контент не отображается, проверьте подключение функции и нет ли конфликтов других хуков.

Частые ошибки при использовании хуков WooCommerce и как их исправить

• Неправильный приоритет хука. Если контент не отображается там, где нужно, попробуйте изменить приоритет (например, 40 вместо 35).
• Опечатки в названии функции или хука. Проверьте правильность написания, используйте автодополнение в IDE.
• Функция не подключена. Убедитесь, что код находится в активной теме или плагине.
• Кэширование. Если используете плагин кэширования, очистите кеш после внесения изменений.
• Конфликты с другими плагинами. Отключите плагины поочередно для выявления конфликтов.

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

• Всегда экранируйте вывод данных, если данные берутся из пользовательского ввода. В данном примере статический текст, поэтому это не критично.
• Для сложного HTML используйте буферизацию вывода ob_start() и ob_get_clean(), если нужно возвращать контент, а не выводить.
• Не добавляйте тяжелые запросы в хуки вывода без кеширования — это замедлит загрузку страницы.
• Для повторного использования и поддержки лучше создавать отдельные функции с уникальными названиями.

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