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

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

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

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

Если вы используете простые товары с дополнительными атрибутами, и при выборе атрибутов цена не меняется, возможные причины:

• Отсутствует скрипт для динамического обновления цены при выборе атрибутов.
• Атрибуты не связаны с вариациями или не передаются на фронтенд.
• Не реализована логика расчета цены на основе выбранных атрибутов.

Для вариативных товаров WooCommerce обновляет цену автоматически, но для кастомных случаев нужен собственный код.

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

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

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

2. Добавляем HTML-атрибуты в шаблон товара

Добавьте в файл single-product/add-to-cart/simple.php (или через хук) код для отображения атрибутов как <select> с классом для JS обработки:

add_action('woocommerce_before_add_to_cart_button', function() {
    global $product;
    $attributes = $product->get_attributes();
    if (empty($attributes)) return;
    foreach ($attributes as $attribute_name => $attribute) {
        if ($attribute->is_taxonomy()) {
            $terms = wc_get_product_terms($product->get_id(), $attribute_name, array('fields' => 'names'));
        } else {
            $terms = $attribute->get_options();
        }
        echo '<label>' . wc_attribute_label($attribute_name) . '</label>';
        echo '<select class="custom-attribute-select" data-attribute-name="' . esc_attr($attribute_name) . '">';
        foreach ($terms as $term) {
            echo '<option value="' . esc_attr($term) . '">' . esc_html($term) . '</option>';
        }
        echo '</select>';
    }
});

3. Реализуем JS для динамического изменения цены

Добавьте JavaScript, который слушает изменения в селекторах и отправляет AJAX-запрос для получения новой цены по выбранным атрибутам:

jQuery(document).ready(function($) {
    function updatePrice() {
        var data = { action: 'custom_get_price', product_id: woocommerce_params.product_id, attributes: {} };
        $('.custom-attribute-select').each(function() {
            var attrName = $(this).data('attribute-name');
            var val = $(this).val();
            data.attributes[attrName] = val;
        });
        $.post(woocommerce_params.ajax_url, data, function(response) {
            if (response.success) {
                $('.woocommerce-Price-amount.amount').text(response.data.price_html);
            }
        });
    }
    $('.custom-attribute-select').on('change', updatePrice);
    updatePrice();
});

4. Обработка AJAX-запроса в PHP

В functions.php добавьте обработчик, который на основе выбранных атрибутов рассчитывает цену и возвращает HTML для обновления:

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() {
    if (empty($_POST['product_id']) || empty($_POST['attributes']) || !is_array($_POST['attributes'])) {
        wp_send_json_error('Invalid data');
    }
    $product_id = intval($_POST['product_id']);
    $attributes = $_POST['attributes'];
    $product = wc_get_product($product_id);
    if (!$product) {
        wp_send_json_error('Product not found');
    }
    $base_price = $product->get_price();
    // Пример: увеличение цены на 10% за каждый выбранный атрибут с конкретным значением
    $price = $base_price;
    foreach ($attributes as $attr_name => $attr_value) {
        // Для примера условие: если значение атрибута 'color' равно 'red', добавляем 10%
        if ($attr_name === 'pa_color' && $attr_value === 'red') {
            $price *= 1.1; // +10%
        }
        // Добавьте свои условия для других атрибутов
    }
    $formatted_price = wc_price($price);
    wp_send_json_success(array('price_html' => $formatted_price));
}

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

• На странице товара выберите разные значения атрибутов.
• Цена должна обновляться без перезагрузки страницы.
• Проверьте, что AJAX-запросы успешно возвращают обновлённую цену (в инструментах разработчика браузера, вкладка Network).

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

• Цена не меняется при выборе атрибутов: Проверьте, что у селекторов правильные классы и data-атрибуты, а JS загружен и не содержит ошибок.
• AJAX-запросы возвращают ошибку: Убедитесь, что wp_ajax_ обработчики зарегистрированы, и что вызов wp_send_json_success используется корректно.
• Атрибуты не передаются или имеют неправильные имена: Используйте правильные таксономии атрибутов WooCommerce, например, pa_color, а не просто color.
• Цена рассчитывается неверно: Проверьте логику расчёта в PHP, используйте дебаггинг и вывод значений для проверки.

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

• Санитизируйте входные данные в AJAX-обработчике (sanitize_text_field, intval).
• Кэшируйте результаты сложных расчётов, если они ресурсоёмкие.
• Минимизируйте количество AJAX-запросов, используйте debounce на JS-обработчиках.
• Проверяйте nonce для защиты от CSRF, добавьте nonce в AJAX-запросы и проверяйте в PHP.

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