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

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

Одна из частых задач в WooCommerce — обновление стоимости товара при выборе варианта (атрибута) на странице товара. Иногда цена не обновляется автоматически, что вызывает путаницу у покупателей и снижает конверсию. Проблема проявляется, когда вариации товара имеют разные цены, но фронтенд не отражает корректно выбранную стоимость, либо цена обновляется некорректно.

Для диагностики:

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

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

1. Использование стандартного функционала WooCommerce

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

2. Добавление кастомного JavaScript для обновления цены

Если тема не обновляет цену, можно добавить JS, который будет слушать событие выбора варианта и обновлять цену.

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

Этот скрипт слушает событие выбора варианта и обновляет блок с ценой .woocommerce-variation-price .price.

3. Хук для автоматического изменения цены товара при смене варианта (PHP)

Иногда нужно дополнительно изменить цену в корзине или при расчётах. Для этого используем хук woocommerce_before_calculate_totals:

add_action('woocommerce_before_calculate_totals', 'custom_change_price_based_on_variation', 20, 1);
function custom_change_price_based_on_variation($cart) {
  if (is_admin() && !defined('DOING_AJAX')) return;
  
  foreach ($cart->get_cart() as $cart_item) {
    if (!empty($cart_item['variation_id'])) {
      $variation_id = $cart_item['variation_id'];
      $variation = wc_get_product($variation_id);
      if ($variation) {
        // Например, увеличим цену на 10% для варианта с определённым атрибутом
        $attributes = $variation->get_attributes();
        if (!empty($attributes['pa_color']) && $attributes['pa_color'] === 'red') {
          $original_price = $variation->get_price();
          $new_price = $original_price * 1.1; // +10%
          $cart_item['data']->set_price($new_price);
        }
      }
    }
  }
}

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

• Откройте страницу товара с вариациями и выберите разные варианты.
• Убедитесь, что цена на странице меняется сразу после выбора варианта.
• Добавьте товар в корзину и проверьте корректность цены в корзине и оформлении заказа.
• Если применена логика изменения цены в PHP, проверьте, что цена изменилась согласно условиям.
• Проверьте консоль браузера для отсутствия ошибок JavaScript.

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

• Цена не меняется на странице: вероятно, тема не использует стандартные шаблоны WooCommerce. Проверьте наличие woocommerce_single_product_summary и стандартных хуков.
• JavaScript не работает: убедитесь, что jQuery подключен и нет конфликтов с другими скриптами.
• Цена меняется, но в корзине неверно: проверьте, что хук woocommerce_before_calculate_totals работает корректно, и не сбрасывается цена плагинами кеширования.
• Кэш страницы мешает обновлению цены: отключите кэш на страницах товара или настройте исключения.

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

• Всегда проверяйте, что ваш PHP-код не вызывает ошибок и не замедляет загрузку корзины.
• Кэшируйте статичные части страницы, но исключайте страницы с динамическими элементами WooCommerce.
• Используйте дочернюю тему для внесения изменений, чтобы не потерять их при обновлении.
• Для кастомного JS лучше загружать скрипты через wp_enqueue_script с правильной зависимостью от jQuery.

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