WooCommerce: как исправить рассинхрон цены и вариаций товара

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

Ниже — рабочий порядок диагностики и исправления. Без лишней теории: сначала проверяем, где именно ломается цепочка, потом правим причину, а не симптом.

Когда проблема действительно в вариациях, а не в цене товара

Перед правками важно понять, что именно не работает. WooCommerce обновляет цену вариативного товара на фронтенде через JavaScript-события формы вариаций. Если событие срабатывает, но цена не меняется, проблема обычно в шаблоне или скриптах. Если событие не срабатывает, чаще виноваты конфликт плагина, ошибка JS или неверная разметка.

Типичные симптомы

• цена на странице товара остается базовой, хотя вариация выбрана;
• цена меняется только после перезагрузки страницы;
• в карточке товара отображается «от» и не подхватывается конкретная сумма;
• после выбора вариации кнопка «В корзину» активируется, но цена в мини-корзине отличается;
• на одном шаблоне товара все работает, на другом — нет.

Быстрая диагностика в браузере

Откройте страницу товара и проверьте консоль браузера. Если там есть ошибки JavaScript, сначала устраняйте их. Для WooCommerce особенно критичны ошибки в скриптах темы, которые могут остановить обработку событий вариаций.

Полезно проверить и саму форму:

jQuery(function($) {
  var $form = $('form.variations_form');
  if (!$form.length) {
    console.log('Форма вариаций не найдена');
    return;
  }

  $form.on('found_variation show_variation reset_data', function(event, variation) {
    console.log('Событие:', event.type, variation ? variation.display_price : 'no variation');
  });
});

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

Что проверить в первую очередь

В 80% случаев причина лежит в одном из этих мест:

• в теме переопределен шаблон single-product/add-to-cart/variable.php;
• подключен кастомный JS, который перехватывает выбор вариации;
• кэшируется HTML страницы товара без учета вариаций;
• в карточке товара используется нестандартный блок цены, не связанный с WooCommerce hooks;
• плагин для оптимизации скриптов отложил или объединил файл WooCommerce так, что события перестали работать.

Если на сайте стоит плагин оптимизации, проверьте исключения для скриптов WooCommerce. Иногда достаточно не объединять и не откладывать wc-add-to-cart-variation и связанные с ним скрипты.

Пошаговое решение без ломки шаблона

Шаг 1. Убедитесь, что товар действительно вариативный

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

Шаг 2. Проверьте шаблон темы

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

Проверьте наличие файла:

wp-content/themes/your-theme/woocommerce/single-product/add-to-cart/variable.php

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

Шаг 3. Сбросьте влияние кэша и оптимизации

Очистите кэш страницы товара, кэш плагина, серверный кэш и CDN. Для вариативных товаров особенно опасен кэш HTML без корректной подстановки динамических данных. Если цена зависит от выбранной вариации, статический HTML может показывать устаревшее значение.

Если используется плагин оптимизации, добавьте исключения для WooCommerce-скриптов и проверьте работу после отключения минификации JS. Часто проблема исчезает сразу, и это хороший признак, что ломал именно обработчик скриптов.

Шаг 4. Не меняйте цену через прямой вывод в шаблоне

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

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

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'mytheme_variable_price_wrapper', 10 );

function mytheme_variable_price_wrapper() {
    global $product;

    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        woocommerce_template_single_price();
        return;
    }

    echo '<div class="product-price-wrap">';
    woocommerce_template_single_price();
    echo '</div>';
}

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

Если цена должна меняться по своему правилу

Иногда проблема не в баге, а в кастомной логике: цена зависит от атрибута, склада, роли пользователя или доп. параметра. Тогда нужно не «чинить» стандартную цену, а аккуратно менять цену вариации на уровне WooCommerce.

Для вариаций можно использовать фильтр woocommerce_product_variation_get_price. Ниже пример, который добавляет наценку для вариаций с конкретным значением атрибута. Код лучше размещать в плагине или в дочерней теме.

add_filter( 'woocommerce_product_variation_get_price', 'mytheme_variation_price_by_attribute', 10, 2 );
add_filter( 'woocommerce_product_variation_get_regular_price', 'mytheme_variation_price_by_attribute', 10, 2 );

function mytheme_variation_price_by_attribute( $price, $variation ) {
    if ( ! $variation instanceof WC_Product_Variation ) {
        return $price;
    }

    $attributes = $variation->get_attributes();

    if ( isset( $attributes['pa_size'] ) && 'xl' === $attributes['pa_size'] ) {
        $price = (float) $price + 300;
    }

    return $price;
}

Важно: если вы меняете цену на сервере, проверьте, что фронтенд тоже получает обновленное значение. Иначе в карточке будет одна сумма, а в корзине — другая.

Сравнение подходов: плагин, код или правка шаблона

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

После исправления не ограничивайтесь визуальной проверкой в карточке товара. Нужно пройти весь путь покупки:

1. откройте страницу вариативного товара в приватном окне;
2. выберите несколько разных вариаций;
3. убедитесь, что цена меняется без перезагрузки;
4. добавьте товар в корзину;
5. проверьте цену в корзине и на checkout;
6. очистите кэш и повторите тест еще раз.

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

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

Ошибка: цена выводится вручную через HTML

Когда разработчик вставляет цену в шаблон как статический текст, WooCommerce перестает управлять этим блоком. Исправление простое: вернуть стандартный вывод через woocommerce_template_single_price() или использовать штатные хуки.

Ошибка: конфликт с оптимизацией JS

Если минификация или отложенная загрузка ломает wc-add-to-cart-variation, цена не обновляется. Решение — исключить WooCommerce-скрипты из объединения и отложенной загрузки, затем проверить консоль на ошибки.

Ошибка: устаревший шаблон вариаций

Старые копии шаблонов в теме часто не совместимы с текущей версией WooCommerce. Если после обновления WooCommerce проблема появилась внезапно, сравните шаблон темы с актуальным шаблоном плагина.

Ошибка: кэшируется страница товара целиком

Если сервер или CDN отдает один и тот же HTML для всех посетителей, динамика вариаций может работать некорректно. Для таких страниц нужен аккуратный кэш, который не ломает JS-обновление цены.

Что делать, если проблема возвращается

Если после исправления все снова ломается после обновлений, лучше вынести кастомную логику в отдельный мини-плагин или mu-plugin, а не держать ее в functions.php. Так проще контролировать изменения и не потерять код при смене темы.

Для сайтов с большим количеством WooCommerce-правок полезно держать под рукой плагин для очистки лишнего мусора и контроля дублей, например Clearfy Pro: https://wpshop.ru/plugins/clearfy. Но использовать его стоит как инструмент для гигиены сайта, а не как замену нормальной отладки.

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