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

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

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

Проверьте, что у вас правильно созданы вариации с ценами в WooCommerce, и что в шаблоне товара подключён скрипт wc-add-to-cart-variation. Если цены не обновляются, возможно, нужно добавить кастомный JavaScript и PHP-логику.

Пошаговое решение

1. Создание вариативного товара с нужными атрибутами

Перейдите в админке WooCommerce в «Товары» → «Добавить новый». Вкладка «Атрибуты» — добавьте атрибуты и отметьте «Использовать для вариаций».

Далее во вкладке «Вариации» создайте вариации с базовыми ценами. Это базовая основа.

2. Добавление кастомного фильтра для динамического пересчёта цены

Добавьте следующий код в файл functions.php вашей дочерней темы или в плагин для кастомных функций:

add_filter('woocommerce_product_get_price', 'custom_dynamic_price_based_on_attributes', 10, 2);
add_filter('woocommerce_product_get_regular_price', 'custom_dynamic_price_based_on_attributes', 10, 2);

function custom_dynamic_price_based_on_attributes($price, $product) {
    if (is_admin()) return $price; // Не меняем цену в админке

    if ($product->is_type('variation')) {
        $variation_id = $product->get_id();
        $variation = wc_get_product($variation_id);
        $attributes = $variation->get_attributes();

        // Пример: если выбран атрибут color=red, добавляем 100 рублей
        if (isset($attributes['attribute_pa_color']) && $attributes['attribute_pa_color'] === 'red') {
            $price += 100;
        }
    }
    return $price;
}

В этом примере при выборе вариации с атрибутом color=red цена увеличивается на 100 рублей.

3. Обновление цены на фронтенде при выборе атрибутов (JavaScript)

Чтобы динамически менять цену без перезагрузки страницы, добавьте JS, который будет отслеживать выбор вариаций и подменять цену в DOM.

jQuery(document).ready(function($) {
    $('form.variations_form').on('found_variation', function(event, variation) {
        // Дополнительно изменяем цену в зависимости от атрибутов
        if (variation.attributes['attribute_pa_color'] === 'red') {
            var newPrice = parseFloat(variation.display_price) + 100;
            $('.woocommerce-variation-price .price').html(woocommerce_price(newPrice));
        } else {
            $('.woocommerce-variation-price .price').html(variation.price_html);
        }
    });

    // Функция форматирования цены (пример для рублей)
    function woocommerce_price(amount) {
        return '₽' + amount.toFixed(2);
    }
});

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

• Перейдите на страницу вариативного товара на фронтенде.
• Выберите атрибуты, включая тот, который должен менять цену (например, цвет «red»).
• Убедитесь, что цена меняется динамически и отображается с припиской +100 рублей к базовой.
• Проверьте разные вариации, чтобы цена менялась только там, где нужно.

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

• Цена не меняется на фронтенде: Возможно, JS не подключен или конфликтует с другими скриптами. Проверьте консоль браузера на ошибки.
• Цена не меняется в админке или в корзине: Фильтр woocommerce_product_get_price влияет только на отображение. Для правильного суммирования в корзине и оформлении заказа дополнительно используйте фильтр woocommerce_cart_item_price и хуки изменения стоимости в корзине.
• Атрибуты не совпадают: Убедитесь, что в коде используется правильный ключ атрибута с префиксом attribute_pa_ и slug атрибута в нижнем регистре.

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

• Не перегружайте функцию подсчёта цены сложными запросами к базе — лучше кэшировать результаты, если логика усложняется.
• Избегайте изменения цены напрямую в JavaScript без проверки на сервере — это может привести к уязвимостям и ошибкам в оплате.
• Используйте проверку текущего пользователя и nonce для защиты AJAX-запросов, если добавляете динамическую логику с серверной стороны.

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