Как показать категории на странице магазина WooCommerce

Опубликовано: 2021-12-16

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

Зачем показывать категории на странице магазина?

Если вы продаете много продуктов с большим разнообразием категорий, вы хотите, чтобы посетители легко находили то, что ищут. Это требует тщательной организации. Отображение всех ваших продуктов одновременно может ошеломить покупателей и может стать простым способом потерять потенциальных клиентов. Вместо этого вам следует подумать об организации страницы магазина таким образом, чтобы это приносило пользу вашему магазину.

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

Настройка категорий и конкретных категорий

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

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

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

Как показать категории на странице магазина WooCommerce

Существуют разные способы отображения категорий на странице магазина в WooCommerce:

  1. С помощью Theme Customizer с панели инструментов
  2. Использование короткого кода
  3. Программно

Давайте подробнее рассмотрим каждый метод.

ПРИМЕЧАНИЕ . В этой демонстрации мы будем использовать тему Storefront, поэтому параметры вашей темы могут немного отличаться. Однако большинство вариантов будут одинаковыми, поэтому у вас не должно возникнуть проблем с этим руководством.

1) Отображение категорий на панели инструментов WooCommerce

Самый простой способ отобразить категории на странице вашего магазина — использовать настройки WooCommerce . Для этого на панели управления выберите « Внешний вид» > «Настроить» , а затем нажмите « WooCommerce» > «Каталог продуктов » на боковой панели настройщика.

показать категории на странице магазина woocommerce - каталог продуктов приборной панели WC

Отсюда вы можете использовать отображение страницы магазина и выбрать « Показать категории » или « Показать категории и продукты».

показать категории на странице магазина woocommerce - панель управления WC показывает категории и продукты

Первый вариант будет отображать только ваши категории продуктов на странице вашего магазина, а второй будет отображать ваши категории продуктов, а также остальные ваши продукты. Например, если вы включите « Показать категории» в разделе «Отображение страницы магазина», на странице «Магазин» будут отображаться только категории продуктов, как показано ниже:

Однако, если вы выберете « Категории и продукты », сначала отобразятся ваши категории, а затем остальная часть вашего каталога продуктов:

Вы также можете использовать опцию « Отображение категории » ниже, чтобы показать/скрыть подкатегории продуктов и продукты на страницах категорий продуктов.

Когда вы будете довольны своей настройкой, не забудьте нажать « Опубликовать », чтобы сохранить изменения.

Одна из самых полезных вещей в этом методе заключается в том, что вы можете просматривать свои изменения в режиме реального времени, что упрощает его использование. Однако это не дает вам большого контроля, поскольку у вас есть только два варианта. Если вы хотите большей гибкости, ознакомьтесь со следующими методами.

2) Показать категории с помощью шорткодов

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

Для этого вам нужно просто добавить следующий шорткод на страницу вашего магазина:

 [ product_categories ]

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

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

Если вы используете Gutenberg, просто перейдите на страницу магазина, добавьте блок шорткода и вставьте шорткод [ product_categories ] .

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

 [ product_categories orderby = “id” order = “ASC” ]

показать категории на странице магазина woocommerce - пользовательский шорткод

Это будет отображаться на странице вашего магазина следующим образом:

показать категории на странице магазина woocommerce - результат шорткода

Как показать определенную категорию на странице магазина WooCommerce

Вы также можете использовать метод шорткода, чтобы показать определенную категорию продуктов WooCommerce.

Чтобы использовать его, вам нужно использовать ярлык ваших категорий продуктов. Вы можете просмотреть ярлыки категорий в разделе « Продукты» > «Категории» .

показать категории на странице магазина WooCommerce - ярлыки продуктов

Как только вы узнаете ярлык вашего конкретного продукта, вы можете использовать его на странице своего магазина следующим образом:

 [ product category category=”slug” ]

Просто замените текст слага на соответствующий слаг категории. Например, если слаг «Показать», шорткод будет таким:

А на фронтенде вы увидите что-то вроде этого:

Вы также можете использовать те же атрибуты, доступные для [ product categories ], для дальнейшей настройки.

3) Отображение категорий программно

Еще один способ добавить категории на страницу магазина WooCommerce — использовать немного кода. Этот метод рекомендуется для пользователей, обладающих навыками программирования и способных настраивать файлы своих тем. Помимо знания PHP, рекомендуется также иметь базовые знания CSS. Если вас не устраивают эти языки, мы рекомендуем вам следовать описанным выше методам.

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

Теперь без лишних слов давайте посмотрим, как отображать категории на странице магазина WooCommerce.

Добавление функции для отображения категорий на странице магазина

После настройки дочерней темы откройте файл functions.php темы, выбрав « Внешний вид» > «Редактор тем». Оказавшись там, щелкните файл functions.php на правой боковой панели Theme Files.

показать категории на странице магазина WooCommerce - файл функций

Теперь вы готовы вставить следующие скрипты в редактор, чтобы добавить свои пользовательские функции.

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

 функция product_subcategories( $args = array() ) {
$parentid = get_queried_object_id();

$аргументы = массив(
'родительский' => $parentid
);

$terms = get_terms('product_cat', $args);

если ( $ термины ) {
echo '<ul class="product-cats">';

foreach ( $terms как $term ) {
эхо '<li class="category">'; 
woocommerce_subcategory_thumbnail($term);
эхо '<h2>';
echo '<a href="'.esc_url(get_term_link($term)) .'" class="'.$term->slug. '">';
эхо $term->имя;
эхо '</a>';
эхо '</h2>';
эхо '</li>';
}

эхо '</ul>';
}

}

