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

Диагностика проблемы: почему нужна собственная AJAX корзина вместо стандартной WooCommerce

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

Пошаговое решение: удаление стандартной корзины и создание собственной AJAX корзины

1. Удаление стандартной корзины WooCommerce из темы

Для начала отключим вывод стандартной корзины из темы, чтобы она не отображалась и не конфликтовала с нашим кодом. В functions.php вашей темы добавьте:

remove_action('woocommerce_cart_collaterals', 'woocommerce_cart_totals', 10);
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);

Если в теме есть кастомные хуки для корзины, их тоже нужно найти и отключить.

2. Создаём HTML-контейнер для AJAX корзины

В нужном месте шаблона (например, в header.php или sidebar.php) вставьте контейнер, куда будет подгружаться корзина:

<div id="custom-ajax-cart">
    <!-- Корзина будет загружаться сюда -->
</div>

3. Подключаем JS для AJAX обновления корзины

В functions.php зарегистрируйте и подключите скрипт с передачей параметров:

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

4. Создаём JS логику для обработки добавления товара и обновления корзины без перезагрузки

Пример файла js/custom-ajax-cart.js:

jQuery(document).ready(function($) {
    $('body').on('click', '.add_to_cart_button', function(e) {
        e.preventDefault();
        var product_id = $(this).data('product_id');
        $.ajax({
            url: ajax_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'custom_add_to_cart',
                product_id: product_id,
                nonce: ajax_cart_params.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#custom-ajax-cart').html(response.data.cart_html);
                } else {
                    alert('Ошибка при добавлении товара в корзину');
                }
            }
        });
    });
});

5. Обрабатываем AJAX запрос в PHP

В functions.php добавьте обработчик:

function custom_ajax_add_to_cart() {
    check_ajax_referer('ajax-cart-nonce', 'nonce');

    $product_id = intval($_POST['product_id']);
    if(!$product_id) {
        wp_send_json_error();
    }

    $added = WC()->cart->add_to_cart($product_id);
    if($added) {
        ob_start();
        woocommerce_mini_cart(); // стандартный мини-корзина
        $cart_html = ob_get_clean();
        wp_send_json_success(array('cart_html' => $cart_html));
    } else {
        wp_send_json_error();
    }
}
add_action('wp_ajax_custom_add_to_cart', 'custom_ajax_add_to_cart');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_ajax_add_to_cart');

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

• Перейдите на страницу магазина.
• Нажмите кнопку добавления товара в корзину.
• Страница не должна перезагружаться.
• Контент в блоке #custom-ajax-cart должен обновляться с актуальным содержимым корзины.
• Проверьте, что товары добавляются корректно и количество обновляется.

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

• Корзина не обновляется после добавления товара: проверьте, что JS правильно подключен и нет ошибок в консоли браузера.
• Ошибка nonce или AJAX-запрос не проходит: убедитесь, что nonce передаётся и проверяется корректно.
• Кнопка добавления товара не содержит атрибута data-product_id: добавьте его вручную или используйте стандартные WooCommerce функции для вывода кнопок.
• Несоответствие стилей новой корзины теме: создайте свои CSS для блока #custom-ajax-cart.
• Скрипт не работает на кэшированных страницах: настройте исключения кэша для AJAX запросов.

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

• Всегда проверяйте nonce в AJAX обработчиках, чтобы избежать CSRF атак.
• Минимизируйте HTML, который возвращаете в AJAX ответах, чтобы не нагружать страницу.
• Используйте woocommerce_mini_cart() для вывода корзины — это стандартный и оптимизированный способ.
• Отключайте ненужные скрипты и стили WooCommerce на страницах, где корзина не нужна, чтобы улучшить скорость.
• Тестируйте AJAX корзину на мобильных устройствах и с разными браузерами.

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