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

В чем суть задачи: автоматическое изменение названия товара

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

Диагностика: почему стандартный WooCommerce не меняет название товара

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

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

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

1. Создаем фильтр для изменения названия в корзине

Добавим функцию, которая будет динамически менять название товара в корзине с учетом выбранных атрибутов:

add_filter('woocommerce_cart_item_name', 'custom_cart_item_name_with_attributes', 10, 3);
function custom_cart_item_name_with_attributes($product_name, $cart_item, $cart_item_key) {
    $product = $cart_item['data'];
    if ($product->is_type('variation')) {
        $attributes = $product->get_variation_attributes();
        $attr_names = array_map(function($key, $value) {
            return ucfirst(str_replace('pa_', '', $key)) . ': ' . $value;
        }, array_keys($attributes), $attributes);
        $product_name .= ' (' . implode(', ', $attr_names) . ')';
    }
    return $product_name;
}

Этот код добавит к названию в корзине выбранные атрибуты в формате "Цвет: Красный, Размер: L".

2. Изменяем название на странице товара с помощью JavaScript

Для изменения названия товара в реальном времени на странице товара, когда клиент выбирает атрибуты, добавим JS:

add_action('wp_footer', 'custom_change_product_title_js');
function custom_change_product_title_js() {
    if (!is_product()) return;
    ?>
    <script>
    jQuery(function($) {
        function updateTitle() {
            var titleBase = $('.product_title.entry-title').text();
            var attrs = [];
            $('.variations_form select').each(function() {
                var val = $(this).find('option:selected').text();
                if (val && val !== '') {
                    attrs.push(val.trim());
                }
            });
            if (attrs.length > 0) {
                $('.product_title.entry-title').text(titleBase + ' ' + attrs.join(' '));
            } else {
                $('.product_title.entry-title').text(titleBase);
            }
        }
        $('.variations_form select').on('change', updateTitle);
        updateTitle();
    });
    </script>
    <?php
}

Этот скрипт обновляет заголовок товара на странице при выборе атрибутов.

3. Автоматическое обновление названия вариации при сохранении (опционально)

Если нужно изменить название вариации в админке (чтобы отображалось корректно в списках), можно использовать хук woocommerce_product_after_variable_attributes и обновлять название через WP CLI или вручную. Но это более сложная задача и требует осторожности.

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

• Откройте страницу товара с вариациями
• Выберите разные атрибуты и убедитесь, что название товара меняется в реальном времени
• Добавьте товар в корзину и проверьте, что в названии товара в корзине отображаются выбранные атрибуты
• Проверьте на разных браузерах и в мобильной версии

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

• Название не меняется на странице товара — проверьте, подключен ли jQuery, и нет ли JS-ошибок в консоли браузера.
• Появляются лишние пробелы или неправильный формат атрибутов — уточните правильный селектор в JS и корректно фильтруйте значения.
• В корзине не отображаются атрибуты — убедитесь, что функция фильтра добавлена и файл с кодом подключен в functions.php темы или в плагине.
• Кэш мешает обновлению названий — очистите кеш сайта и браузера.

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

• Код PHP лучше размещать в дочерней теме или в кастомном плагине, чтобы не потерять при обновлении.
• JS код добавляйте через wp_add_inline_script или отдельный файл, чтобы избежать конфликтов.
• Не изменяйте название вариаций в базе без резервной копии — это может повлиять на синхронизацию с внешними системами.
• Для больших магазинов с сотнями атрибутов подумайте о кешировании результата для снижения нагрузки.

Сравнение вариантов реализации