Как вывести категории товаров на главную страницу wordpress

Рекомендуется использовать темплейт тег woocommerce_subcategories(), если тема поддерживает WooCommerce-хуки. Это позволит сохранить совместимость с обновлениями и сторонними плагинами. В качестве альтернативы можно создать собственный блок через block editor или использовать плагин типа «Product Categories Grid», если необходимо визуальное оформление без кода.

Для контроля структуры и порядка категорий лучше использовать фильтр woocommerce_product_subcategories_args. С его помощью можно задать сортировку, скрыть ненужные категории или включить кастомные таксономии. Такой подход особенно актуален при большом количестве категорий или при реализации кастомной навигации на главной.

• Чтобы отобразить все категории, используйте: [product_categories].
• Для отображения определённых категорий по ID: [product_categories ids="21,34,56"].
• Сортировка по названию: [product_categories orderby="name" order="asc"].
• Ограничение количества: [product_categories number="6"].
• Скрытие пустых категорий: [product_categories hide_empty="1"].

Разместите шорткод в текстовом или HTML-блоке главной страницы через редактор Gutenberg или в соответствующем шаблоне, используя PHP-функцию:

<?php echo do_shortcode('[product_categories number="6" columns="3" orderby="name" hide_empty="1"]'); ?>

Для контроля внешнего вида используйте атрибут columns. Например, columns="4" задаст сетку из четырёх колонок.

Важно: категории должны быть добавлены и содержать товары, иначе они не отобразятся при активированном параметре hide_empty.

Создайте файл front-page.php в директории вашей активной темы. WordPress автоматически использует его как шаблон главной страницы.

Добавьте в начало файла базовую структуру:

<?php
/* Template Name: Главная с категориями */
get_header();
?>

<?php
$product_categories = get_terms( array(
'taxonomy'   => 'product_cat',
'hide_empty' => true,
) );
if ( ! empty( $product_categories ) && ! is_wp_error( $product_categories ) ) {
echo '<ul class="product-categories">';
foreach ( $product_categories as $category ) {
$thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
$image_url = wp_get_attachment_url( $thumbnail_id );
$link = get_term_link( $category );
echo '<li>';
if ( $image_url ) {
echo '<a href="' . esc_url( $link ) . '"><img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $category->name ) . '" /></a>';
}
echo '<a href="' . esc_url( $link ) . '">' . esc_html( $category->name ) . '</a>';
echo '</li>';
}
echo '</ul>';
}
?>

Чтобы избежать кэширования и отобразить актуальные данные, добавьте ‘hide_empty’ => true, чтобы скрыть пустые категории. Убедитесь, что у категорий установлены миниатюры через админку WooCommerce.

Завершите шаблон вызовом get_footer():

<?php get_footer(); ?>

Разметку и стилизацию подгоняйте под дизайн темы, не нарушая структуру WordPress.

Использование кастомного WP_Query для отображения категорий товаров

Пример базового запроса для получения определённых категорий:

$args = array(
'taxonomy'   => 'product_cat',
'hide_empty' => false,
'include'    => array(12, 34, 56), // ID нужных категорий
'orderby'    => 'name',
'order'      => 'ASC'
);
$categories = get_terms($args);

Для отображения миниатюр и ссылок на категории:

• Проверь наличие миниатюры через get_term_meta( $category->term_id, 'thumbnail_id', true ).
• Получите URL изображения с помощью wp_get_attachment_url().
• Используйте get_term_link() для генерации ссылки на категорию.

foreach ( $categories as $category ) {
$thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
$image_url = wp_get_attachment_url( $thumbnail_id );
$link = get_term_link( $category );
echo '<div class="product-category">';
echo '<a href="' . esc_url( $link ) . '">';
if ( $image_url ) {
echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $category->name ) . '" />';
}
echo '<h3>' . esc_html( $category->name ) . '</h3>';
echo '</a>';
echo '</div>';
}

Рекомендации:

1. Устанавливайте 'hide_empty' => false, если необходимо показать даже пустые категории.
2. Для кэширования запроса используйте transient API во избежание нагрузки на базу данных.
3. Если необходимо исключить подкатегории, фильтруйте по 'parent' => 0.

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

Добавление изображений и описаний к категориям товаров на главной

Для получения изображений категорий используйте функцию get_woocommerce_term_meta( $term_id, 'thumbnail_id', true ), затем передайте ID вложения в wp_get_attachment_url(). Это позволит получить прямую ссылку на изображение категории.

Описание категории можно вывести через term_description( $term_id ) или get_term( $term_id )->description. Убедитесь, что описание добавлено в разделе «Товары » Категории» в админке WooCommerce.

Настройка сетки и стилей категорий с помощью CSS и классов WooCommerce

Для настройки сетки необходимо переопределить стандартные стили. Пример CSS для сетки из 4 колонок с равными отступами:

.woocommerce .products.columns-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

Чтобы изменить стили конкретной категории, можно использовать уникальные классы, генерируемые на основе slug, например: .product-category.category-slug. Пример изменения фона и скругления для определённой категории:

.product-category.category-electronics {
background-color: #f5f5f5;
border-radius: 8px;
padding: 10px;
}

Элементы внутри блока категории, такие как изображения и заголовки, имеют классы .woocommerce-loop-category__title и img. Их также можно стилизовать отдельно: