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

Проблема: как автоматически менять цену товара при выборе определённых атрибутов в WooCommerce

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

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

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

• Созданы ли вариации с разными ценами — если да, то WooCommerce меняет цену автоматически;
• Если вариации не создавали, а атрибуты просто добавлены как фильтры, цена не меняется;
• Проверить консоль браузера на ошибки JavaScript, которые могут мешать динамическому обновлению;
• Убедиться, что тема корректно поддерживает вариации и AJAX обновление цены.

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

1. Добавляем пользовательский JavaScript для отслеживания выбора атрибутов

Этот скрипт будет слушать изменение select-элементов атрибутов и отправлять AJAX-запрос на сервер за новой ценой.

jQuery(document).ready(function($) {
    $('form.variations_form').on('change', 'select', function() {
        var form = $(this).closest('form');
        var data = form.serialize();

        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'custom_get_price',
                data: data,
                product_id: form.find('input[name=product_id]').val()
            },
            success: function(response) {
                if(response.success) {
                    $('.woocommerce-Price-amount.amount').text(response.data.price_html);
                }
            }
        });
    });
});

2. Добавляем PHP обработчик AJAX запроса в functions.php темы или в плагин

add_action('wp_ajax_custom_get_price', 'custom_get_price_callback');
add_action('wp_ajax_nopriv_custom_get_price', 'custom_get_price_callback');

function custom_get_price_callback() {
    parse_str($_POST['data'], $form_data);
    $product_id = intval($_POST['product_id']);

    // Получаем продукт
    $product = wc_get_product($product_id);
    if(!$product) {
        wp_send_json_error();
        wp_die();
    }

    // Логика изменения цены в зависимости от атрибутов
    $price = $product->get_price();

    // Пример: если выбран цвет "красный", добавляем 500 рублей
    if(isset($form_data['attribute_pa_color']) && $form_data['attribute_pa_color'] === 'krasnyj') {
        $price += 500;
    }

    // Форматируем цену
    $price_html = wc_price($price);

    wp_send_json_success(['price_html' => $price_html]);
    wp_die();
}

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

• Откройте карточку товара с атрибутами (например, цвет, размер);
• При выборе атрибутов цена должна динамически изменяться без перезагрузки страницы;
• В консоли браузера не должно быть ошибок JavaScript;
• Если цена не меняется, проверьте правильность селекторов в JS и наличие AJAX-обработчика;
• Убедитесь, что AJAX-запрос уходит и приходит корректный ответ (Network в DevTools).

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

• Ошибка: AJAX-запрос не отправляется.
  Причина: Неправильный селектор формы или конфликт JS.
  Решение: Проверьте, что форма имеет класс variations_form, подключите jQuery правильно.
• Ошибка: PHP обработчик не вызывается.
  Причина: Неправильное имя действия или забыли подключить хуки.
  Решение: Проверьте add_action('wp_ajax_...') и что AJAX URL доступен.
• Ошибка: Цена не обновляется визуально.
  Причина: Неверный селектор для вывода цены.
  Решение: Проверьте HTML-структуру темы и замените селектор .woocommerce-Price-amount.amount на актуальный.

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

• Заворачивайте AJAX обработчики в проверку nonce для защиты от CSRF;
• Кэшируйте результат цены, если логика сложная, чтобы снизить нагрузку на сервер;
• Минимизируйте JS код и подключайте его только на страницах товаров;
• Используйте wp_localize_script для передачи параметров AJAX URL и nonce;
• Тестируйте совместимость с кеширующими плагинами и CDN.

Сравнение вариантов реализации динамической цены

Вариант	Преимущества	Недостатки
Вариации WooCommerce	Полная интеграция, автоматическое управление ценами	Требует создания всех вариаций, сложнее в администрировании
Код с AJAX, как в статье	Гибкость, не нужно создавать вариации	Требует кастомной разработки и тестирования
Плагины для динамических цен	Быстрая настройка, поддержка обновлений	Зависимость от стороннего кода, возможны конфликты