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

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

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

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

Как реализовать автоматическое обновление цены при выборе атрибутов

1. Настройка вариаций в WooCommerce

Убедитесь, что у товара задан тип "Вариативный товар" и созданы вариации с разными ценами. Для каждой вариации проставьте цену в соответствующем поле.

2. Проверка работы стандартного JS WooCommerce

WooCommerce использует скрипт add-to-cart-variation.js для обновления цены на странице товара. Проверьте в консоли браузера (F12 > Console), нет ли ошибок JavaScript.

add-to-cart-variation.js: отвечает за события изменения атрибутов и обновление цены в DOM.

3. Пример кастомного кода для динамического изменения цены

Если нужно добавить дополнительную логику изменения цены в зависимости от выбранных атрибутов, можно использовать JS и PHP хуки WooCommerce. Например, увеличить цену на 10% при выборе определенного атрибута:

jQuery(document).ready(function($) {
  $('.variations_form').on('woocommerce_variation_select_change', function() {
    var selectedAttr = $('select[name="attribute_pa_color"]').val();
    var priceContainer = $('.woocommerce-variation-price .price');
    var basePrice = parseFloat(priceContainer.data('base-price')) || 0;
    if (!priceContainer.data('base-price')) {
      priceContainer.data('base-price', priceContainer.text().replace(/[^0-9\.]/g, ''));
    }
    if (selectedAttr === 'red') {
      var newPrice = basePrice * 1.1; // +10%
      priceContainer.text(newPrice.toFixed(2) + ' ₽');
    } else {
      priceContainer.text(basePrice.toFixed(2) + ' ₽');
    }
  });
});

Этот скрипт слушает изменение атрибута pa_color и корректирует цену в блоке отображения вариации.

4. Обработка на стороне сервера (опционально)

Для изменения цены в корзине и при оформлении заказа используйте хук woocommerce_before_calculate_totals:

add_action('woocommerce_before_calculate_totals', function( $cart ) {
  if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return;
  foreach ( $cart->get_cart() as $cart_item ) {
    $product = $cart_item['data'];
    $attributes = $cart_item['variation'];
    if ( isset($attributes['attribute_pa_color']) && $attributes['attribute_pa_color'] === 'red' ) {
      $price = $product->get_price();
      $new_price = $price * 1.1; // +10%
      $product->set_price( $new_price );
    }
  }
}, 10, 1);

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

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

Частые ошибки и способы их устранения

• Цена не меняется на фронтенде: Проверьте, подключён ли скрипт add-to-cart-variation.js. Возможно, тема или плагин его отключают.
• JS ошибки в консоли: Найдите конфликтующие скрипты, отключите плагины по очереди, чтобы выявить источник проблемы.
• Кэш не обновляет цену: Очистите кэш браузера и серверный кэш (например, плагин кэширования), отключите CDN, если нужно.
• Цена в корзине не совпадает с фронтендом: Проверьте, что серверный фильтр woocommerce_before_calculate_totals корректно меняет цену.

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

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

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