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

Почему важно использовать хуки в WooCommerce для кастомизации страниц товара

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

Диагностика: как определить, куда вставить дополнительный контент

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

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

• Включите режим отладки на сайте, добавив define('WP_DEBUG', true); и define('SCRIPT_DEBUG', true); в wp-config.php.
• Используйте плагин Query Monitor или плагин для отображения хуков, например Simply Show Hooks.
• Изучите шаблон content-single-product.php в WooCommerce или документацию — там отмечены все основные хуки.

Основные хуки для добавления содержимого на страницу товара

Вот список наиболее полезных хуков, куда можно добавить свой код:

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

Пример: добавление текстовой заметки под названием товара

add_action('woocommerce_single_product_summary', 'wpwp_custom_product_note', 6); 
function wpwp_custom_product_note() {
    echo '<p style="color: #0073aa; font-weight: bold;">Обратите внимание: бесплатная доставка при заказе от 5000 руб.</p>';
}

Здесь 6 — приоритет, чтобы вставить заметку сразу после заголовка (который имеет приоритет 5).

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

Шаг 1. Создайте функцию с вашим контентом

function wpwp_add_rating_review_link() {
    global $product;
    $rating_count = $product->get_rating_count();
    if ( $rating_count > 0 ) {
        echo '<div class="wpwp-rating-review" style="margin-top:15px;">';
        echo 'Рейтинг товара: ' . wc_get_rating_html( $product->get_average_rating() );
        echo ' <a href="#reviews">Посмотреть отзывы (' . $rating_count . ')</a>';
        echo '</div>';
    }
}

Шаг 2. Привяжите функцию к хуку

add_action('woocommerce_single_product_summary', 'wpwp_add_rating_review_link', 25);

Шаг 3. Проверьте результат

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

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

• Очистите кеш браузера и кеш сайта, если он есть.
• Откройте страницу товара в режиме инкогнито.
• Проверьте наличие добавленного HTML через инспектор кода (DevTools браузера).
• Убедитесь, что при отключении кода блок исчезает.

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

• Неправильно выбран хук: если контент не отображается, попробуйте другой хук или измените приоритет.
• Конфликт CSS: стили темы могут скрывать или искажать добавленный блок. Проверьте стили и используйте уникальные классы для своего контента.
• Отсутствие глобальной переменной $product: всегда вызывайте global $product; внутри функции, чтобы получить данные о товаре.
• Код вставлен не в functions.php или плагине: для безопасности и удобства лучше использовать дочернюю тему или свой плагин.

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

• Избегайте тяжелых операций или запросов в функциях, привязанных к хукам на страницах товара, это замедляет загрузку.
• Кэшируйте результаты, если вычисления сложные.
• Проверяйте наличие функции или объекта перед использованием, чтобы избежать ошибок PHP.

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