add_action('woocommerce_before_shop_loop', 'product_subcategories', 50);

Как упоминалось выше, эта функция добавит раздел «Категории» на страницу вашего магазина WooCommerce. Однако он может выглядеть не так, как вы хотите, и может не соответствовать стилю вашего сайта. Это потому, что вам все еще нужно стилизовать только что созданный раздел «Категории».

Настройка стиля для раздела пользовательских категорий

Теперь давайте добавим настраиваемый CSS в раздел « Дополнительные CSS » вашего настройщика тем. На панели инструментов WordPress перейдите в раздел « Внешний вид» > «Настроить» , чтобы открыть меню настройки темы, а затем нажмите « Дополнительные CSS».

показать категории на странице магазина woocommerce - дополнительный CSS-настройщик

Затем вставьте следующие фрагменты CSS в раздел « Дополнительные CSS» и настройте их так, чтобы они соответствовали стилю вашего веб-сайта.

Как вы понимаете, у вас будет гораздо больше возможностей, если вы разбираетесь в CSS. Если вы не знаете, как добавить код, ознакомьтесь с нашим руководством по добавлению CSS в WordPress.

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

 ul.product-cats {
поле слева: 0;
}

ul.product-cats li {
стиль списка: нет;
поле слева: 0;
нижняя граница: 4.236em;
выравнивание текста: по центру;
положение: родственник;
}

ul.product-cats li img {
поле: 0 авто; 
}

Экран @media и (мин. ширина: 768 пикселей) {

ul.product-cats li {
ширина: 29,4117647059%;
плыть налево;
поле справа: 0,8823529412%;
}

ul.product-cats li:nth-of-type(3) {
поле справа: 0;
}
}

Когда вы закончите с изменениями, обновите настройки Customizer, и ваша страница магазина должна быть обновлена ​​​​с новым разделом категорий.

Бонус: дополнительные способы улучшить страницу вашего магазина

Есть и другие изменения, которые вы можете применить, чтобы сделать вашу страницу в магазине максимально удобной для клиентов. Это включает в себя управление количеством отображаемых продуктов, добавление раздела с продуктами с самым высоким рейтингом и многое другое. Идея состоит в том, чтобы ваши товары было легко найти, а покупателям было удобнее совершать покупки. Давайте посмотрим, как вы можете настроить страницу магазина, чтобы увеличить продажи.

Во-первых, давайте посмотрим, как вы можете добавить список самых популярных продуктов прямо в свои категории продуктов.

Как отобразить самые популярные продукты на странице магазина WooCommerce

Помимо добавления категорий продуктов, вы также можете добавлять собственные каталоги продуктов с помощью шорткодов. Это включает в себя раздел « Самые популярные продукты », который вы можете отобразить с помощью этого шорткода:

 [ products orderby="popularity" ]

Как было показано ранее, вы можете добавить атрибуты шорткода, которые вы можете найти здесь.

Чтобы добавить раздел « Самые популярные продукты » на страницу вашего магазина, вы можете просто добавить следующий шорткод. В этом случае мы добавляем несколько атрибутов для отображения продуктов в двух столбцах.

 [ products orderby="popularity" class="m-popular" columns="2" limit="2" ]

показывать категории на странице магазина WooCommerce - бонус с самым высоким рейтингом

Кроме того, вы можете добавить несколько разделов, таких как «Продукты в продаже», «Лучшие продажи», « Продукты с самым высоким рейтингом » и т. д., используя шорткоды:

  • [ best_selling_products ]
  • [ top_rated_products ]
  • [ recent_products ]

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

Это всего лишь несколько примеров, но вы можете сделать гораздо больше, чтобы максимально использовать страницу своего магазина. Чтобы узнать больше, ознакомьтесь с нашим полным руководством по настройке страницы магазина WooCommerce .

Вывод

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

В этом уроке мы показали вам различные способы отображения категорий на странице магазина WooCommerce:

  • С настройками WooCommerce в настройщике тем
  • Использование шорткодов
  • С пользовательской функцией и небольшим количеством CSS для ее настройки

Если вам нужно простое решение, вы можете использовать параметры на панели инструментов WordPress. Однако этот метод не предоставляет много вариантов настройки. Другой вариант — использовать шорткод, который вы можете настроить. Однако, если вы хотите еще большей гибкости и имеете навыки программирования, вы можете отображать категории продуктов программно. Имейте в виду, что для этого вам понадобятся знания как PHP, так и CSS.

Более того, если вы ищете способ настроить страницу магазина с помощью шаблона , а не начинать с нуля, вы также можете сделать это. Однако для этого вам придется настроить файлы шаблонов и изменить файлы тем. У нас есть полные руководства по программной настройке страницы магазина, а также по настройке шаблонов WooCommerce здесь:

  • Как редактировать страницу магазина WooCommerce программно
  • Как настроить файлы шаблонов WooCommerce

Вы настроили страницу своего магазина и отобразили категории товаров? Какой метод вы использовали? Дайте нам знать в комментариях ниже!

Наконец, если вы ищете другие способы улучшить страницу своего магазина, ознакомьтесь со следующими статьями:

  • Редактировать страницу магазина WooCommerce программно (CSS и PHP)
  • Как настроить страницу магазина WooCommerce в Elementor
  • Как исправить пустую страницу магазина WooCommerce