Изменение стоимости товара WooCommerce при вводе количества: практическое руководство

Автор: Анна Журавлева | Опубликовано: 04.07.2026

Диагностика задачи: зачем менять стоимость товара динамически?

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

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

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

1. Добавляем JavaScript для отслеживания изменения количества

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

function enqueue_dynamic_price_script() {
    if ( is_product() ) {
        wp_enqueue_script( 'dynamic-price', get_stylesheet_directory_uri() . '/js/dynamic-price.js', array('jquery'), '1.0', true );
        wp_localize_script( 'dynamic-price', 'productData', array(
            'price' => wc_get_price_to_display( wc_get_product() ),
        ) );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_dynamic_price_script' );

В этом примере мы передаем текущую цену продукта в скрипт через объект productData.

2. Создаем JavaScript файл `dynamic-price.js`

jQuery(document).ready(function($) {
    var basePrice = parseFloat(productData.price);
    var $qtyInput = $('input.qty');
    var $priceHtml = $('.woocommerce-Price-amount.amount');

    function updatePrice() {
        var qty = parseInt($qtyInput.val());
        if (isNaN(qty) || qty < 1) qty = 1;
        var newPrice = (basePrice * qty).toFixed(2);
        $priceHtml.text(newPrice + ' ₽');
    }

    $qtyInput.on('change input', updatePrice);

    updatePrice(); // обновляем цену при загрузке
});

Этот скрипт слушает изменение поля количества и пересчитывает цену, обновляя HTML-элемент с ценой товара.

3. Корректируем форматирование цены

Чтобы цена показывалась с нужным разделителем и валютой, лучше получить формат из WooCommerce и использовать в JS. Для этого можно расширить wp_localize_script:

wp_localize_script( 'dynamic-price', 'productData', array(
    'price' => wc_get_price_to_display( wc_get_product() ),
    'currency_symbol' => get_woocommerce_currency_symbol(),
    'decimal_separator' => wc_get_price_decimal_separator(),
    'thousand_separator' => wc_get_price_thousand_separator(),
    'decimals' => wc_get_price_decimals(),
) );

И в JS примерно так:

function formatPrice(price) {
    return price.toString().replace('.', productData.decimal_separator) + ' ' + productData.currency_symbol;
}
// затем в updatePrice заменяем на:
$priceHtml.text(formatPrice(newPrice));

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

1. Откройте страницу любого товара в WooCommerce.
2. Измените количество в поле на разные значения (2, 5, 10 и т.п.).
3. Убедитесь, что цена рядом с кнопкой «В корзину» меняется мгновенно и корректно.
4. Проверьте, что цена отображается с правильным разделителем и валютой.

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

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

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

Подключайте скрипты только на страницах товаров (is_product()), чтобы не нагружать сайт без нужды.
Не меняйте цену товара на сервере без дополнительных проверок — на клиенте это только отображение для пользователя.
Для сложных случаев с вариативными товарами или скидками лучше делать AJAX-запросы к серверу для получения актуальной цены.

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

Метод	Плюсы	Минусы
Простое JS обновление (как в статье)	Легко реализовать, быстро работает, без запросов к серверу	Не учитывает скидки, вариации, персонализированные цены
AJAX запрос к серверу при изменении количества	Всегда актуальная цена, учитывает все скидки и вариации	Нагрузка на сервер, задержка при обновлении
Использование плагинов динамического ценообразования	Готовые решения, поддержка, расширенный функционал	Стоимость, возможные конфликты с темой или другими плагинами

Изменение стоимости товара WooCommerce при вводе количества