WooCommerce: SKU не обновляется при смене вариации товара — как исправить

Почему в WooCommerce SKU вариаций товара не меняется при выборе вариации

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

Причины могут быть следующими:

• Тема или кастомный скрипт не обновляет блок SKU при изменении вариации.
• Конфликты с плагинами, которые изменяют вывод вариаций.
• Отсутствие поддержки AJAX-обновления SKU в используемой теме.

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

Для начала проверим базовое поведение WooCommerce с дефолтной темой и без плагинов, кроме WooCommerce:

1. Переключитесь на тему Storefront (официальная тема WooCommerce).
2. Отключите все плагины, кроме WooCommerce.
3. Создайте вариативный товар с несколькими вариациями, каждой присвойте уникальный SKU.
4. Перейдите на страницу товара и попробуйте сменить вариацию.

Если SKU обновляется корректно — проблема в теме или плагине. Если нет — возможно, нарушена логика WooCommerce.

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

Откройте инструменты разработчика (F12) и перейдите на вкладку Console. При смене вариации не должно быть ошибок JavaScript. Если ошибки есть — это ключ к решению.

Пошаговое решение: как заставить SKU обновляться динамически

1. Добавить поддержку обновления SKU в шаблон single-product/variation.php

В файле темы, если он переопределяет шаблон вариации, убедитесь, что в разметке присутствует элемент с классом sku и data-атрибутами для обновления.

Пример правильного блока SKU в шаблоне:

<p class="sku">Артикул: <span class="sku-value">12345</span></p>

2. Добавить скрипт для обновления SKU при выборе вариации

Если тема не обновляет SKU, можно добавить небольшой JS, который слушает событие show_variation и меняет текст SKU:

jQuery(document).ready(function($) {
    $('.variations_form').on('show_variation', function(event, variation) {
        if (variation.sku) {
            $('.sku-value').text(variation.sku);
        } else {
            $('.sku-value').text('—');
        }
    });
});

Добавьте этот скрипт в footer.php или через wp_enqueue_script с зависимостью от jQuery.

3. Проверить, что SKU задан для каждой вариации

В админке WooCommerce в карточке вариации есть поле SKU. Если оно пустое, скрипт подставит дефолтное значение.

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

• Откройте страницу вариативного товара на фронтенде.
• Выберите разные вариации.
• Проверьте, что артикул (SKU) меняется в блоке рядом с ценой или описанием.
• Убедитесь, что в консоли браузера нет ошибок.

Частые ошибки и как исправить

Ошибка 1: SKU не меняется, хотя скрипт добавлен

• Причина: селектор .sku-value не совпадает с разметкой темы.
• Решение: скорректируйте селектор под актуальную структуру HTML вашей темы.

Ошибка 2: JavaScript выдает ошибку «undefined is not a function»

• Причина: jQuery не подключен или подключен после скрипта.
• Решение: убедитесь, что jQuery подключен и скрипт зависит от него (wp_enqueue_script с параметром array('jquery')).

Ошибка 3: SKU пустой или выводится дефолтное значение

• Причина: у вариаций не заполнено поле SKU.
• Решение: заполните SKU для всех вариаций в админке WooCommerce.

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

• Не добавляйте лишних скриптов для обновления SKU — используйте встроенные хуки WooCommerce и стандартные события.
• Кэширование страниц может мешать динамическому обновлению SKU. Исключите страницы товаров с вариациями из кэширования.
• При использовании CDN убедитесь, что AJAX-запросы WooCommerce не блокируются.

Сравнение способов решения проблемы SKU не обновляется