Не работает мини-корзина WooCommerce: пустое окно и не удаляются товары

После обновления WordPress, WooCommerce или темы можно столкнуться с проблемой в работе мини-корзины: при нажатии на иконку корзины выпадающее окно открывается, но внутри ничего нет. А после восстановления содержимого может обнаружиться еще одна проблема — товары отображаются, но кнопка удаления в мини-корзине не работает.

В нашем случае проблема возникла на WordPress-сайте с WooCommerce и темой Termosolar.

В итоге оказалось, что тема рассчитывала на два стандартных JavaScript-механизма WooCommerce:

• wc-cart-fragments — для загрузки и обновления содержимого мини-корзины;
• wc-add-to-cart — в том числе для AJAX-удаления товаров из мини-корзины.

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

Как выглядела проблема

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

<div class="shopping-cart dropdown-window opened">
    <div class="widget_shopping_cart_content products-holder"></div>
</div>

Это важный признак. Сам dropdown темы работал: JavaScript открывал окно, CSS отображал его корректно, но WooCommerce не подставлял внутрь содержимое корзины.

После подключения Cart Fragments товары появились, однако выяснилось, что кнопка удаления:

<a href="..."
   class="remove remove_from_cart_button"
   data-product_id="9179"
   data-cart_item_key="...">×</a>

по-прежнему ничего не делает.

При этом на обычной странице корзины удаление товаров работало нормально.

Почему мини-корзина WooCommerce может перестать работать

Классические темы WordPress часто используют старую схему мини-корзины WooCommerce.

В ней часть HTML может присутствовать в шаблоне темы, а актуальное содержимое корзины загружается и обновляется через JavaScript и AJAX.

Раньше темы могли рассчитывать на то, что необходимые скрипты WooCommerce будут подключены автоматически практически на всех страницах.

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

Старая тема при этом продолжает выводить контейнер мини-корзины, но JavaScript, на который она рассчитывает, может отсутствовать.

Первый симптом: мини-корзина открывается пустой

Если при клике на корзину появляется пустое окно, сначала необходимо проверить наличие Cart Fragments.

Открываем страницу сайта, нажимаем F12, переходим в Console и выполняем:

typeof wc_cart_fragments_params

Если получаем:

"undefined"

значит параметры Cart Fragments на странице отсутствуют.

После нормального подключения скрипта результат должен быть:

"object"

Подключаем wc-cart-fragments

Для восстановления классической мини-корзины WooCommerce можно явно подключить стандартный скрипт:

add_action( 'wp_enqueue_scripts', function() {
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_script( 'wc-cart-fragments' );
    }
}, 100 );

Код лучше добавлять в functions.php дочерней темы, а не изменять основной файл темы.

После изменения необходимо очистить кеш сайта, кеш плагинов оптимизации и, если используется, кеш CDN.

Затем снова выполняем:

typeof wc_cart_fragments_params

Ожидаемый результат:

"object"

В нашем случае после этого содержимое мини-корзины появилось.

Второй симптом: товары появились, но не удаляются

После восстановления мини-корзины обнаружилась еще одна проблема: нажатие на крестик возле товара не приводило к его удалению.

Сама ссылка была сформирована правильно:

<a href="..."
   class="remove remove_from_cart_button"
   data-product_id="9179"
   data-cart_item_key="...">×</a>

Ключевой CSS-класс здесь:

remove_from_cart_button

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

Если соответствующий скрипт не загружен, ссылка отображается, но AJAX-обработчик не срабатывает.

Проверяем wc-add-to-cart

В консоли браузера выполняем:

typeof wc_add_to_cart_params

Если получаем:

"undefined"

значит стандартный скрипт добавления и удаления товаров WooCommerce на странице отсутствует.

После нормального подключения ожидаем:

"object"

Полное решение

В нашем случае понадобилось подключить оба скрипта WooCommerce:

add_action( 'wp_enqueue_scripts', function() {
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_script( 'wc-add-to-cart' );
        wp_enqueue_script( 'wc-cart-fragments' );
    }
}, 100 );

После очистки кеша проверяем в консоли:

typeof wc_add_to_cart_params

и:

typeof wc_cart_fragments_params

В обоих случаях должен возвращаться:

"object"

После этого мини-корзина должна:

