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

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

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

• Конфликт JavaScript с темой или плагинами, блокирующий обновление цены.
• Кастомные шаблоны вариаций, которые не поддерживают динамическое обновление цены.
• Отсутствие правильной инициализации скрипта wc-single-product или его отключение.

Проверить наличие ошибки можно в консоли браузера (F12 → Console) и в логах сервера.

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

1. Проверка стандартного функционала

Для начала убедитесь, что в вашей теме подключен стандартный скрипт WooCommerce для продуктов:

function enqueue_wc_scripts() {
    if ( is_product() ) {
        wp_enqueue_script( 'wc-single-product' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_wc_scripts' );

Если скрипт не подключается, динамическое обновление цены работать не будет.

2. Исправление кастомных шаблонов

Если вы переопределяете шаблон single-product/add-to-cart/variable.php, убедитесь, что в нем используются стандартные селекторы и триггеры. Например, элемент селектора вариаций должен иметь класс variations_form и атрибуты:

<form class="variations_form cart" data-product_id="123">

Также проверьте, что внутри формы есть блок с классом woocommerce-variation-price, куда выводится цена вариации.

3. Принудительное обновление цены через JS

Если стандартный механизм не работает, можно добавить кастомный скрипт для обновления цены при смене вариации:

jQuery(document).ready(function($){
    $('.variations_form').on('found_variation', function(event, variation) {
        var price_html = variation.price_html;
        $('.woocommerce-variation-price').html(price_html);
    });
});

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

4. Автоматическое изменение цены на основе пользовательских условий

Если нужно не просто показать цену вариации, а изменить ее динамически (например, добавить скидку или наценку), можно использовать хук woocommerce_available_variation на стороне PHP:

add_filter( 'woocommerce_available_variation', 'custom_modify_variation_price', 10, 3 );
function custom_modify_variation_price( $variation_data, $product, $variation ) {
    // Добавим 10% наценку ко всем вариациям
    $price = (float) $variation->get_price();
    $new_price = $price * 1.1;
    $variation_data['price_html'] = wc_price( $new_price );
    $variation_data['display_price'] = $new_price;
    $variation_data['display_regular_price'] = $new_price;
    return $variation_data;
}

Такой фильтр изменит цену на фронтенде сразу при выборе вариации.

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

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

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

• Скрипт wc-single-product не подключается: добавьте его вручную через wp_enqueue_script.
• Конфликты JavaScript: отключите сторонние плагины по очереди, чтобы выявить виновника.
• Неверные селекторы в кастомных шаблонах: используйте стандартные классы WooCommerce (например, variations_form, woocommerce-variation-price).
• Кэширование: если используется кэш, отключите его на время тестирования.

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

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

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