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

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

Стандартная корзина WooCommerce требует перезагрузки страницы для изменения количества товаров, удаления позиций или изменения стоимости. Это ухудшает пользовательский опыт и увеличивает нагрузку на сервер. Особенно остро стоит задача динамического изменения цены товара при определённых условиях (например, скидка при выборе опций) и удаления товара без перезагрузки страницы.

Проверить, что у вас именно такая проблема, просто: измените количество товара в корзине и посмотрите, обновляется ли цена без перезагрузки. Если нет — значит, нужна AJAX-реализация.

Пошаговое решение: добавляем AJAX для изменения цены и удаления товара

1. Автоматическое изменение стоимости товара в корзине

Для динамического изменения цены товара на лету используем хук woocommerce_before_calculate_totals. Например, увеличим цену на 10% для товаров определённой категории:

add_action('woocommerce_before_calculate_totals', 'custom_dynamic_price_change', 20, 1);
function custom_dynamic_price_change( $cart ) {
    if ( is_admin() && ! defined('DOING_AJAX') ) {
        return;
    }
    foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
        if ( has_term( 'special-category', 'product_cat', $cart_item['product_id'] ) ) {
            $original_price = $cart_item['data']->get_regular_price();
            $new_price = $original_price * 1.10; // +10%
            $cart_item['data']->set_price( $new_price );
        }
    }
}

Этот код автоматически обновит цену при каждом расчёте корзины. Но чтобы обновления отображались без перезагрузки, нужно добавить AJAX.

2. Удаление товара из корзины через AJAX

Добавим кнопку удаления с AJAX и обработчик на стороне клиента и сервера.

JS-код для темы (например, в footer.php или enqueue):

jQuery(document).ready(function($) {
    $('.remove-item-ajax').on('click', function(e) {
        e.preventDefault();
        var cart_item_key = $(this).data('cart_item_key');
        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'ajax_remove_cart_item',
                cart_item_key: cart_item_key,
            },
            success: function(response) {
                if(response.success) {
                    // Обновляем мини-корзину и страницу корзины
                    $(document.body).trigger('updated_wc_div');
                    location.reload(); // или динамическое обновление блока корзины
                } else {
                    alert('Ошибка при удалении товара');
                }
            }
        });
    });
});

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

PHP-обработчик AJAX:

add_action('wp_ajax_ajax_remove_cart_item', 'ajax_remove_cart_item_callback');
add_action('wp_ajax_nopriv_ajax_remove_cart_item', 'ajax_remove_cart_item_callback');
function ajax_remove_cart_item_callback() {
    if ( ! isset( $_POST['cart_item_key'] ) ) {
        wp_send_json_error();
    }
    $cart_item_key = sanitize_text_field( $_POST['cart_item_key'] );
    $removed = WC()->cart->remove_cart_item( $cart_item_key );
    if ( $removed ) {
        WC()->cart->calculate_totals();
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
    wp_die();
}

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

• Добавьте товар из нужной категории «special-category» в корзину и откройте страницу корзины.
• Убедитесь, что цена товара увеличена на 10% без ручного изменения.
• Нажмите кнопку удаления товара с классом remove-item-ajax — товар должен удалиться без полной перезагрузки страницы.
• Проверьте консоль браузера на отсутствие ошибок JS и успешный ответ AJAX.

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

• Цена не меняется — проверьте, что у товара есть категория special-category и что в корзине именно этот товар.
• AJAX запросы не работают — убедитесь, что wc_add_to_cart_params.ajax_url доступен и подключён jQuery.
• Удаление товара не происходит — проверьте корректность cart_item_key и правильность регистрации AJAX-обработчиков.
• Страница не обновляется — можно заменить location.reload() на более точечное обновление корзины через триггер updated_wc_div и обновление HTML-блоков.

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

• Всегда используйте sanitize_text_field или другие функции очистки для входящих данных AJAX.
• Для оптимальной производительности старайтесь избегать полной перезагрузки страницы, обновляйте только корзину через AJAX.
• Кеширование корзины и страниц с корзиной запрещено, чтобы AJAX обновления работали корректно.
• Для крупных проектов рассмотрите использование Clearfy Pro для очистки лишнего и оптимизации скриптов WooCommerce.

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