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

Почему важно менять стоимость товара при выборе атрибутов

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

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

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

• Вы используете простой товар с атрибутами, а не вариации.
• Атрибуты не связаны с вариациями или вариации не созданы в админке.
• Для динамического изменения цены без перезагрузки не подключен JavaScript или отсутствует кастомный скрипт.

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

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

1. Добавляем кастомные атрибуты к товару

В админке WooCommerce создайте товар с атрибутами (например, «Цвет» с опциями «Красный», «Синий»). Не создавайте вариации — мы будем менять цену через скрипт.

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

Для каждого атрибута зададим дополнительную стоимость. Например:

function get_attribute_price_adjustment($attribute, $value) {
    $prices = [
        'pa_color' => [
            'red' => 100, // +100 рублей
            'blue' => 50, // +50 рублей
        ],
        'pa_size' => [
            'large' => 200, // +200 рублей
            'small' => 0,
        ],
    ];
    if (isset($prices[$attribute][$value])) {
        return $prices[$attribute][$value];
    }
    return 0;
}

3. Выводим базовую цену и блок выбора атрибутов в шаблоне

В шаблоне single-product.php или через хуки выведите цену и поля выбора атрибутов. Важно, чтобы атрибуты имели классы или id для JS. Например:

<span id="product-price"><?php echo wc_price($product->get_price()); ?></span>
<select id="pa_color" name="attribute_pa_color">
  <option value="red">Красный</option>
  <option value="blue">Синий</option>
</select>

4. Добавляем JavaScript для пересчёта цены на фронтенде

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

jQuery(document).ready(function($){
  var basePrice = parseFloat($('#product-price').data('base-price')) || <?php echo $product->get_price(); ?>;
  var adjustments = {
    'pa_color': {
      'red': 100,
      'blue': 50
    },
    'pa_size': {
      'large': 200,
      'small': 0
    }
  };
  function updatePrice() {
    var newPrice = basePrice;
    $('select[name^="attribute_"]').each(function(){
      var attr = $(this).attr('id');
      var val = $(this).val();
      if (adjustments[attr] && adjustments[attr][val]) {
        newPrice += adjustments[attr][val];
      }
    });
    $('#product-price').text(newPrice.toLocaleString('ru-RU', {style: 'currency', currency: 'RUB'}));
  }
  $('select[name^="attribute_"]').on('change', updatePrice);
  updatePrice();
});

5. Обработка цены при добавлении в корзину

Чтобы новая цена учитывалась при добавлении товара в корзину, используйте фильтр woocommerce_add_cart_item_data и woocommerce_before_calculate_totals:

add_filter('woocommerce_add_cart_item_data', 'custom_add_cart_item_price_data', 10, 2);
function custom_add_cart_item_price_data($cart_item_data, $product_id) {
    if (isset($_POST['attribute_pa_color'])) {
        $color = sanitize_text_field($_POST['attribute_pa_color']);
        $price_adjustment = get_attribute_price_adjustment('pa_color', $color);
        $cart_item_data['custom_price_adjustment'] = $price_adjustment;
    }
    // Добавьте аналогично для других атрибутов
    return $cart_item_data;
}

add_action('woocommerce_before_calculate_totals', 'custom_change_cart_item_price', 20, 1);
function custom_change_cart_item_price($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;
    foreach ($cart->get_cart() as $cart_item_key => $cart_item) {
        if (isset($cart_item['custom_price_adjustment'])) {
            $original_price = $cart_item['data']->get_price(false);
            $new_price = $original_price + $cart_item['custom_price_adjustment'];
            $cart_item['data']->set_price($new_price);
        }
    }
}

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

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

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

• Цена не меняется при выборе атрибута: не подключен JavaScript или неверно выбраны селекторы. Проверьте консоль браузера на ошибки и корректность id/классов.
• Цена меняется на странице, но не учитывается в корзине: отсутствует обработка фильтра woocommerce_before_calculate_totals для изменения цены товара в корзине.
• Кэширование мешает обновлению цены: отключите кэш для страниц товаров или добавьте AJAX-обработку с корректным обновлением цены.
• Сложная логика ценообразования: лучше использовать вариации WooCommerce или готовые плагины для управления динамическими ценами.

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

• При работе с пользовательскими данными всегда используйте sanitize_text_field() и другие функции очистки входных данных.
• Не храните сложные данные о ценах в сессиях или скрытых полях без проверки — используйте серверные фильтры для корректного подсчёта.
• Добавляйте минимально необходимый JavaScript и стили, чтобы не замедлять загрузку страницы.
• Если используете кэширование страниц, убедитесь, что динамическая часть (цена) обновляется корректно, например, через AJAX или фрагменты WooCommerce.

Сравнение вариантов решения динамической цены при выборе атрибутов