← Назад в блог

Как управлять отображением атрибутов WooCommerce без перегруза шаблонов

Проблема сортировки атрибутов, get_terms и usort по meta, почему фильтры лучше override шаблонов, влияние на SEO. Реальный пример кода на хуках и фильтрах.

Как управлять отображением атрибутов WooCommerce без перегруза шаблонов

Требования

  • WordPress 5.0+
  • WooCommerce
  • PHP 7.4+

Как управлять отображением атрибутов WooCommerce без перегруза шаблонов

Чтобы менять состав и порядок атрибутов на карточке и на странице товара, не обязательно копировать шаблоны WooCommerce в тему. Достаточно хуков и фильтров: сортировка через get_terms и usort по meta, лимиты и список атрибутов — через фильтры. Ниже — в чём проблема сортировки по умолчанию, рабочий пример кода, почему такой способ лучше override шаблонов и как это влияет на SEO.


Проблема сортировки атрибутов

По умолчанию WooCommerce выводит атрибуты в порядке, который не всегда совпадает с желаемым: порядок таксономий из настроек, алфавит терминов или порядок добавления. Нужно:

  • задать свой порядок атрибутов (например, «Цвет», потом «Размер», потом «Материал»);
  • ограничить количество на листинге и на странице товара;
  • не трогать файлы темы и не копировать шаблоны из woocommerce/ в тему.

Если копировать шаблон (override), при каждом обновлении WooCommerce придётся сверять изменения и рисковать сломать вёрстку. Управление через фильтры и хуки этого избегает.


Почему фильтр лучше override шаблона

ПодходПлюсыМинусы
Копирование шаблона в тему (theme/woocommerce/...)Полный контроль над разметкой в одном файлеОбновления WooCommerce не подхватываются, нужно вручную мержить; дублирование кода
Хуки и фильтры в functions.php или плагинеОбновления ядра и WooCommerce не затирают логику; один слой кастомизации; можно включать/отключать плагиномНужно знать нужные хуки и фильтры

Итог: для изменения состава и порядка атрибутов (и лимитов) разумнее использовать фильтры и вывод через свой хук. Шаблон переопределяют только когда нужно кардинально менять разметку/вёрстку, и то часто достаточно одного шаблона при правильной разметке в хуке.


Пример: get_terms и сортировка через usort по meta

Атрибуты в WooCommerce — это таксономии с префиксом pa_ (например, pa_color, pa_size). Список терминов атрибута для товара можно получить через отношения товар–термины, а порядок атрибутов между собой задать через опции или term meta и отсортировать массив.

Ниже — пример: получить атрибуты товара, отсортировать их по числовому полю порядка (например, из опции или term meta) через usort.

/**
 * Получить атрибуты товара для вывода в нужном порядке.
 * Порядок задаётся в опции 'my_attr_display_order' как массив slug таксономий.
 */
function my_get_product_attributes_sorted( $product_id ) {
    $product = wc_get_product( $product_id );
    if ( ! $product ) {
        return [];
    }

    $order_option = get_option( 'my_attr_display_order', [] );
    // Например: ['pa_color', 'pa_size', 'pa_material']

    $visible = $product->get_attributes();
    if ( empty( $visible ) ) {
        return [];
    }

    $result = [];
    foreach ( $visible as $taxonomy => $attribute ) {
        if ( ! $attribute->get_visible() ) {
            continue;
        }
        $result[ $taxonomy ] = [
            'taxonomy' => $taxonomy,
            'order'    => array_search( $taxonomy, $order_option, true ) !== false
                ? array_search( $taxonomy, $order_option, true )
                : 999,
        ];
    }

    usort( $result, function ( $a, $b ) {
        return $a['order'] <=> $b['order'];
    } );

    return $result;
}

Если порядок хранится в term meta (у каждого термина атрибута своё число «порядок»), то список терминов для одной таксономии можно сортировать так:

/**
 * Получить термины атрибута для товара, отсортированные по meta 'order'.
 */
function my_get_attribute_terms_sorted( $product_id, $taxonomy ) {
    $term_ids = wc_get_product_terms( $product_id, $taxonomy );
    if ( is_wp_error( $term_ids ) || empty( $term_ids ) ) {
        return [];
    }

    $terms = get_terms( [
        'taxonomy'   => $taxonomy,
        'include'    => wp_list_pluck( $term_ids, 'term_id' ),
        'hide_empty' => false,
    ] );

    if ( is_wp_error( $terms ) || empty( $terms ) ) {
        return $terms;
    }

    usort( $terms, function ( $a, $b ) {
        $order_a = (int) get_term_meta( $a->term_id, 'order', true );
        $order_b = (int) get_term_meta( $b->term_id, 'order', true );
        return $order_a <=> $order_b;
    } );

    return $terms;
}

