Как скрыть кнопку «Обновить корзину» в WooCommerce и обновлять корзину автоматически

В классической корзине WooCommerce после изменения количества товара нужно нажать «Обновить корзину», иначе итог не пересчитается. Покупатели это регулярно забывают: меняют количество, идут к оформлению и видят старую сумму. Обычное решение — обновлять корзину автоматически, а саму кнопку спрятать, чтобы она не отвлекала. Порядок именно такой: сначала автообновление, потом скрытие. Прятать кнопку без автообновления нельзя — покупатель потеряет единственный способ изменить количество.

Сначала проверьте, какая у вас корзина

С версии 8.3 WooCommerce создаёт страницу корзины на блоках, и там кнопки «Обновить корзину» нет вовсе: изменение количества сразу уходит на сервер, итоги пересчитываются сами. Если ваша корзина блочная, статья вам не нужна. Речь ниже о классической корзине на шорткоде [woocommerce_cart]: у неё есть форма с классом woocommerce-cart-form и кнопка button[name="update_cart"]. Отличить их проще всего по HTML страницы.

Шаг 1. Автообновление при изменении количества

Идея простая: как только покупатель меняет число в поле количества, скрипт сам «нажимает» кнопку обновления. Дальше WooCommerce делает всё как обычно — отправляет форму через Ajax и перерисовывает корзину.

jQuery( function( $ ) {
    var timer;

    // Обработчик вешаем на body: после Ajax-обновления WooCommerce
    // заменяет HTML формы, и обработчики на самих полях пропали бы
    $( document.body ).on( 'change input', '.woocommerce-cart-form input.qty', function() {
        clearTimeout( timer );

        // Небольшая пауза, чтобы не дёргать сервер на каждое нажатие стрелки
        timer = setTimeout( function() {
            $( '.woocommerce-cart-form button[name="update_cart"]' )
                .prop( 'disabled', false )
                .trigger( 'click' );
        }, 600 );
    } );
} );

Две детали, без которых это не работает. Во-первых, WooCommerce держит кнопку выключенной, пока в форме ничего не менялось, поэтому перед «нажатием» её нужно включить через prop( 'disabled', false ). Во-вторых, обработчик привязан к document.body, а не к полю: после каждого обновления корзина перерисовывается, и привязанные к старым элементам обработчики исчезли бы вместе с ними. Задержка в 600 мс собирает несколько быстрых нажатий на стрелки в один запрос.

Как подключить скрипт

Сохраните код в файл cart-autoupdate.js в папке дочерней темы и подключите его только на странице корзины:

add_action( 'wp_enqueue_scripts', 'shop_cart_autoupdate_script' );
function shop_cart_autoupdate_script() {
    if ( ! is_cart() ) {
        return;
    }
    wp_enqueue_script(
        'shop-cart-autoupdate',
        get_stylesheet_directory_uri() . '/cart-autoupdate.js',
        array( 'jquery', 'wc-cart' ),
        '1.0',
        true
    );
}

Зависимость от wc-cart гарантирует, что скрипт корзины WooCommerce загрузится раньше нашего, и клик по кнопке будет перехвачен его Ajax-обработчиком, а не отправит форму обычным способом.

Шаг 2. Скрываем кнопку

Когда автообновление работает, кнопку можно убрать одним правилом. Его добавляют во «Внешний вид → Настроить → Дополнительные стили» или в style.css дочерней темы:

.woocommerce-cart-form button[name="update_cart"] {
    display: none !important;
}

Кнопка остаётся в разметке, поэтому скрипт из первого шага по-прежнему может её «нажать» — jQuery отправляет событие клика и невидимым элементам. Именно поэтому скрывать нужно стилями, а не удалять кнопку из шаблона cart/cart.php: удалённую кнопку нечем будет запускать. Модификатор !important нужен на случай, если тема задаёт кнопке собственный display.

Что проверить после установки

• Меняете количество стрелками и вручную — итог пересчитывается сам, без перезагрузки страницы.
• После первого обновления автообновление работает и второй, и третий раз — это проверка на правильное делегирование.
• Удаление товара крестиком по-прежнему работает: за него отвечает сам WooCommerce.
• Кеш страниц не мешает: страница корзины должна быть исключена из кеширования, как и раньше.

Коротко

В блочной корзине кнопки нет и делать ничего не нужно. В классической — подключите на странице корзины скрипт, который при изменении количества включает и нажимает кнопку «Обновить корзину» с небольшой задержкой, а затем спрячьте кнопку CSS-правилом. Кнопка должна остаться в разметке, иначе автообновлению нечего будет запускать.