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

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

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

Чтобы проверить, что стандартная AJAX корзина работает и вызывает проблемы, откройте консоль браузера (F12) и перейдите на страницу с товарами. При добавлении товара в корзину наблюдайте за сетевыми запросами (Network) и ошибками в консоли. Если запросы идут к wc-ajax=get_refreshed_fragments, значит стандартный AJAX включён.

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

1. Отключение стандартных обновлений корзины через AJAX

Добавьте следующий код в файл functions.php вашей дочерней темы или в плагин для кастомных функций:

add_filter('woocommerce_add_to_cart_fragments', '__return_empty_array');

Этот фильтр отключит перезагрузку фрагментов корзины стандартным AJAX-методом.

2. Удаление стандартного скрипта AJAX корзины

Чтобы полностью убрать скрипт, отвечающий за AJAX корзину, используйте:

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

Этот код удалит из очереди загрузки скрипт wc-cart-fragments, который отвечает за обновление корзины.

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

Теперь реализуем простой пример кастомной AJAX корзины.

JavaScript (добавьте в файл темы или через wp_enqueue_script):

jQuery(document).ready(function($) {
    $('.custom-add-to-cart-button').on('click', function(e) {
        e.preventDefault();
        var productID = $(this).data('product-id');
        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'custom_add_to_cart',
                product_id: productID
            },
            success: function(response) {
                if(response.success) {
                    $('#custom-cart-count').text(response.data.cart_count);
                    alert('Товар добавлен в корзину');
                } else {
                    alert('Ошибка добавления в корзину');
                }
            }
        });
    });
});

PHP (в functions.php):

function custom_add_to_cart_ajax() {
    $product_id = intval($_POST['product_id']);
    if($product_id > 0) {
        $added = WC()->cart->add_to_cart($product_id);
        if($added) {
            wp_send_json_success(['cart_count' => WC()->cart->get_cart_contents_count()]);
        } else {
            wp_send_json_error();
        }
    } else {
        wp_send_json_error();
    }
    wp_die();
}
add_action('wp_ajax_custom_add_to_cart', 'custom_add_to_cart_ajax');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_add_to_cart_ajax');

Не забудьте в шаблоне товаров добавить кнопки с классом custom-add-to-cart-button и data-атрибутом data-product-id, а также элемент для отображения количества товаров в корзине:

<button class="custom-add-to-cart-button" data-product-id="<?php echo get_the_ID(); ?>">Добавить в корзину</button>
<span id="custom-cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>

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

После внесения изменений:

• Очистите кеш браузера и серверный кеш (если есть).
• Откройте страницу с товарами и попробуйте добавить товар в корзину нажатием на новую кнопку.
• Проверьте, обновилось ли число товаров в корзине в #custom-cart-count без перезагрузки страницы.
• Убедитесь, что в консоли не появляются ошибки JavaScript, а в Network нет запросов wc-ajax=get_refreshed_fragments.

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

• Кнопки не работают — проверьте корректность селектора в JS и наличие jQuery.
• Ошибка 400 или 500 при AJAX запросе — убедитесь, что в wp-config.php включена константа define('WP_DEBUG', true); и проанализируйте логи сервера.
• Количество товаров в корзине не обновляется — проверьте, что в ответе AJAX возвращается актуальное значение WC()->cart->get_cart_contents_count().
• Скрипт wc-cart-fragments всё ещё загружается — проверьте приоритет хука wp_enqueue_scripts и попробуйте увеличить его (например, до 20).

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

• Обрабатывайте входящие данные через intval() или другие санитайзеры, чтобы избежать XSS и других уязвимостей.
• Добавьте nonce в AJAX запросы для защиты от CSRF.
• Кэшируйте количество товаров в корзине на стороне клиента, чтобы снизить количество запросов.
• Оптимизируйте JavaScript, чтобы избежать конфликтов с другими плагинами и темами.

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