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

Проблема: необходимость динамически менять название товара при выборе варианта в WooCommerce

В стандартном WooCommerce название товара не меняется при выборе варианта (атрибута). Иногда требуется, чтобы название товара отражало выбранный вариант — например, добавляло к основному названию выбранный цвет или размер, чтобы улучшить UX и SEO.

Диагностика задачи

Перед реализацией нужно понять, как именно пользователь хочет видеть название товара:

• Менять название в карточке товара (frontend) при выборе варианта;
• Менять название в корзине и заказах;
• Менять название в админке и отчетах;
• Или просто добавлять метаданные для варианта.

В большинстве случаев достаточно динамически менять отображаемое название на фронтенде и в корзине.

Пошаговое решение

1. Добавление динамического названия на странице товара

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

jQuery(document).ready(function($) {
    // Функция для обновления названия
    function updateProductTitle() {
        var baseTitle = $('.product_title.entry-title').data('base-title');
        if (!baseTitle) {
            $('.product_title.entry-title').data('base-title', $('.product_title.entry-title').text());
            baseTitle = $('.product_title.entry-title').data('base-title');
        }

        var selectedAttributes = [];
        $('.variations select').each(function() {
            var val = $(this).val();
            if (val && val !== '') {
                selectedAttributes.push(val);
            }
        });

        var newTitle = baseTitle;
        if (selectedAttributes.length > 0) {
            newTitle += ' – ' + selectedAttributes.join(', ');
        }

        $('.product_title.entry-title').text(newTitle);
    }

    // Слушаем изменение варианта
    $('.variations_form').on('woocommerce_variation_select_change', function() {
        updateProductTitle();
    });

    // Инициализация начального названия
    updateProductTitle();
});

2. Изменение названия товара в корзине и заказах

Для изменения названия в корзине и в заказах применим фильтр woocommerce_cart_item_name и woocommerce_order_item_name.

add_filter('woocommerce_cart_item_name', 'custom_cart_item_name_with_variation', 10, 3);
add_filter('woocommerce_order_item_name', 'custom_cart_item_name_with_variation', 10, 3);

function custom_cart_item_name_with_variation($name, $cart_item, $cart_item_key) {
    if (!empty($cart_item['variation'])) {
        $variations = $cart_item['variation'];
        $variation_parts = [];
        foreach ($variations as $attr_name => $attr_value) {
            // Убираем префикс pa_ из имени атрибута
            $clean_name = str_replace('attribute_pa_', '', $attr_name);
            $variation_parts[] = ucfirst($clean_name) . ': ' . $attr_value;
        }
        if (!empty($variation_parts)) {
            $name .= ' – ' . implode(', ', $variation_parts);
        }
    }
    return $name;
}

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

• На странице товара выберите вариант (например, цвет или размер) — заголовок должен динамически обновиться с добавлением выбранных атрибутов;
• Добавьте товар с выбранным вариантом в корзину — в списке корзины название товара должно содержать выбранные атрибуты;
• Оформите заказ и проверьте, что в деталях заказа в админке и письмах название товара также отражает вариант.

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

• Название не меняется на странице товара: проверьте, что у вас подключен jQuery и что код JS запускается после загрузки DOM. Для этого можно добавить console.log в скрипт.
• Фильтры для корзины не срабатывают: убедитесь, что код PHP помещен в functions.php активной темы или в плагин и что нет синтаксических ошибок;
• Атрибуты отображаются в сыром виде (например, с префиксом pa_): в коде фильтра очищайте имена атрибутов, как показано в примере;
• Конфликт с кешированием: если используете кеш, очистите его или отключите на время тестирования.

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

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

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