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

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

Проблема: при выборе варианта товара на странице товара цена не обновляется автоматически, либо обновляется некорректно. Это часто встречается при кастомных темах или плагинах, вмешивающихся в стандартные скрипты WooCommerce.

Для диагностики:

• Откройте консоль браузера (F12) и проверьте наличие JavaScript-ошибок при переключении варианта.
• Убедитесь, что на странице загружается скрипт woocommerce.js — он отвечает за обновление цены.
• Проверьте, не отключен ли скрипт через wp_dequeue_script или настройки темы.
• Отключите сторонние плагины по очереди, чтобы выявить конфликт.
• Проверьте, корректно ли настроены вариации в WooCommerce, особенно атрибуты и их связь с вариантами.

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

Основная причина — скрипт обновления стоимости варианта не срабатывает из-за конфликта или отсутствия. Также некорректное добавление пользовательских скриптов может ломать стандартное поведение.

Пошаговое решение проблемы обновления цены при выборе варианта

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

Убедитесь, что скрипт wc-add-to-cart-variation подключён на странице товара. Добавьте в functions.php вашей темы:

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

2. Проверка кастомных скриптов на конфликт

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

3. Исправление HTML-разметки вариаций

Проверьте, что форма выбора варианта содержит стандартные классы и атрибуты WooCommerce:

• Элемент form.variations_form с атрибутом data-product_id.
• Селекты с классом variations select.

jQuery(document).ready(function($) {
    $('.variations_form').on('woocommerce_variation_select_change', function() {
        var form = $(this);
        form.trigger('check_variations');
    });

    $('.variations_form').on('found_variation', function(event, variation) {
        $('.woocommerce-variation-price').text(variation.price_html);
    });
});

wp_enqueue_script('wc-add-to-cart-variation');

jQuery('.variations_form').on('found_variation', function(e, variation) {
  jQuery('.woocommerce-variation-price').html(variation.price_html);
});