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

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

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

Чтобы диагностировать проблему:

• Откройте консоль браузера (F12) и проверьте наличие ошибок JavaScript при выборе вариаций.
• Отключите все сторонние плагины, кроме WooCommerce, и переключитесь на стандартную тему Storefront.
• Проверьте, изменяется ли цена при смене вариаций без кастомных доработок.
• Проверьте, не кэшируется ли страница слишком агрессивно (Cloudflare, плагин кэширования).

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

Если стандартный механизм не подходит и нужно программно изменить логику обновления цены (например, добавить свои надбавки или скидки), можно использовать JavaScript вместе с PHP-обработкой:

1. Добавьте PHP-функцию для передачи данных вариаций в JavaScript

add_action('wp_enqueue_scripts', function() {
    if (is_product()) {
        global $product;
        if ($product->is_type('variable')) {
            $variations = [];
            foreach ($product->get_available_variations() as $variation) {
                $variations[$variation['variation_id']] = $variation['display_price'];
            }
            wp_localize_script('wc-add-to-cart-variation', 'customVariationPrices', $variations);
        }
    }
});

Этот код добавляет объект customVariationPrices с ценами вариаций в скрипт WooCommerce.

2. Напишите JavaScript для изменения цены на странице при выборе вариации

jQuery(function($) {
    $('form.variations_form').on('found_variation', function(event, variation) {
        var price = customVariationPrices[variation.variation_id];
        if (price) {
            // Добавим свою логику, например, наценку 10%
            var newPrice = price * 1.1;
            // Обновляем вывод цены
            $('.woocommerce-variation-price .price').html(
                new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(newPrice)
            );
        }
    });
});

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

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

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

• Невыводится цена после выбора вариации: Проверьте, что селектор .woocommerce-variation-price .price соответствует вашей теме. В некоторых темах структура HTML может отличаться.
• JavaScript-ошибки: Убедитесь, что скрипт подключается после jQuery и WooCommerce скриптов. Используйте wp_enqueue_script с зависимостью от jquery и wc-add-to-cart-variation.
• Кэширование не позволяет обновить цену: Отключите кэширование для страниц товаров или настройте исключения.
• Цены не локализуются: В примере используется Intl.NumberFormat — поддерживается современными браузерами. Для старых браузеров можно использовать PHP для форматирования цены.

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

• Не перегружайте страницу лишними данными вариаций — передавайте только необходимые поля.
• Используйте wp_localize_script для передачи данных из PHP в JS, а не хардкодьте в скриптах.
• Следите за совместимостью с WooCommerce и обновлениями, так как структура HTML и JS хуков может меняться.
• Избегайте изменения цены на сервере без валидации — клиенты могут подделать цену. Если нужна надежная логика, вычисляйте цену на сервере при добавлении в корзину с помощью хуков WooCommerce.

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