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

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

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

Основные причины проблемы:

• Отсутствие вариаций с назначенными ценами в товаре;
• Не подключён стандартный скрипт wc-add-to-cart-variation или конфликт JS;
• Использование пользовательских атрибутов, которые не влияют на цену по умолчанию;
• Кэширование страницы мешает обновлению цены в реальном времени.

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

1. Настройка вариативного товара с ценами для каждой вариации

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

2. Подключение стандартного скрипта для обновления цены

Убедитесь, что на странице товара загружается скрипт wc-add-to-cart-variation. Если тема или кастомные скрипты отключают его, добавьте в functions.php:

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

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

Если нужно менять цену динамически по кастомным правилам, используйте JavaScript вместе с AJAX. Пример: при выборе определённого атрибута добавлять +500 рублей к цене.

jQuery(document).ready(function($) {
    $('form.variations_form').on('woocommerce_variation_select_change', function() {
        var basePrice = parseFloat($('.woocommerce-variation-price .price').text().replace(/[^\d,\.]/g, '').replace(',', '.')) || 0;
        var extraCost = 0;

        var selectedColor = $('select[name="attribute_pa_color"]').val();
        if (selectedColor === 'red') {
            extraCost = 500;
        }

        var newPrice = basePrice + extraCost;
        $('.woocommerce-variation-price .price').text(newPrice.toFixed(2) + ' ₽');
    });
});

Этот код прослушивает выбор атрибутов и добавляет условную доплату. Для более сложных правил используйте AJAX-запрос к серверу, который вернёт актуальную цену.

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

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

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

• Цена не меняется вообще: проверьте, подключён ли скрипт wc-add-to-cart-variation, нет ли конфликтов с другими JS.
• Цена обновляется, но не соответствует вариации: убедитесь, что у вариаций есть цены в админке, и атрибуты совпадают по slug.
• Кастомные скрипты сбивают стандартное поведение: при добавлении JS-логики используйте события WooCommerce, а не переписывайте стандартные функции.
• Кэширование мешает обновлению цены: отключите кэширование для страниц товаров или настройте исключения.

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

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

Сравнение способов автоматического изменения цены