Как изменить разметку WooCommerce без переопределения шаблонов

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

Почему стоит избегать переопределения шаблонов WooCommerce

Копирование шаблонов в папку темы (woocommerce) и их редактирование — стандартный способ кастомизации. Однако он имеет ряд недостатков:

• При обновлении WooCommerce ваши шаблоны могут устаревать, и нужно вручную переносить изменения;
• Это увеличивает размер темы и усложняет поддержку;
• Иногда требуется внести небольшие изменения, а копирование целого шаблона — избыточно.

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

Основные хуки для изменения разметки WooCommerce

WooCommerce построен на большом количестве хуков, которые располагаются в разных частях шаблонов. Вот несколько примеров:

• woocommerce_before_shop_loop_item — перед карточкой товара;
• woocommerce_after_shop_loop_item_title — после названия товара в списке;
• woocommerce_single_product_summary — основной блок с информацией о товаре на странице товара;
• woocommerce_cart_item_name — название товара в корзине (фильтр);
• woocommerce_checkout_fields — поля оформления заказа (фильтр для изменения массива полей).

Используя их, можно добавлять, изменять или удалять HTML-элементы.

Пример 1. Добавление текста под названием товара в списке товаров

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

add_action('woocommerce_after_shop_loop_item_title', 'wpskill_add_free_shipping_text', 15);
function wpskill_add_free_shipping_text() {
    echo '<p class="free-shipping">Бесплатная доставка</p>';
}

Здесь мы используем хук woocommerce_after_shop_loop_item_title с приоритетом 15 (стандартное название товара выводится с приоритетом 10, поэтому наш текст будет после него).

Пример 2. Изменение названия товара в корзине с помощью фильтра

Иногда нужно добавить к названию товара в корзине дополнительные данные, например, артикул.

add_filter('woocommerce_cart_item_name', 'wpskill_modify_cart_item_name', 10, 3);
function wpskill_modify_cart_item_name($product_name, $cart_item, $cart_item_key) {
    $product = $cart_item['data'];
    $sku = $product->get_sku();
    if ($sku) {
        $product_name .= '<br><small>Артикул: ' . esc_html($sku) . '</small>';
    }
    return $product_name;
}

Функция добавляет артикул товара под его названием в корзине. Это улучшает информативность оформления заказа.

Как убрать стандартные элементы WooCommerce с помощью хуков

Чтобы убрать стандартные части разметки, можно удалить действия, которые их выводят. Пример — убрать цену товара в списке товаров:

remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10);

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

Пример 3. Изменение полей оформления заказа (checkout fields)

Чтобы изменить поля формы оформления заказа, например, сделать поле "Компания" обязательным, используйте фильтр woocommerce_checkout_fields:

add_filter('woocommerce_checkout_fields', 'wpskill_customize_checkout_fields');
function wpskill_customize_checkout_fields($fields) {
    if (isset($fields['billing']['billing_company'])) {
        $fields['billing']['billing_company']['required'] = true;
        $fields['billing']['billing_company']['label'] = 'Компания (обязательно)';
    }
    return $fields;
}

Этот код меняет поле "Компания" на обязательное с изменённой меткой.

Рекомендации по поиску нужных хуков

Чтобы найти, какой хук использовать для нужной части шаблона, можно:

• Изучить исходники шаблонов WooCommerce — хуки обычно описаны рядом с HTML;
• Использовать плагины, которые показывают активные хуки на странице, например Query Monitor или WP Hook Sniffer;
• Обратиться к официальной документации WooCommerce и списку хуков на сайте WooCommerce GitHub.

Заключение

Изменение разметки WooCommerce через хуки — лучший способ кастомизации, который сохраняет совместимость с обновлениями плагина и облегчает поддержку сайта. Используйте add_action, remove_action и add_filter для тонкой настройки вывода HTML, избегая копирования шаблонов. В статье приведены конкретные примеры, которые можно адаптировать под свои задачи.