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

Проблема: цена не обновляется при смене вариации в WooCommerce

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

Диагностика проблемы

• Проверьте, активирован ли JavaScript WooCommerce для вариаций (woocommerce.js) и не блокируется ли он другими плагинами.
• Убедитесь, что в теме поддерживается вывод вариаций с помощью woocommerce_single_product_summary и соответствующих хуков.
• Проверьте консоль браузера на наличие JavaScript ошибок, которые могут прерывать скрипты обновления цены.
• Отключите все сторонние плагины, кроме WooCommerce, чтобы проверить конфликт.
• Проверьте, корректно ли указаны цены для вариаций в админке — поле Regular Price или Sale Price.

Пошаговое решение: программное обновление цены при смене вариации

Если стандартный функционал не работает, можно добавить собственный JavaScript и PHP для контроля и обновления цены.

1. Добавляем обработчик смены вариации с переустановкой цены

В файл functions.php вашей темы или в отдельный файл подключаем JS:

add_action('wp_enqueue_scripts', function() {
    if (is_product()) {
        wp_enqueue_script('custom-variation-price', get_stylesheet_directory_uri() . '/js/custom-variation-price.js', ['jquery', 'wc-add-to-cart-variation'], '1.0', true);
    }
});

Создайте файл js/custom-variation-price.js с таким содержимым:

jQuery(function($) {
    $(document).on('found_variation', function(event, variation) {
        if (variation && variation.display_price && variation.display_price_html) {
            $('.woocommerce-variation-price .price').html(variation.display_price_html);
        }
    });
});

Этот код слушает событие found_variation, которое срабатывает при выборе вариации, и обновляет блок с ценой на странице.

2. Проверка корректности вывода цены в шаблоне

Убедитесь, что в файле single-product/add-to-cart/variable.php вашей темы есть элемент с классом woocommerce-variation-price. Если его нет, добавьте:

<div class="woocommerce-variation-price">
    <span class="price"><?php echo $product->get_price_html(); ?></span>
</div>

Как проверить, что исправление сработало

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

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

• JS-ошибки из-за конфликтов плагинов: отключите плагины по очереди, чтобы найти конфликтующий.
• Отсутствие элемента с классом woocommerce-variation-price в HTML: добавьте его вручную в шаблон.
• Кэширование скриптов или AJAX: очистите кэш браузера и кэш плагинов, временно отключите кэш.
• Некорректные цены вариаций: проверьте поля Regular Price и Sale Price в админке товара.

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

• Подключайте кастомный JS только на страницах товаров с вариациями для снижения нагрузки.
• Следите, чтобы скрипты загружались с правильными зависимостями ['jquery', 'wc-add-to-cart-variation'], иначе событие found_variation не сработает.
• Проверяйте пользовательские данные через нонсы и валидируйте на сервере, если планируете расширять функционал.
• Для больших магазинов с сотнями вариаций оптимизируйте загрузку данных вариаций через AJAX и кеширование.

Сравнение способов обновления цены вариаций