Как изменить вывод WooCommerce мини-корзины в шапке темы WordPress

Стандартная мини-корзина WooCommerce часто не совпадает с версткой темы: в шапке ломается сетка, счётчик не помещается, а иконка корзины дублируется с меню. В таких случаях обычно не нужно переписывать WooCommerce или ставить отдельный плагин. Достаточно заменить шаблон мини-корзины и аккуратно подключить обновление фрагмента через AJAX.

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

Когда стандартная мини-корзина мешает теме

Проблема обычно проявляется не в самой корзине, а в шапке сайта. Типичные симптомы:

• иконка корзины съезжает на мобильных;
• сумма не помещается в одну строку;
• при добавлении товара счётчик не обновляется;
• в шапке уже есть собственный блок корзины, а WooCommerce вставляет второй;
• в теме используется нестандартная структура header.php, и стандартный виджет выглядит чужеродно.

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

Диагностика: что ломается и где искать

Сначала проверьте, откуда вообще берётся мини-корзина. В классических темах это может быть:

• виджет WooCommerce в области шапки;
• вызов функции из header.php;
• шаблон woocommerce/cart/mini-cart.php в теме или дочерней теме;
• блок, который тема выводит через свой хук.

Откройте исходный код страницы и найдите контейнеры, связанные с корзиной: mini-cart, cart-contents, woocommerce-widget-cart. Если разметка приходит из шаблона WooCommerce, её можно переопределить в теме. Если блок рисует сама тема, сначала нужно понять, какой PHP-файл отвечает за вывод.

Полезно также проверить, не отключены ли фрагменты корзины сторонним оптимизатором. Если кэш-плагин или минификация скриптов режет wc-cart-fragments, счётчик в шапке перестаёт обновляться после AJAX-добавления товара.

Сравнение подходов: шаблон, хук или свой блок

Если задача именно в шапке, а не в боковой панели, чаще всего лучший вариант — свой блок в теме плюс переопределение мини-корзины WooCommerce.

Пошаговое решение: свой вывод мини-корзины в шапке

1. Добавьте собственную функцию вывода

Ниже пример для functions.php дочерней темы. Он выводит иконку, количество товаров и сумму. Разметку можно адаптировать под ваш header.

add_action( 'wp_enqueue_scripts', function () {
    if ( function_exists( 'is_woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() ) ) {
        wp_enqueue_script( 'wc-cart-fragments' );
    }
} );

function mytheme_header_mini_cart() {
    if ( ! function_exists( 'WC' ) ) {
        return;
    }

    $count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0;
    $total = WC()->cart ? WC()->cart->get_cart_total() : '';
    ?>
    <a class="header-mini-cart" href="<?php echo esc_url( wc_get_cart_url() ); ?>">
        <span class="header-mini-cart__icon" aria-hidden="true">🛒</span>
        <span class="header-mini-cart__count"><?php echo esc_html( $count ); ?></span>
        <span class="header-mini-cart__total"><?php echo wp_kses_post( $total ); ?></span>
    </a>
    <?php
}

Дальше вызовите эту функцию в нужном месте шапки, например в header.php или в шаблоне, который отвечает за верхнюю панель:

<div class="header-actions">
    <?php mytheme_header_mini_cart(); ?>
</div>

2. Сделайте обновление счётчика через AJAX

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

add_filter( 'woocommerce_add_to_cart_fragments', function ( $fragments ) {
    ob_start();
    mytheme_header_mini_cart();
    $fragments['a.header-mini-cart'] = ob_get_clean();

    return $fragments;
} );

Ключевой момент: селектор в массиве фрагментов должен совпадать с элементом, который вы выводите в шапке. В примере это a.header-mini-cart. Если у вас другой тег или класс, замените селектор на свой.

3. Если нужно, переопределите шаблон мини-корзины

Когда вы открываете выпадающее окно корзины, WooCommerce использует шаблон woocommerce/cart/mini-cart.php. Его можно скопировать в дочернюю тему по пути your-child-theme/woocommerce/cart/mini-cart.php и изменить структуру под дизайн.

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

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

После правок проверьте не только внешний вид, но и поведение корзины. Минимальный чек-лист:

• иконка и счётчик отображаются в шапке на десктопе и мобильных;
• после добавления товара число обновляется без ручной перезагрузки страницы;
• ссылка ведёт на корректную страницу корзины;
• выпадающий список корзины не ломает верстку шапки;
• в консоли браузера нет ошибок JavaScript, связанных с WooCommerce;
• после очистки кэша результат остаётся тем же.

Проверять удобно в двух сценариях: на странице товара и в каталоге с кнопкой Добавить в корзину. Если фрагмент не обновляется, откройте DevTools → Network и посмотрите, уходит ли запрос на обновление фрагментов. Если запрос есть, но HTML не меняется, значит проблема в селекторе фрагмента или в конфликте с шаблоном.

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

Фрагмент не обновляется после AJAX-добавления

Чаще всего причина в том, что в теме отключён wc-cart-fragments или его вырезал оптимизатор. Проверьте, не исключён ли скрипт из объединения и минификации. Если кэш-плагин агрессивно оптимизирует JS, добавьте WooCommerce-скрипты в исключения.

Счётчик показывает ноль, хотя товар в корзине есть

Обычно это происходит, если функция вызывается слишком рано, до инициализации корзины. В примере выше есть проверка function_exists( 'WC' ), но в некоторых шаблонах ещё важно не обращаться к WC()->cart вне подходящего хука. Если проблема повторяется, выводите блок после загрузки WooCommerce, а не в самом начале файла.

Разметка ломает стили шапки

Это бывает, когда в блок вставляют слишком много элементов или меняют тег с a на div, но забывают обновить CSS и селектор фрагмента. Сначала зафиксируйте HTML, потом под него пишите стили. Не смешивайте редизайн и логику в одном проходе.

После обновления темы всё сломалось

Если вы правили шаблон прямо в родительской теме, обновление перезапишет изменения. Для WooCommerce-шаблонов и правок шапки безопаснее использовать дочернюю тему. Это не ускоряет сайт само по себе, но сильно снижает риск потерять кастомизацию.

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

Мини-корзина кажется мелкой деталью, но именно она часто тянет лишние запросы и конфликтует с кэшем. Чтобы не получить лишнюю нагрузку:

• не подключайте повторно скрипты WooCommerce вручную без необходимости;
• не отключайте wc-cart-fragments на страницах, где корзина реально видна;
• не храните HTML корзины в transient, если он должен обновляться в реальном времени;
• используйте дочернюю тему для шаблонов и PHP-правок;
• проверяйте совместимость с плагинами кэша и оптимизации JS.

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

Что делать, если нужен не только счётчик, но и выпадающий список товаров

В этом случае не ограничивайтесь одной ссылкой на корзину. Выведите кнопку, счётчик и отдельный контейнер для мини-корзины, а сам список товаров подтягивайте стандартным шаблоном WooCommerce. Так вы сохраните совместимость с количеством товаров, купонами и удалением позиции из корзины.

Если шапка уже перегружена, не пытайтесь запихнуть туда весь список товаров. Лучше оставить в header только компактный триггер, а содержимое показывать в выпадающем блоке или в off-canvas панели. Это проще поддерживать и меньше ломает адаптив.