• нормально отображать добавленные товары;
• показывать актуальное количество товаров;
• обновлять сумму корзины;
• удалять товары по клику на крестик;
• обновляться без полной перезагрузки страницы.

Зачем нужны два разных скрипта

wc-cart-fragments

Скрипт wc-cart-fragments отвечает за механизм AJAX-фрагментов корзины.

Он позволяет WooCommerce получать актуальный HTML корзины и заменять соответствующие блоки страницы без полной перезагрузки.

В частности, это касается классического контейнера:

<div class="widget_shopping_cart_content">
    ...
</div>

Если этот скрипт отсутствует, мини-корзина может открываться совершенно пустой.

wc-add-to-cart

Скрипт wc-add-to-cart отвечает за часть AJAX-действий WooCommerce, связанных с добавлением и удалением товаров.

В частности, он обрабатывает клики по элементам с классом:

.remove_from_cart_button

Если этого скрипта нет, товар в мини-корзине отображается, но крестик удаления может не работать.

Как вручную обновить мини-корзину

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

Для этого в консоли выполняем:

jQuery(document.body).trigger('wc_fragment_refresh');

Если после выполнения команды мини-корзина корректно обновляется, механизм Cart Fragments работает.

Как проверить AJAX-запросы WooCommerce

Если скрипты присутствуют, но проблема сохраняется, открываем:

F12 → Network → Fetch/XHR

При обновлении содержимого корзины должен появляться запрос вида:

wc-ajax=get_refreshed_fragments

А при удалении товара из мини-корзины — запрос WooCommerce на удаление позиции из корзины.

Если AJAX-запрос возвращает ошибку 403, 404 или 500, проблему нужно искать уже в настройках сервера, кешировании, защитных плагинах или PHP-коде сайта.

Почему на странице корзины удаление работало

Это отдельный важный диагностический признак.

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

Проблема находится именно во фронтенд-логике мини-корзины: JavaScript не перехватывает клик по ссылке или не отправляет AJAX-запрос.

Поэтому в такой ситуации нет смысла сразу менять PHP-функции удаления товара или шаблон страницы корзины.

Почему не стоит сразу редактировать шаблон mini-cart.php

Когда мы видим пустой контейнер:

<div class="widget_shopping_cart_content products-holder"></div>

может показаться, что WooCommerce или тема неправильно генерируют HTML.

Однако классическая мини-корзина может специально получать содержимое уже после загрузки страницы.

Поэтому прежде чем менять mini-cart.php или файлы темы, лучше последовательно проверить JavaScript.

1. Выполнить typeof wc_cart_fragments_params.
2. Выполнить typeof wc_add_to_cart_params.
3. Проверить AJAX-запросы во вкладке Network.
4. Проверить JavaScript-ошибки в Console.
5. Только после этого переходить к анализу PHP-шаблонов.

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

Куда лучше добавлять исправление

Не рекомендуется менять functions.php основной темы напрямую.

После обновления темы внесенный код может быть удален.

Лучше использовать:

• functions.php дочерней темы;
• собственный небольшой плагин;
• PHP-сниппет через специализированный плагин.

Не увеличит ли это нагрузку на сайт

wc-cart-fragments действительно может создавать дополнительные AJAX-запросы. Именно поэтому WooCommerce перестал безусловно подключать этот механизм везде.

Но если старая тема использует классическую мини-корзину в шапке сайта и без Cart Fragments она не работает, такое подключение является оправданным.

При этом нет смысла подключать эти скрипты вручную на сайте, где классическая мини-корзина вообще не используется.

Итоговое решение

Если классическая мини-корзина WooCommerce перестала работать после обновлений, сначала стоит проверить наличие двух стандартных JavaScript-компонентов.

Для Cart Fragments:

typeof wc_cart_fragments_params

Для обработчиков добавления и удаления:

typeof wc_add_to_cart_params

Если один или оба возвращают:

"undefined"

для старой темы может помочь явное подключение необходимых скриптов:

add_action( 'wp_enqueue_scripts', function() {
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_script( 'wc-add-to-cart' );
        wp_enqueue_script( 'wc-cart-fragments' );
    }
}, 100 );

В нашем случае на теме Termosolar именно это полностью решило проблему: сначала заработало отображение товаров в мини-корзине, а после подключения wc-add-to-cart восстановилось и AJAX-удаление товаров по клику на крестик.