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

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

WooCommerce содержит множество встроенных хуков (actions и filters), которые позволяют гибко изменять вывод информации о товарах без правки исходных шаблонов плагина. Это сохраняет совместимость при обновлениях и облегчает поддержку. В кастомной теме правильное использование хуков — лучший способ изменить вывод продуктов, не дублируя шаблоны.

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

Чтобы изменить конкретный элемент на странице товара или каталога, сначала надо найти соответствующий хук. Для этого:

• Откройте файл шаблона WooCommerce из папки woocommerce/templates, например single-product.php или content-product.php.
• Найдите участок кода с нужным элементом, например вывод цены, описания, фото.
• Посмотрите, какие хуки используются вокруг этого кода. Обычно это do_action или apply_filters.
• Используйте документацию WooCommerce (https://docs.woocommerce.com/wc-apidocs/hook-docs.html) для уточнения, когда именно срабатывает хук.

Например, для вывода цены на странице товара используется хук woocommerce_single_product_summary с приоритетом 10, а для вывода кнопки «В корзину» — приоритет 30.

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

add_action('woocommerce_single_product_summary', function() {
    echo '<p>Бесплатная доставка при заказе от 5000 руб.</p>';
}, 11);

Здесь мы используем приоритет 11, чтобы вставить текст сразу после вывода цены (приоритет 10).

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

1. Изменение вывода цены на странице товара

Чтобы полностью заменить стандартный вывод цены, нужно удалить хук и добавить свой callback:

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', function() {
    global $product;
    $price = $product->get_price_html();
    echo '<div class="custom-price">' . $price . '<span> (цена указана с учетом НДС)</span></div>';
}, 10);

2. Добавление кастомного CSS класса к контейнеру продукта на странице категории

Для этого можно использовать фильтр post_class, который позволяет добавить классы к обертке товара:

add_filter('post_class', function($classes, $class, $post_id) {
    if (get_post_type($post_id) === 'product') {
        $classes[] = 'custom-product-container';
    }
    return $classes;
}, 10, 3);

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

• Обновите страницу товара — цена должна выводиться с новым HTML и дополнительным текстом.
• На странице категории товаров откройте любой товар, в его контейнере должен появиться класс custom-product-container.
• Используйте инструменты разработчика браузера (DevTools), чтобы проверить, что стили применяются корректно.
• Отключите кэширование (если есть) или почистите кеш, если изменения не отображаются сразу.

Частые ошибки при работе с хуками WooCommerce

• Неправильный приоритет хука: если добавить функцию с приоритетом меньше, чем у оригинального вывода, результат может отображаться некорректно. Всегда проверяйте приоритеты в документации или исходниках.
• Забыли удалить стандартный хук перед добавлением своего: тогда элементы будут дублироваться.
• Подключение к хукам вне функций темы: все хуки и фильтры должны добавляться внутри functions.php или подключаемых файлов, иначе они могут не сработать.
• Использование глобальных переменных без проверки: например, $product может быть не определён в некоторых местах, лучше использовать функции WooCommerce для получения текущего продукта.

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

• Не выводите в хуках пользовательские данные без экранирования. Для HTML используйте esc_html() или esc_attr().
• Минимизируйте количество кода в хуках — тяжелые операции лучше делать асинхронно или кешировать результаты.
• Избегайте дублирования стилей и скриптов при расширении шаблонов через хуки.
• Проверяйте совместимость с плагинами, которые могут менять те же хуки (например, плагины кэширования или оптимизации).

Сравнение подходов изменения вывода товаров в WooCommerce