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

Проблема: некорректное отображение цены при смене вариаций в WooCommerce

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

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

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

• Проверьте, используется ли стандартный скрипт WooCommerce add-to-cart-variation.js. Его отсутствие или конфликт с другими скриптами часто вызывает проблему.
• Проверьте консоль браузера на наличие JavaScript ошибок, которые могут блокировать выполнение скрипта.
• Убедитесь, что HTML-разметка вариаций соответствует стандарту WooCommerce: элементы с классами .variations_form, .single_variation_wrap, .woocommerce-variation-price.

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

1. Подключение стандартного скрипта WooCommerce

Если тема отключает стандартные скрипты, подключите add-to-cart-variation.js вручную в functions.php:

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

2. Использование хука для вывода кастомной цены при смене вариации

Добавьте JavaScript в footer для динамического обновления цены и других элементов (например, скидок) при смене вариации:

add_action( 'wp_footer', 'custom_update_variation_price_script' );
function custom_update_variation_price_script() {
    if ( ! is_product() ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($) {
        $( '.variations_form' ).on( 'found_variation', function( event, variation ) {
            // Обновляем цену
            var price_html = variation.price_html;
            $( '.woocommerce-variation-price' ).html( price_html );

            // Пример: обновляем кастомный блок скидки
            if ( variation.price && variation.display_price ) {
                var discount = variation.display_regular_price - variation.display_price;
                if ( discount > 0 ) {
                    $( '.custom-discount' ).text( 'Скидка: ' + discount.toFixed(2) + ' руб.' ).show();
                } else {
                    $( '.custom-discount' ).hide();
                }
            }
        });

        // Скрываем блок скидки при сбросе выбора вариаций
        $( '.variations_form' ).on( 'reset_data', function() {
            $( '.custom-discount' ).hide();
        });
    });
    </script>
    <?php
}

3. Добавление кастомного блока скидки в шаблон single-product.php

Вставьте в нужное место шаблона WooCommerce (например, после цены) HTML-блок для отображения скидки:

<div class="custom-discount" style="display:none; color: red; font-weight: bold; margin-top: 10px;"></div>

Как проверить, что решение сработало

• Откройте страницу товара с вариациями.
• Выберите разные вариации — цена должна меняться мгновенно, без перезагрузки страницы.
• Если есть скидка, блок .custom-discount должен показываться с корректным значением.
• Проверьте консоль браузера на отсутствие ошибок JavaScript.

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

• Скрипт не подключен или конфликтует с другими JS: убедитесь, что wc-add-to-cart-variation загружается, отключите другие скрипты, вызывающие ошибки.
• Неверная HTML-разметка: проверьте, что используете стандартные классы WooCommerce, иначе скрипты не найдут нужные элементы.
• Кэширование: если используется кэширование страниц или JS, сбросьте его после изменений.
• Неправильное использование jQuery: в WordPress jQuery работает в noConflict режиме, используйте jQuery(function($){ ... }).

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

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

Сравнение вариантов решения