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

Диагностика проблемы: почему стандартный шаблон товара не подходит

В WooCommerce стандартный шаблон страницы товара содержит фиксированную структуру: название, рейтинг, цена, описание, атрибуты, кнопка «В корзину» и т.д. Часто возникает необходимость изменить порядок, добавить или убрать элементы без создания дочерней темы или копирования шаблонов. Для этого используются хуки WooCommerce.

Пошаговое решение: работа с хуками WooCommerce на странице товара

1. Определение нужных хуков

WooCommerce предоставляет ряд action и filter хуков для страницы товара. Например, наиболее часто используемые action-хуки:

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

2. Пример: перемещение цены под описание

По умолчанию цена выводится с приоритетом 10, описание — 20. Чтобы поменять их местами, нужно убрать цену и добавить её заново с другим приоритетом.

add_action('woocommerce_single_product_summary', 'custom_move_price', 25);
function custom_move_price() {
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25);
}
add_action('init', 'custom_move_price');

Однако лучше обрабатывать это вне init, например, в functions.php напрямую:

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25);

3. Добавление кастомного блока после описания

Для добавления своего HTML-блока после описания:

add_action('woocommerce_single_product_summary', 'custom_after_description_block', 21);
function custom_after_description_block() {
    echo '<div class="custom-block">Дополнительная информация о товаре</div>';
}

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

Откройте страницу товара на фронтенде, проверьте порядок элементов: цена должна отображаться после описания, а новый блок — сразу после описания. Используйте инструменты разработчика в браузере (F12) для проверки HTML-структуры и классов.

Если изменения не видны, очистите кеш плагинов и браузера.

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

• Ничего не меняется после добавления кода: скорее всего, код добавлен в неправильный файл или срабатывает слишком рано/поздно. Добавляйте код в functions.php активной темы или в плагин с хуком after_setup_theme.
• Ошибка «Cannot redeclare function»: проверьте, что функции объявлены с уникальными именами.
• Порядок элементов не изменился: возможно, другие плагины или тема переопределяют хуки. Пробуйте увеличить приоритеты или используйте remove_action и add_action в правильном порядке.
• Нестилированный или некорректный вывод: проверьте HTML и CSS, используйте стандартные классы WooCommerce для совместимости.

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

• Избегайте излишнего использования remove_action и add_action, если можно добиться результата через фильтры вывода.
• Проверяйте совместимость кода с будущими версиями WooCommerce, так как хуки могут меняться.
• Для крупных изменений лучше создавать дочернюю тему или отдельный плагин, чтобы избежать потери изменений при обновлении.
• Используйте wp_enqueue_scripts для подключения своих стилей и скриптов, чтобы не замусоривать страницу.

Таблица сравнения подходов к кастомизации страницы товара