Как удалить WooCommerce AJAX корзину и заменить её на собственный режим без плагинов

Диагностика проблемы: зачем убирать стандартную AJAX корзину WooCommerce

Стандартная AJAX корзина WooCommerce обновляется автоматически при добавлении товара, что порой вызывает проблемы с производительностью, конфликтами JavaScript и неудобствами для кастомизации. Особенно это актуально, если требуется реализовать уникальный UX или интеграцию с нестандартным фронтендом.

Если вы заметили:

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

тогда стоит отключить стандартную AJAX корзину WooCommerce и реализовать свою.

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

Стандартный механизм AJAX добавления товара в корзину основан на скриптах WooCommerce, которые используют событие added_to_cart. Чтобы отключить AJAX, нужно:

1. Отключить скрипт, отвечающий за AJAX добавление в корзину.
2. Переключить кнопку добавления товара на обычную форму с перезагрузкой страницы.

Для этого добавьте в functions.php вашей темы следующий код:

function disable_woocommerce_ajax_add_to_cart() {
    if (class_exists('WooCommerce')) {
        // Отключаем скрипт AJAX добавления в корзину на архивах
        wp_dequeue_script('wc-add-to-cart');
        wp_deregister_script('wc-add-to-cart');
    }
}
add_action('wp_enqueue_scripts', 'disable_woocommerce_ajax_add_to_cart', 100);

Этот код отключит AJAX на страницах с товарами. На страницах товаров (single product) AJAX по умолчанию не используется.

Модификация кнопки «Добавить в корзину»

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

function replace_ajax_add_to_cart_button($html, $product) {
    if ($product && $product->is_purchasable() && $product->is_in_stock()) {
        $product_id = $product->get_id();
        $url = esc_url( $product->add_to_cart_url() );
        $label = esc_html( $product->add_to_cart_text() );
        $html = '<form class="cart" action="' . $url . '" method="post" enctype="multipart/form-data">'
              . '<button type="submit" class="single_add_to_cart_button button alt">' . $label . '</button>'
              . '</form>';
    }
    return $html;
}
add_filter('woocommerce_loop_add_to_cart_link', 'replace_ajax_add_to_cart_button', 10, 2);

Этот фильтр заменит AJAX кнопку на стандартную форму добавления с перезагрузкой.

Как реализовать собственный режим обновления корзины

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

Пример: обновление количества товаров в корзине через AJAX

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

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('custom-cart-update', get_template_directory_uri() . '/js/custom-cart-update.js', ['jquery'], false, true);
    wp_localize_script('custom-cart-update', 'customCart', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
});

add_action('wp_ajax_get_cart_count', 'get_cart_count_callback');
add_action('wp_ajax_nopriv_get_cart_count', 'get_cart_count_callback');
function get_cart_count_callback() {
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

В файле custom-cart-update.js:

jQuery(document).ready(function($) {
    function updateCartCount() {
        $.post(customCart.ajax_url, { action: 'get_cart_count' }, function(count) {
            $('.custom-cart-count').text(count);
        });
    }

    // Обновлять корзину каждые 20 секунд
    setInterval(updateCartCount, 20000);

    // Можно вызвать при загрузке страницы
    updateCartCount();
});

В шаблоне добавьте элемент для отображения количества товаров:

<div class="custom-cart-icon">
    <span class="custom-cart-count">0</span>
</div>

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

• Откройте страницу с товарами, убедитесь, что кнопка «Добавить в корзину» не содержит класс ajax_add_to_cart, а является формой с обычной отправкой.
• Добавьте товар в корзину — страница должна обновиться, и товар появится в корзине.
• Проверьте, что количество товаров в корзине обновляется в вашем кастомном блоке без ошибки JS.
• В консоли браузера не должно быть ошибок, связанных с WooCommerce AJAX скриптами.

Частые ошибки и способы их устранения

• Корзина не обновляется после добавления товара: Проверьте, что кнопка добавления товара действительно стала обычной формой, а не AJAX кнопкой.
• JavaScript ошибки после отключения скриптов WooCommerce: Возможно, другие части темы зависят от этих скриптов. Проверьте консоль и подключите необходимые скрипты отдельно.
• Кастомный счетчик корзины не обновляется: Убедитесь, что AJAX запрос корректно выполняется, и функция PHP возвращает число без лишних пробелов или ошибок.

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

• При работе с AJAX обязательно используйте wp_ajax_ и wp_ajax_nopriv_ хуки для обработки запросов безопасно.
• Не забудьте санитизировать и валидировать все входящие данные, даже если в нашем примере запрос простой.
• Отключение стандартных скриптов WooCommerce может повлиять на другие функциональности — проверяйте весь функционал сайта после изменений.
• Для улучшения UX можно добавить анимацию загрузки при обновлении количества в корзине.

Таблица сравнения способов отключения AJAX корзины WooCommerce