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

Проблема: стоимость товара не меняется при выборе различных атрибутов

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

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

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

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

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

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

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

Пример скрипта, который меняет цену на странице без перезагрузки:

jQuery(document).ready(function($) {
    function updatePrice() {
        var selectedAttr = $("select[name='attribute_pa_color']").val(); // пример для атрибута color
        var basePrice = parseFloat($('.woocommerce-Price-amount.amount').first().text().replace(/[^\d\.]/g, ''));
        var newPrice = basePrice;

        if (selectedAttr === 'red') {
            newPrice += 10; // добавляем 10 к цене
        } else if (selectedAttr === 'blue') {
            newPrice += 5; // добавляем 5
        }

        $('.woocommerce-Price-amount.amount').first().text(newPrice.toFixed(2) + ' ₽');
    }

    $('select[name^="attribute_"]').change(function() {
        updatePrice();
    });
    updatePrice();
});

Этот код нужно добавить в файл темы functions.php или подключить отдельно. Он отслеживает выбор атрибута color и обновляет цену на странице.

3. Меняем цену в корзине и на сервере

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

add_filter('woocommerce_add_cart_item_data', 'custom_add_cart_item_data', 10, 3);
function custom_add_cart_item_data($cart_item_data, $product_id, $variation_id) {
    if (isset($_POST['attribute_pa_color'])) {
        $cart_item_data['custom_price_modifier'] = $_POST['attribute_pa_color'];
    }
    return $cart_item_data;
}

add_action('woocommerce_before_calculate_totals', 'custom_change_price_in_cart', 20, 1);
function custom_change_price_in_cart($cart) {
    if (is_admin() && !defined('DOING_AJAX')) return;

    foreach ($cart->get_cart() as $cart_item) {
        if (isset($cart_item['custom_price_modifier'])) {
            $price = $cart_item['data']->get_price();
            switch ($cart_item['custom_price_modifier']) {
                case 'red':
                    $price += 10;
                    break;
                case 'blue':
                    $price += 5;
                    break;
            }
            $cart_item['data']->set_price($price);
        }
    }
}

Проверка результата

• На странице товара при выборе атрибута цена должна обновляться без перезагрузки.
• В корзине и на странице оформления заказа отображается изменённая цена с учётом выбранного атрибута.
• В админке заказов цена сохраняется корректно.

Частые ошибки и их устранение

• Цена не меняется на странице товара — ошибка может быть в селекторе jQuery или конфликт с другими скриптами. Проверьте консоль браузера и корректность селектора select[name='attribute_pa_color'].
• Цена в корзине не меняется — не добавлены правильные данные в cart_item_data или заблокировано кеширование. Убедитесь, что функции фильтров подключены и работают.
• Форматирование цены нарушено — при изменении цены вручную нужно использовать методы WooCommerce для корректного отображения валюты и цены.

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

• Для больших товаров с множеством атрибутов лучше использовать вариации WooCommerce — они оптимизированы для таких случаев.
• Не храните цены напрямую в cart_item_data, передавайте только параметры для расчёта цены и вычисляйте цену динамически в хуках.
• Избегайте прямого изменения HTML цены на фронтенде без проверки — используйте фильтры и хуки WooCommerce для изменения цены на серверной стороне.

Сравнение вариантов реализации