Так порядок вывода атрибутов и терминов полностью под контролем, без правки шаблонов.


Реальный пример: вывод атрибутов на хуке без override шаблона

Задача: на странице товара вывести только выбранные атрибуты, в заданном порядке, с лимитом. Всё через хук в теме или в плагине.

add_action( 'woocommerce_single_product_summary', 'my_render_product_attributes', 25 );

function my_render_product_attributes() {
    global $product;

    if ( ! $product ) {
        return;
    }

    // Порядок атрибутов: slug таксономий (можно хранить в настройках темы/плагина)
    $order_option = get_option( 'my_attr_display_order', [ 'pa_color', 'pa_size', 'pa_material' ] );
    $limit        = (int) get_option( 'my_attr_single_limit', 5 );
    $sorted       = my_get_product_attributes_sorted( $product->get_id() );

    $sorted = array_slice( $sorted, 0, $limit );

    if ( empty( $sorted ) ) {
        return;
    }

    echo '<div class="product-attributes product-attributes--single">';
    echo '<h3 class="product-attributes__title">Характеристики</h3>';
    echo '<dl class="product-attributes__list">';

    foreach ( $sorted as $item ) {
        $taxonomy = $item['taxonomy'];
        $terms    = my_get_attribute_terms_sorted( $product->get_id(), $taxonomy );

        if ( empty( $terms ) ) {
            continue;
        }

        $label = wc_attribute_label( $taxonomy );
        $names = wp_list_pluck( $terms, 'name' );
        $value = implode( ', ', array_map( 'esc_html', $names ) );

        echo '<dt class="product-attributes__label">' . esc_html( $label ) . '</dt>';
        echo '<dd class="product-attributes__value">' . $value . '</dd>';
    }

    echo '</dl></div>';
}

Функции my_get_product_attributes_sorted и my_get_attribute_terms_sorted — те же, что выше. Лимит и список таксономий хранятся в опциях; при желании их можно вынести в настройки темы или отдельный плагин. Шаблоны WooCommerce не копируем.

Для листинга (архив товаров) идея та же: хук woocommerce_after_shop_loop_item_title, те же функции сортировки и срез по лимиту, упрощённая разметка (например, только пара «лейбл: значение» в одну строку).


Влияние на SEO

Отображение атрибутов на странице товара влияет на SEO так:

  • Текст на странице — поисковики видят названия и значения атрибутов (цвет, размер, материал и т.д.). Это даёт дополнительные ключевые слова и понятную структуру «характеристики».
  • Структурированные данные — WooCommerce и многие темы выводят или дополняют Product schema. Атрибуты могут попадать в описание товара и в разметку. Важно, чтобы блок с атрибутами был в разметке страницы (как в примере выше — <dl>, лейблы и значения), а не только в JS.
  • Единый порядок и стабильный блок — предсказуемый блок «Характеристики» с семантичной разметкой (<dl>, <dt>, <dd>) удобен и для пользователя, и для парсеров. Не скрывай важные атрибуты только в табах без серверного вывода или в скрытых по умолчанию блоках, если они важны для поиска.

Итог: управление отображением через фильтры и хуки не мешает SEO, если атрибуты остаются в HTML страницы и имеют нормальную разметку. Сокращение числа атрибутов на листинге (лимит) лишь уменьшает шум в карточках каталога и не вредит странице товара, если там выводится полный нужный набор.


Кратко

  • Проблема сортировки — порядок атрибутов по умолчанию не настраивается; решается списком таксономий (опция) и сортировкой массива через usort.
  • get_terms + usort по meta — для терминов одного атрибута используй get_terms/wc_get_product_terms и usort по term meta (например, поле «order»); для порядка самих атрибутов — массив slug таксономий и usort по позиции в этом массиве.
  • Фильтр вместо override — состав, порядок и лимит атрибутов лучше задавать в опциях и реализовывать в хуках/фильтрах, чтобы не копировать шаблоны WooCommerce и не терять обновления.
  • SEO — выводи атрибуты в HTML с семантичной разметкой; не прячь важные характеристики только в JS или в скрытых по умолчанию блоках.

Так ты управляешь отображением атрибутов WooCommerce без перегруза шаблонов и без лишнего копирования кода темы.

0 просмотров

Комментарии

Загрузка комментариев...
Пока нет комментариев. Будьте первым!