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

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

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

Для диагностики:

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

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

1. Проверка корректности цен в вариациях

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

2. Добавление пользовательского скрипта для обновления цены

В некоторых кастомных темах скрипты WooCommerce могут не работать как надо. В таком случае добавьте следующий JavaScript в файл functions.php вашей дочерней темы или через плагин для пользовательских скриптов:

add_action('wp_enqueue_scripts', function() {
    if (is_product()) {
        wp_add_inline_script('wc-add-to-cart-variation', "
            jQuery(document).ready(function($) {
                $('.variations_form').on('woocommerce_variation_select_change', function() {
                    var variation = $(this).data('product_variations').find(v => v.variation_id == $(this).find('input[name=\'variation_id\']').val());
                    if (variation) {
                        $('.woocommerce-variation-price .price').html(variation.price_html);
                    }
                });
            });
        ");
    }
});

Этот код добавляет обработчик события выбора варианта и обновляет цену на странице без перезагрузки.

3. Проверка правильности работы AJAX вариаций

WooCommerce использует AJAX для загрузки информации о вариациях. Убедитесь, что файл wc-add-to-cart-variation.js подключается. Для этого в консоли браузера выполните:

jQuery('.variations_form').length
// Должно вернуть 1 или больше

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

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

• Откройте страницу товара с вариациями.
• Измените вариант в выпадающем списке.
• Проверьте, обновилась ли цена сразу под кнопкой «В корзину» без перезагрузки страницы.
• Проверьте консоль на отсутствие ошибок JavaScript.

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

• Не обновляется цена варианта при смене выбора: Проверьте, подключён ли скрипт wc-add-to-cart-variation.js. Если нет, исправьте подключение темы.
• Цена обновляется, но отображается неверно: Убедитесь, что у вариаций корректно заполнено поле «Цена» и валютные настройки WooCommerce не конфликтуют с темой.
• JS-ошибки в консоли: Ошибки в сторонних скриптах могут блокировать стандартные события WooCommerce. Отключите проблемные плагины по очереди.
• Кэширование страницы: Если сайт использует кэш, отключите кэширование для страниц товаров или настройте исключения для AJAX-запросов WooCommerce.

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

• Используйте дочернюю тему для внесения изменений в functions.php, чтобы избежать потери изменений при обновлении темы.
• Добавляйте скрипты через wp_enqueue_scripts, избегая прямого вставления кода в шаблоны.
• Проверьте, что AJAX-запросы WooCommerce работают корректно и не блокируются файерволом или плагинами безопасности.
• Оптимизируйте кэширование, отключая кэш на страницах корзины и оформления заказа, чтобы избежать проблем с отображением актуальных цен.

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