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

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

По умолчанию WooCommerce обновляет цену товара на странице при выборе вариаций, используя стандартный JavaScript. Но при кастомных темах или изменениях шаблонов это поведение может нарушаться: цена не меняется, либо меняется некорректно. Это приводит к путанице у пользователей и потере продаж.

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

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

Пошаговое решение

1. Подключение стандартного скрипта WooCommerce

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

function ensure_wc_variation_script() {
    if (is_product()) {
        wp_enqueue_script('wc-add-to-cart-variation');
    }
}
add_action('wp_enqueue_scripts', 'ensure_wc_variation_script');

2. Проверка шаблона вариаций

В файле single-product/add-to-cart/variable.php должен быть вызов:

<?php woocommerce_variable_add_to_cart(); ?>

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

3. Обработка кастомного отображения цены (если требуется)

Если у вас кастомный блок цены, который не обновляется стандартным JS, можно добавить следующий код для обновления цены через jQuery:

jQuery(document).ready(function($) {
    $('.variations_form').on('woocommerce_variation_select_change', function() {
        var variationData = $(this).data('product_variations');
        var selectedAttributes = {};
        $(this).find('select').each(function() {
            selectedAttributes[$(this).attr('name')] = $(this).val();
        });
        var price = '';
        $.each(variationData, function(index, variation) {
            var match = true;
            $.each(selectedAttributes, function(attrName, attrValue) {
                if (variation.attributes[attrName] !== attrValue) {
                    match = false;
                    return false;
                }
            });
            if (match && variation.price_html) {
                price = variation.price_html;
                return false;
            }
        });
        if (price) {
            $('.custom-price-block').html(price);
        }
    });
});

Замените .custom-price-block на селектор вашего блока с ценой.

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

• Откройте страницу товара с вариациями.
• В консоли браузера нет ошибок JavaScript.
• При смене вариаций цена меняется в блоке с ценой (стандартном или кастомном).
• Добавьте товар в корзину — цена в корзине соответствует выбранной вариации.

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

• Скрипт wc-add-to-cart-variation не загружается: Убедитесь, что в functions.php нет условий, которые отключают стандартные скрипты WooCommerce.
• Кастомный шаблон не содержит вызова woocommerce_variable_add_to_cart(): Верните вызов или используйте стандартный шаблон.
• JavaScript конфликтует с другими плагинами или темой: Отключите сторонние скрипты, протестируйте работу вариаций, затем включайте по одному для выявления конфликта.
• Вариации без цен: Все вариации должны иметь цену, иначе скрипт не сможет отобразить корректную стоимость.

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

• Не отключайте стандартные скрипты WooCommerce без крайней необходимости — они оптимизированы и проверены.
• Минимизируйте кастомный JS, используйте делегирование событий и проверяйте работу на мобильных устройствах.
• Обновляйте WooCommerce и тему, чтобы избежать несовместимостей с API вариаций.
• Используйте wp_enqueue_script для подключения скриптов, не вставляйте JS напрямую в шаблоны.

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