Как удалить WooCommerce мини-корзину и заменить её на собственную AJAX корзину в теме WordPress

Диагностика проблемы с мини-корзиной WooCommerce

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

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

Чтобы реализовать свою AJAX корзину и контролировать вывод, нужно сначала удалить стандартную мини-корзину WooCommerce.

Как удалить стандартную мини-корзину WooCommerce

Мини-корзина обычно добавляется через виджет woocommerce_widget_cart или через хук woocommerce_before_mini_cart / woocommerce_after_mini_cart. Чтобы удалить стандартную корзину и избежать ее вывода, добавьте следующий код в functions.php вашей темы (лучше в дочернюю):

function remove_woocommerce_mini_cart() {
    remove_action('storefront_header', 'storefront_cart_link', 30); // пример для темы Storefront
    unregister_widget('WC_Widget_Cart');
}
add_action('widgets_init', 'remove_woocommerce_mini_cart', 11);

Для других тем важно выявить, где именно добавляется мини-корзина (обычно это в header.php или через хук, например, wp_nav_menu_items с добавлением корзины). Можно отключить виджет корзины из админки «Внешний вид > Виджеты» или убрать в шаблонах вызов the_widget('WC_Widget_Cart').

Удаление AJAX обновления корзины

WooCommerce использует скрипт wc-cart-fragments для обновления мини-корзины. Отключить его можно так:

function dequeue_woocommerce_cart_fragments() {
    wp_dequeue_script('wc-cart-fragments');
}
add_action('wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);

Это предотвратит автоматическое обновление мини-корзины WooCommerce, чтобы ваша кастомная корзина не конфликтовала.

Создание собственной AJAX корзины в теме WordPress

Теперь создадим простую мини-корзину с AJAX обновлением, используя стандартные WooCommerce функции и AJAX обработчик.

1. Вывод кастомной корзины в шапке

Добавьте в header.php или в нужное место темы следующий HTML-блок:

<div id="custom-mini-cart">
    <button id="custom-cart-toggle">Корзина (<span class="custom-cart-count">0</span>)</button>
    <div id="custom-cart-content" style="display:none;">
        <ul class="custom-cart-items"></ul>
        <a href="<?php echo wc_get_cart_url(); ?>" class="button">Перейти в корзину</a>
    </div>
</div>

2. JS для загрузки и обновления корзины AJAX

Добавьте скрипт в тему, например, custom-cart.js и подключите его в functions.php:

function enqueue_custom_cart_scripts() {
    wp_enqueue_script('custom-cart', get_template_directory_uri() . '/js/custom-cart.js', array('jquery'), '1.0', true);
    wp_localize_script('custom-cart', 'customCartAjax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('custom_cart_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_cart_scripts');

В custom-cart.js пишем:

jQuery(document).ready(function($){
    function updateCart() {
        $.ajax({
            url: customCartAjax.ajax_url,
            type: 'POST',
            data: {
                action: 'get_custom_cart',
                nonce: customCartAjax.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('.custom-cart-count').text(response.data.item_count);
                    var itemsHtml = '';
                    response.data.items.forEach(function(item){
                        itemsHtml += '<li>' + item.name + ' x ' + item.quantity + '</li>';
                    });
                    $('.custom-cart-items').html(itemsHtml);
                }
            }
        });
    }

    $('#custom-cart-toggle').on('click', function(){
        $('#custom-cart-content').toggle();
    });

    // Обновляем корзину при загрузке страницы
    updateCart();

    // Обновляем корзину при добавлении товара в корзину
    $(document.body).on('added_to_cart', function(){
        updateCart();
    });
});

3. Обработка AJAX запроса в PHP

Добавьте в functions.php:

function ajax_get_custom_cart() {
    check_ajax_referer('custom_cart_nonce', 'nonce');

    $cart = WC()->cart;
    $items = array();
    foreach($cart->get_cart() as $cart_item_key => $cart_item) {
        $product = $cart_item['data'];
        $items[] = array(
            'name' => $product->get_name(),
            'quantity' => $cart_item['quantity'],
        );
    }

    wp_send_json_success(array(
        'item_count' => $cart->get_cart_contents_count(),
        'items' => $items
    ));
}
add_action('wp_ajax_get_custom_cart', 'ajax_get_custom_cart');
add_action('wp_ajax_nopriv_get_custom_cart', 'ajax_get_custom_cart');

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

1. Очистите кэш браузера и кэш сайта (если используется).

2. Загрузите любую страницу сайта и убедитесь, что стандартная мини-корзина WooCommerce не отображается.

3. В шапке должен появиться ваш кастомный блок с кнопкой «Корзина (0)».

4. Добавьте товар в корзину (например, на странице товара). Корзина должна обновиться без перезагрузки, количество товаров изменится, а список товаров отобразится внутри блока.

5. Проверьте, что при клике на кнопку корзина раскрывается/скрывается.

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

• Мини-корзина WooCommerce всё ещё отображается: проверьте, откуда именно она вызывается в вашей теме — возможно, это не виджет, а прямой вызов в шаблонах. Проверьте хуки с помощью remove_action.
• AJAX запрос не работает или возвращает ошибку 400/403: убедитесь, что nonce передаётся и проверяется корректно; проверьте, что действие wp_ajax_ зарегистрировано.
• Скрипт не подключается: проверьте правильность пути и хук подключения wp_enqueue_scripts.
• Корзина не обновляется при добавлении товара: убедитесь, что событие added_to_cart срабатывает; при кастомных решениях WooCommerce может не триггерить его — тогда используйте события jQuery на кнопках добавления.

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

• Используйте wp_create_nonce и check_ajax_referer для защиты AJAX вызовов.
• Отключайте стандартный скрипт wc-cart-fragments, если используете собственный механизм обновления, чтобы избежать конфликтов и лишних запросов.
• Минимизируйте HTML и JS код для корзины, чтобы ускорить загрузку.
• Кэшируйте AJAX ответы, если корзина не меняется часто, используя transient API.

Сравнение вариантов реализации мини-корзины