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

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

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

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

• Откройте консоль браузера (F12) и проверьте наличие JS ошибок при смене вариации.
• Проверьте, что на странице присутствует скрипт wc-add-to-cart-variation.js.
• Проверьте, что функция обновления цены update_variation_values() вызывается корректно.
• Убедитесь, что вариации правильно настроены в админке WooCommerce с указанием цен.

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

Для принудительного обновления цены при смене вариации можно использовать следующий код, который добавляется в файл темы functions.php или в плагин для кастомных функций:

add_action('wp_footer', 'custom_update_variation_price_script');
function custom_update_variation_price_script() {
    if (is_product()) {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('form.variations_form').on('found_variation', function(event, variation) {
                var price_html = variation.price_html;
                $('.woocommerce-variation-price').html(price_html);
                $('.single_variation_wrap').trigger('show_variation');
            });
        });
        </script>
        <?php
    }
}

Этот скрипт слушает событие выбора вариации и обновляет блок цены вручную, что гарантирует корректное отображение.

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

jQuery(document).ready(function($) {
    $('form.variations_form').on('found_variation', function(event, variation) {
        if(variation.is_in_stock) {
            $('.single_add_to_cart_button').prop('disabled', false).show();
        } else {
            $('.single_add_to_cart_button').prop('disabled', true).hide();
        }
    });
});

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

• Очистите кэш браузера и кэш сайта (если установлен кэш-плагин).
• Перейдите на страницу товара с вариациями.
• Выберите разные вариации и убедитесь, что цена обновляется без перезагрузки страницы.
• Проверьте консоль браузера на отсутствие ошибок JavaScript.
• Проверьте, что кнопка "Добавить в корзину" активна только при наличии товара в выбранной вариации.

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

• Скрипт не подключается: проверьте, что код вставлен в условие is_product(), чтобы не загружать его на всех страницах.
• Конфликты с другими плагинами: отключите временно сторонние плагины, чтобы проверить, не блокируют ли они событие found_variation.
• Неправильный селектор цены: в некоторых темах класс цены может отличаться, уточните селектор в инструментах разработчика и замените .woocommerce-variation-price на актуальный.
• Кэширование и CDN: после изменений отключите кэширование или очистите кэш, иначе изменения не будут видны.

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

• Подключайте кастомные скрипты только на страницах товаров, чтобы не нагружать остальные страницы.
• Используйте wp_enqueue_script для подключения JS в продакшене, а не инлайновый скрипт в футере, чтобы избежать конфликтов.
• Проверяйте совместимость с версиями WooCommerce и WordPress при обновлениях.
• Если требуется более сложный функционал, рассмотрите создание отдельного плагина с безопасным хук-подключением.

Сравнение вариантов решения