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

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

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

Пошаговое решение: добавление контента с помощью хуков

1. Выбор подходящего хука

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

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

Для вывода дополнительного текста под описанием товара чаще всего используется woocommerce_single_product_summary с приоритетом после цены и кнопки.

2. Пример кода добавления блока с текстом

add_action('woocommerce_single_product_summary', 'my_custom_product_text', 25);
function my_custom_product_text() {
    echo '<div class="my-custom-text" style="margin-top:15px; padding:10px; background:#f9f9f9; border:1px solid #ddd;">';
    echo '<p>Дополнительная информация о товаре: бесплатная доставка при заказе от 3000 рублей.</p>';
    echo '</div>';
}

Приоритет 25 гарантирует, что текст появится после цены и кнопки «В корзину» (у них обычно 10-20).

3. Вывод кастомного HTML блока с изображением и ссылкой

add_action('woocommerce_single_product_summary', 'my_custom_html_block', 30);
function my_custom_html_block() {
    echo '<div class="my-html-block" style="margin-top:20px;">';
    echo '<a href="https://example.com/promo" target="_blank" rel="noopener noreferrer">';
    echo '<img src="https://example.com/promo-banner.jpg" alt="Промо" style="max-width:100%; height:auto;">';
    echo '</a>';
    echo '</div>';
}

Как проверить, что решение сработало

• Очистите кэш сайта и браузера (если используется кеширование).
• Откройте страницу любого товара на фронтенде.
• Проверьте, что блок с текстом или HTML отображается там, где задан приоритет хука.
• В инспекторе браузера найдите div.my-custom-text или div.my-html-block.
• Если не отображается, проверьте, что ваш код добавлен в functions.php дочерней темы или в плагин.

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

• Неправильный приоритет хука. Если приоритет слишком низкий (меньше 10), блок может вывестись до цены и кнопки, что нежелательно.
• Добавление кода в неподходящее место. Код должен быть в functions.php активной темы или в плагине, иначе не сработает.
• Кэширование. Если есть кэш на стороне сервера или плагина, изменения могут не отображаться сразу.
• Конфликты с другими хуками. Другие плагины или тема могут менять структуру страницы, перекрывая ваши изменения.
• Отсутствие проверки условий. Если хотите показывать блок только для определённых категорий или товаров, нужно добавить условные проверки.

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

• Не используйте echo с пользовательским вводом без esc_html() или esc_url() для защиты от XSS.
• Минимизируйте вывод дополнительного HTML, чтобы не перегружать страницу.
• Для сложной логики фильтруйте по ID товара или категориям, чтобы не загружать лишние данные на всех страницах.
• Если нужно добавить динамический контент (например, данные из базы), кешируйте результат с помощью transient API.

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