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

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

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

Как проверить проблему?

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

Пошаговое решение: программное изменение цены при смене вариации

Чтобы программно изменить цену при смене вариации, можно использовать AJAX и стандартные хуки WooCommerce. Рассмотрим пример, когда цена меняется с учетом дополнительного коэффициента, зависящего от вариации.

1. Добавляем пользовательское поле в вариации

Для начала добавим дополнительное поле "Коэффициент цены" в вариации товара, чтобы указывать множитель для цены:

add_action('woocommerce_variation_options_pricing', 'add_custom_price_coefficient_field', 10, 3); function add_custom_price_coefficient_field($loop, $variation_data, $variation) { woocommerce_wp_text_input(array( 'id' => 'price_coefficient[' . $variation->ID . ']', 'label' => __('Коэффициент цены', 'woocommerce'), 'desc_tip' => 'true', 'description' => __('Множитель цены для вариации, например 1.1 для +10%', 'woocommerce'), 'type' => 'number', 'custom_attributes' => array('step' => '0.01', 'min' => '0'), 'value' => get_post_meta($variation->ID, 'price_coefficient', true) ? get_post_meta($variation->ID, 'price_coefficient', true) : '1' )); }

2. Сохраняем значение коэффициента при сохранении вариации

add_action('woocommerce_save_product_variation', 'save_custom_price_coefficient_field', 10, 2); function save_custom_price_coefficient_field($variation_id, $i) { if (isset($_POST['price_coefficient'][$variation_id])) { $coefficient = floatval($_POST['price_coefficient'][$variation_id]); update_post_meta($variation_id, 'price_coefficient', $coefficient); }}

3. Изменяем цену на фронтенде с помощью JavaScript

Подключаем JS, который будет слушать выбор вариации и менять цену с учётом коэффициента:

add_action('wp_footer', 'custom_variation_price_script'); function custom_variation_price_script() { global $product; if (!$product || !$product->is_type('variable')) { return; } ?> <script type="text/javascript"> jQuery(function($){ var variationData = {};
<?php foreach ($product->get_available_variations() as $variation) { $coef = get_post_meta($variation['variation_id'], 'price_coefficient', true); if (!$coef) $coef = 1; ?> variationData[<?php echo $variation['variation_id']; ?>] = <?php echo $coef; ?>;
<?php } ?> $('form.variations_form').on('found_variation', function(event, variation) { if(variation && variation.variation_id && variationData[variation.variation_id]) { var coef = variationData[variation.variation_id]; var priceHtml = variation.price_html; if (coef != 1) { var priceNum = parseFloat(variation.display_price) * coef; var newPrice = priceNum.toFixed(2); var currencySymbol = priceHtml.replace(/[^\x00-\x7F]+|[0-9.,]/g, '').trim(); // упрощённо var newPriceHtml = currencySymbol + newPrice; $('.woocommerce-variation-price .price').html(newPriceHtml); } else { $('.woocommerce-variation-price .price').html(variation.price_html); } } }); }); </script> <?php }

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

• Перейдите на страницу товара с вариациями;
• Выберите вариацию с отличающимся коэффициентом (например, 1.1);
• Убедитесь, что цена меняется динамически, отражая умножение базовой цены вариации на коэффициент;
• Проверьте консоль браузера на отсутствие ошибок;
• Тестируйте с разными товарами и вариациями.

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

• Цена не меняется: Проверьте, что JS-код подключен и срабатывает; убедитесь, что селектор для цены совпадает с тем, что используется в вашей теме.
• Некорректное отображение цены: Проверьте форматирование и локализацию цены, возможно, нужно использовать функции WooCommerce для форматирования (например, wc_price() в PHP).
• Коэффициенты не сохраняются: Убедитесь, что поля корректно добавлены и сохраняются, проверьте права пользователя, который редактирует товар.
• Конфликт с другими плагинами или темой: Временно отключите сторонние плагины и переключитесь на стандартную тему, чтобы проверить влияние.

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

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

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