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

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

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

Основные симптомы:

• Цена в карточке товара не меняется при выборе варианта;
• Добавленная в корзину цена не соответствует выбранному варианту;
• Обновление цены требует перезагрузки страницы.

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

1. Включаем стандартный скрипт вариаций WooCommerce

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

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

2. Проверяем HTML-шаблон вариаций в теме

Для корректной работы цены у вариаций в шаблоне single-product/variations.php должны присутствовать правильные селекторы и data-атрибуты. Если тема сильно кастомизирована, стоит сверить шаблон с оригиналом WooCommerce, чтобы не нарушить логику.

3. Добавляем кастомный JavaScript для обновления цены

Если стандартный скрипт не подходит, можно добавить свой код. Например, на событие выбора варианта обновлять цену:

jQuery(document).ready(function($) {
    $('.variations_form').on('found_variation', function(event, variation) {
        var price_html = variation.price_html;
        $('.woocommerce-variation-price .price').html(price_html);
    });

    $('.variations_form').on('reset_data', function() {
        $('.woocommerce-variation-price .price').html('');
    });
});

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

Чтобы убедиться, что цена меняется автоматически:

1. Откройте страницу товара с вариациями.
2. Выберите разные варианты из выпадающих списков.
3. Проверьте, что цена в блоке .woocommerce-variation-price .price обновляется без перезагрузки.
4. Добавьте товар в корзину, убедитесь, что цена соответствует выбранной вариации.

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

• Скрипт wc-add-to-cart-variation не подключён — цена не обновляется. Проверьте подключение скрипта, как в пункте 1.
• Кастомный шаблон не содержит нужных селекторов — JavaScript не находит элементы для обновления цены. Проверьте HTML и сравните с оригинальным шаблоном WooCommerce.
• Конфликт с другим JavaScript — цена обновляется некорректно или с ошибками. Проверьте консоль браузера на ошибки, отключите сторонние скрипты по очереди.
• Кэширование страницы — изменения не видны из-за кэширования. Очистите кэш сайта и браузера.

Практические советы по оптимизации и безопасности

• Используйте стандартные хуки и скрипты WooCommerce, чтобы избежать проблем с совместимостью.
• Добавляйте кастомный JS только на страницы товаров, чтобы не нагружать весь сайт.
• Проверяйте совместимость с кэш-плагинами и настройте исключения для AJAX-запросов.
• Обновляйте WooCommerce и тему, чтобы пользоваться актуальными функциями и исправлениями безопасности.

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