Как изменить вывод WooCommerce на странице товара в WordPress: практические примеры

Автор: Николай Титов | Опубликовано: 11.03.2026

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

Почему важно менять вывод WooCommerce на странице товара

Стандартный вывод WooCommerce устроен так, чтобы работать для большинства магазинов, но он не всегда подходит под индивидуальные задачи. Например, нужно:

Добавить дополнительную информацию о доставке прямо на странице товара.
Изменить порядок элементов: переместить цену выше описания или убрать ненужные блоки.
Добавить свои кнопки или кастомные поля.
Изменить дизайн элементов без переписывания шаблонов.

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

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

WooCommerce использует множество хуков, позволяющих внедрять и менять контент. Наиболее часто используемые на странице single product:

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

Каждый из этих хуков содержит собственные действия (actions), которые можно убирать или добавлять.

Пример: изменить порядок вывода цены и названия товара

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

function wprus_change_product_summary_order() {
    // Удаляем стандартные хук-действия
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);

    // Добавляем по-новому: сначала цена, потом заголовок
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 5);
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 10);
}
add_action('init', 'wprus_change_product_summary_order');

Это простой способ изменить порядок без дублирования шаблонов.

Добавление кастомного блока информации на страницу товара

Допустим, нужно добавить блок с информацией о бесплатной доставке под ценой товара. Используем хук woocommerce_single_product_summary с приоритетом 15, чтобы выводить после цены (у нее приоритет 10):

function wprus_add_free_shipping_info() {
    echo '<div class="wprus-free-shipping" style="color:green; font-weight:bold; margin-top:10px;">Бесплатная доставка при заказе от 5000 рублей</div>';
}
add_action('woocommerce_single_product_summary', 'wprus_add_free_shipping_info', 15);

Можно стилизовать блок через CSS отдельно в вашей теме.

Использование плагина Clearfy Pro для кастомизации WooCommerce

Плагин Clearfy Pro включает инструменты для оптимизации и кастомизации WooCommerce без кода. С его помощью можно отключать ненужные блоки, менять порядок элементов и улучшать производительность, что полезно при больших магазинах.

Удаление элементов WooCommerce с помощью кода

Если требуется убрать лишние блоки, например, рейтинг или метаданные товара, можно использовать функцию удаления действия:

function wprus_remove_woocommerce_product_elements() {
    // Убираем рейтинг под названием
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);

    // Убираем метаданные (артикул и категории)
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
}
add_action('init', 'wprus_remove_woocommerce_product_elements');

Это поможет сделать страницу более лаконичной и сфокусированной.

Кастомизация вкладок на странице товара WooCommerce

Вкладки с описанием, дополнительной информацией и отзывами тоже можно менять. Для этого используется фильтр woocommerce_product_tabs. Пример добавления новой вкладки:

function wprus_add_custom_product_tab($tabs) {
    $tabs['wprus_custom_tab'] = array(
        'title'    => __('Гарантия', 'woocommerce'),
        'priority' => 50,
        'callback' => 'wprus_custom_product_tab_content'
    );
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'wprus_add_custom_product_tab');

function wprus_custom_product_tab_content() {
    echo '<p>Мы предоставляем гарантию 12 месяцев на все товары.</p>';
}

Также можно удалять или переименовывать стандартные вкладки.

Плагин Expert Review для улучшения отзывов WooCommerce

Если хотите улучшить отзывы и кастомизировать их вывод, обратите внимание на Expert Review. Этот плагин позволяет выводить отзывы с расширенными возможностями, менять шаблоны и добавлять рейтинги по нескольким критериям.

Советы по безопасной кастомизации WooCommerce

Изменяя вывод WooCommerce, придерживайтесь следующих рекомендаций:

Используйте дочернюю тему для добавления кода, чтобы не потерять изменения при обновлении.
Проверяйте работоспособность на тестовом сайте перед публикацией.
Используйте префиксы для функций, чтобы избежать конфликтов (например, wprus_).
Не отключайте важные части без понимания, как это повлияет на функциональность.

Правильное использование хуков и фильтров позволяет гибко адаптировать магазин под любые задачи без сложных изменений в шаблонах.

Итоговые примеры кода для кастомизации вывода WooCommerce

Объединим примеры в один блок для удобства:

<?php
// Изменяем порядок цены и названия товара
function wprus_change_product_summary_order() {
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 5);
    add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 10);
}
add_action('init', 'wprus_change_product_summary_order');

// Добавляем блок с информацией о доставке
function wprus_add_free_shipping_info() {
    echo '<div class="wprus-free-shipping" style="color:green; font-weight:bold; margin-top:10px;">Бесплатная доставка при заказе от 5000 рублей</div>';
}
add_action('woocommerce_single_product_summary', 'wprus_add_free_shipping_info', 15);

// Убираем рейтинг и метаданные
function wprus_remove_woocommerce_product_elements() {
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
    remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
}
add_action('init', 'wprus_remove_woocommerce_product_elements');

// Добавляем кастомную вкладку
function wprus_add_custom_product_tab($tabs) {
    $tabs['wprus_custom_tab'] = array(
        'title'    => __('Гарантия', 'woocommerce'),
        'priority' => 50,
        'callback' => 'wprus_custom_product_tab_content'
    );
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'wprus_add_custom_product_tab');

function wprus_custom_product_tab_content() {
    echo '<p>Мы предоставляем гарантию 12 месяцев на все товары.</p>';
}
?>

Внедряя эти изменения, вы получите уникальный и удобный интерфейс для покупателей.