WooCommerce: как автоматически изменять стоимость товара при изменении количества

Диагностика проблемы: почему цена товара не обновляется при изменении количества

По умолчанию WooCommerce отображает стоимость товара, умноженную на выбранное количество, только на странице корзины и при оформлении заказа. На страницах товара динамическое изменение итоговой стоимости при изменении количества чаще всего отсутствует. Это вызывает вопросы у пользователей и клиентов, особенно если нужно сразу видеть итоговую цену без перехода в корзину.

Проверьте, не отключена ли функция обновления цены через JavaScript или не конфликтует ли тема или плагин с динамическими скриптами WooCommerce. Для диагностики откройте консоль браузера (F12) и обновите страницу с товаром, изменяя количество. Если цена не меняется, скорее всего отсутствует необходимый JS-обработчик.

Пошаговое решение: добавление автоматического обновления стоимости на странице товара

1. Подключение JavaScript для динамического обновления цены

Вам нужно добавить скрипт, который будет отслеживать изменение количества и пересчитывать цену на лету.

function wpabout_enqueue_quantity_price_script() {
    if ( is_product() ) {
        wp_enqueue_script( 'quantity-price-update', get_stylesheet_directory_uri() . '/js/quantity-price-update.js', array( 'jquery' ), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'wpabout_enqueue_quantity_price_script' );

Создайте файл quantity-price-update.js в папке темы (child theme) /js/ со следующим содержимым:

jQuery(document).ready(function($) {
    var priceHtml = $('.woocommerce-Price-amount').first().html();
    var priceValue = parseFloat($('.woocommerce-Price-amount').first().text().replace(/[^0-9.,]/g, '').replace(',', '.'));

    function updatePrice() {
        var qty = parseInt($('input.qty').val());
        if (qty && priceValue) {
            var newPrice = (priceValue * qty).toFixed(2);
            var currencySymbol = $('.woocommerce-Price-currencySymbol').first().text();
            $('.woocommerce-Price-amount').first().html(currencySymbol + newPrice);
        }
    }

    $('input.qty').on('change keyup', updatePrice);
});

2. Поддержка вариантов с вариативными товарами

Для вариативных товаров цена может изменяться при выборе варианта. Чтобы корректно работать, нужно обновлять базовую цену при смене варианта:

jQuery(document).ready(function($) {
    function updateBasePrice() {
        var basePrice = $('.single_variation .woocommerce-Price-amount').first().text().replace(/[^0-9.,]/g, '').replace(',', '.');
        return parseFloat(basePrice);
    }

    function updatePrice() {
        var qty = parseInt($('input.qty').val());
        var basePrice = updateBasePrice();
        if (qty && basePrice) {
            var newPrice = (basePrice * qty).toFixed(2);
            var currencySymbol = $('.woocommerce-Price-currencySymbol').first().text();
            $('.single_variation .woocommerce-Price-amount').first().html(currencySymbol + newPrice);
        }
    }

    $('form.variations_form').on('show_variation', function() {
        updatePrice();
    });

    $('input.qty').on('change keyup', updatePrice);
});

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

• Откройте страницу простого товара, измените количество — цена должна пересчитываться автоматически.
• Для вариативного товара выберите вариант, затем измените количество — цена варианта должна умножаться на количество и обновляться динамически.
• Проверьте консоль браузера на предмет ошибок JavaScript — их быть не должно.
• Обязательно проверьте на разных устройствах и браузерах.

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

• Цена не обновляется: Убедитесь, что класс .woocommerce-Price-amount в вашем шаблоне совпадает с селектором в JS. В некоторых темах классы могут отличаться.
• Неверное форматирование цены: В зависимости от локали разделитель десятичных и тысячных может отличаться. В коде выше используется замена запятой на точку — проверьте соответствие вашему региону.
• Конфликты с другими скриптами: Если другие плагины или тема модифицируют цену через JS, возможны конфликты. Временно отключите сторонние плагины для теста.
• Вариативные товары не обновляются: Проверьте, что событие show_variation корректно срабатывает и скрипт подключен на странице вариативного товара.

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

• JavaScript-файл подключайте только на страницах товаров (is_product()), чтобы не нагружать остальные страницы.
• Используйте минимизированный JS в продакшене.
• Не храните цены в cookies или localStorage — всегда берите из DOM, чтобы исключить манипуляции пользователя.
• При необходимости используйте AJAX для получения актуальной цены с сервера, если цена зависит от пользовательских условий или скидок.

Сравнение вариантов реализации обновления цены