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

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

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

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

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

• Правильно ли настроены вариации товара в админке WooCommerce.
• Активна ли опция Use AJAX to refresh variations в теме или плагинах.
• Нет ли конфликтов JS в консоли браузера (открывается через F12 → Console).
• Обновляется ли ценовой HTML-блок при смене вариации.
• Есть ли кастомные скрипты, которые блокируют стандартное обновление.

Проверка консоли браузера

Откройте страницу товара с вариациями, выберите атрибут и наблюдайте консоль на ошибки JavaScript. Частая ошибка — конфликт jQuery или неправильно подключён скрипт вариаций WooCommerce.

Пошаговое решение задачи

1. Убедитесь, что вариации созданы корректно

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

2. Подключите стандартный скрипт вариаций

В functions.php вашей темы добавьте, если он не подключается автоматически:

function enqueue_wc_variation_script() {
    if ( is_product() ) {
        wp_enqueue_script( 'wc-add-to-cart-variation' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_wc_variation_script' );

3. Добавьте кастомную логику изменения цены и наличия

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

add_filter( 'woocommerce_available_variation', 'custom_variation_data' );
function custom_variation_data( $variation ) {
    // Например, добавим наценку 10% для варианта с атрибутом color = red
    if ( isset( $variation['attributes']['attribute_pa_color'] ) && $variation['attributes']['attribute_pa_color'] === 'red' ) {
        $variation['price_html'] = wc_price( $variation['display_price'] * 1.1 );
        $variation['availability_html'] = '<p class="stock in-stock">В наличии с наценкой</p>';
    }
    return $variation;
}

jQuery(function($){
    // Обработчик события выбора вариации
    $('.variations_form').on('show_variation', function(event, variation) {
        if(variation.price_html){
            $('.woocommerce-variation-price').html(variation.price_html);
        }
        if(variation.availability_html){
            $('.woocommerce-variation-availability').html(variation.availability_html);
        }
    });
});

4. Проверка ajax для обновления данных

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

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

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

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

• Скрипт wc-add-to-cart-variation не подключается: убедитесь, что тема не отключает стандартные скрипты WooCommerce. Добавьте вызов вручную.
• Несоответствие атрибутов в PHP и JS: в PHP используйте правильный ключ атрибута (с приставкой attribute_pa_ для глобальных атрибутов). В JS проверяйте наличие и обновляйте правильные DOM элементы.
• Кэширование страниц мешает обновлению: отключите кэширование для страниц товаров или корректно настройте исключения в плагинах кэширования.
• Конфликты с плагинами: временно отключите плагины, чтобы выявить источник конфликтов.

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

• Не перегружайте страницу лишними AJAX-запросами — используйте локальное кеширование вариаций.
• Проверяйте перед выводом данных на безопасность — не выводите необработанные данные в HTML.
• Используйте стандартные хуки WooCommerce для максимальной совместимости.
• Регулярно тестируйте изменения в тестовой среде, особенно при обновлении WooCommerce и тем.

Сравнение подходов: плагин vs кастомный код