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

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

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

Основные причины проблемы:

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

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

1. Проверяем правильность настройки вариаций в админке WooCommerce

В админке перейдите в редактирование товара типа «Вариативный». Вкладка «Вариации» должна содержать все необходимые вариации с установленными ценами.

Если вариации созданы, но цена не меняется — идём дальше.

2. Убеждаемся, что шаблон поддерживает стандартные скрипты WooCommerce

В шаблоне страницы товара должен вызываться хук woocommerce_single_product_summary и подключаться скрипт wc-single-product. Если кастомный шаблон, проверьте в functions.php или в single-product.php наличие:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('wc-single-product');
});

Без этого скрипта динамическое обновление цены работать не будет.

3. Реализуем динамическое изменение цены через JavaScript (если нужна кастомизация)

Если стандартные вариации не подходят и требуется менять цену по сложным правилам, можно использовать JavaScript + AJAX. Пример кода для темы или плагина:

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

        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'custom_get_variation_price',
                variation_data: data
            },
            success: function(response) {
                if(response && response.price_html) {
                    $('.woocommerce-variation-price').html(response.price_html);
                }
            }
        });
    });
});

В PHP добавляем обработчик AJAX:

add_action('wp_ajax_custom_get_variation_price', 'custom_get_variation_price_callback');
add_action('wp_ajax_nopriv_custom_get_variation_price', 'custom_get_variation_price_callback');
function custom_get_variation_price_callback() {
    parse_str($_POST['variation_data'], $variation_data);

    $product_id = intval($_POST['product_id'] ?? 0);
    $product = wc_get_product($product_id);

    if (!$product || !$product->is_type('variable')) {
        wp_send_json_error();
        wp_die();
    }

    $available_variations = $product->get_available_variations();
    foreach ($available_variations as $variation) {
        $match = true;
        foreach ($variation['attributes'] as $attr_name => $attr_value) {
            if (!isset($variation_data[$attr_name]) || $variation_data[$attr_name] !== $attr_value) {
                $match = false;
                break;
            }
        }
        if ($match) {
            $variation_obj = wc_get_product($variation['variation_id']);
            wp_send_json_success(['price_html' => $variation_obj->get_price_html()]);
            wp_die();
        }
    }
    wp_send_json_error();
    wp_die();
}

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

После настройки:

• Откройте страницу вариативного товара в режиме инкогнито или очистите кеш.
• Выберите различные комбинации атрибутов.
• Убедитесь, что цена на странице меняется без перезагрузки.
• Проверьте консоль браузера на отсутствие JavaScript ошибок (F12 -> Console).

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

Ошибка 1: Цена не меняется, хотя вариации есть

• Причина: не подключен скрипт wc-single-product.
• Исправление: добавьте wp_enqueue_script('wc-single-product'); в функции темы.

Ошибка 2: AJAX запросы возвращают ошибку 400 или 500

• Причина: неправильная обработка данных в PHP или отсутствие nonce проверки.
• Исправление: убедитесь, что данные разбираются через parse_str, и добавьте проверку nonce для безопасности.

Ошибка 3: Конфликты с другими плагинами

• Причина: другие плагины изменяют стандартные скрипты WooCommerce.
• Исправление: временно отключите плагины и проверьте работу. Используйте консоль браузера для поиска конфликтов.

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

• Добавляйте nonce в AJAX запросы и проверяйте их на сервере:

wp_localize_script('custom-script', 'custom_ajax_obj', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('custom_nonce')
]);

// В JS
$.ajax({
    data: {
        action: 'custom_action',
        nonce: custom_ajax_obj.nonce
    }
});

// В PHP
if (!wp_verify_nonce($_POST['nonce'], 'custom_nonce')) {
    wp_send_json_error('Invalid nonce');
    wp_die();
}

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

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