Как сделать подкатегории в woocommerce

Как вывести все категории (рубрики) товаров WooCommerce в WordPress?

Я думаю, что многие согласятся со мной, что WooCommerce – это отличное решение для CMS WordPress, с помощью которого можно организовать свой собственный интернет-магазин.

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

Одноуровневый вывод всех категорий (рубрик) товаров WooCommerce в любом месте сайта в WordPress

Начнем с самого простого примера – одноуровневого меню со всеми категориями, где есть хотя бы 1 товар.

Вид функции (вставляется в файл functions.php, который находится в папке темы сайта):

Этот код вы вставляете в нужное вам место темы сайта. Важные моменты я пометил в функции.

Основные типы сортировок:

1. id или term_id – по ID.
2. name – по названию.
3. slug – по альтернативному названию.
4. description – по описанию.
5. meta_value – по значению произвольного поля.
6. none – не сортировать.

По умолчанию – name.

Допустимые порядки сортировки:

1. ASC – от меньшего к большему (по порядку – 1, 2, 3 или a, b, c и т.д.);
2. DESC – от большего к меньшему (в обратном порядке – 3, 2, 1 или c, b, a и т.д.).

По умолчанию – ASC.

Многоуровневый (древовидный) вывод всех категорий (рубрик) товаров WooCommerce в любом месте сайта в WordPress

Поскольку в WooCommerce (как, собственно, и в WordPress) есть возможность вложения категорий, будет не лишним показать вам, как же правильно вывести их все с учетом их структуры (вложенности).

Вставляете так же в файл functions.php, и использование (вывод):

Вставляете в нужное место в тему вашего сайта. Допустимые настройки вывода – как и в первом варианте.

Стилизацию меню в этой статье я не рассматриваю, думаю, ее вы можете сделать и сами.

Общий класс меню первого уровня – «main_categories_list», второго и последующего – «sub_categories_list» + «sub_categories_list_N», где N – ID ближайшего родительского пункта. Цепляетесь за них и настраиваете вид так, как вам нужно.

Управление категориями, метками и атрибутами товаров в WooCommerce

В данном руководстве мы подробно опишем как создавать и редактировать категории товаров, атрибуты и метки (теги) товаров.

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

Например, если вы продаете одежду, у вас могут быть «футболки», «толстовки» и «брюки» в качестве категорий.

Видео руководство

Для тех, кому удобнее ознакомится с руководством по cозданию и настройке категорий на Woocommerce с помощью видео, мы подготовили видео-руководство:

Как добавить / редактировать категории товаров

Управление категориями проводится с екрана Товары > Категории.
Так же как и категории постов в WordPress, вы можете добавлять, удалять и редактировать категории товаров.

• Добавить Название.
• Добавить Ярлык (необязательно) — дружественною к восприятию человеком URL версию названия.
• Выберите Родительскую категорию, если это подкатегория.
• Введите Описание (необязательно). Некоторые темы отображают это.
• Выберите Тип отображения. Решите, что будет показано на странице категории. “Стандарт” использует вашу тему по умолчанию. “Подкатегория” будет отображать только подкатегории, а “Товары” — только товары. “Оба” будут отображать подкатегории и товары ниже.
• Загрузить / Добавить изображение (необязательно). В некоторых темах есть страницы, на которых отображаются изображения категорий товаров, поэтому это хорошая идея.

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

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

Когда вы добавляете новый товар через Товары > Добавить товар, вы можете выбрать категорию для нового товара из списка.

Кроме того, вы можете перейти в Товары > Добавить товар напрямую и выбрать “Добавить новую категорию товаров”.

Таксономия — product_cat. И функция фильтрации становится AJAX-совместимой для более удобного использования, когда есть 100 и более категорий.

Метки товаров

Что такое метки товаров?

Метки товаров — это еще один способ связать товары друг с другом, рядом с категориями товаров. В отличие от категорий, в метках нет иерархии.

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

Как добавить / редактировать метки товаров

Вы можете добавить метки так же, как и категории товаров, а работать с ними точно так же, как и с метками постов. Больше информации вы можете найти здесь: WordPress.org Codex.

Атрибуты товара

Что такое атрибуты товаров?

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

• Первый — через виджеты WooCommerce. “WooCommerce Layered Nav” работает на основе атрибутов. Если вы добавите этот виджет на свою боковую панель, покупатели смогут фильтровать товары в вашем магазине на основе атрибута.Также рекомендуем для отображения фильтров использовать плагин Premmerce WooCommerce Product Filter.

• Второй — через вариативные товары. Чтобы создать вариативный товар, сначала нужно добавить атрибут для товара. Эти атрибуты затем могут использоваться для различия между разными вариантами. Больше информации вы можете найти здесь: Вариативные товары.

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

Как добавить / редактировать атрибуты товаров

Добавление новых атрибутов

Перейдите Товары > Атрибуты, чтобы добавлять, редактировать и удалять атрибуты.

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

• Добавить Название.
• Добавить Ярлык (необязательно) — дружественною к восприятию человеком URL версию названия.
• “Включить Архивы?”, если хотите. Если их включить, вы сможете просматривать страницу со всеми товарами, имеющими этот атрибут. Например, если архивы включены, и “черный” — один из вариантов атрибута “цвет”, вы можете добавить http://yourstore.com/pa_color/black/ в свое меню, чтобы отображать только черную одежду; “pa” — “атрибут товара”.
• Выберите “Порядок сортировки по умолчанию”. Выберите между “Имя”, ”Название (числовое)”, “ID значения” или “Произвольный порядок” ( где вы решаете путем перетягивания значений в списке при установке правил (см. ниже). “Название (числовое)” имеет значение, если значения являются числами. Если вы выберете “Имя”, оно отсортируется по алфавиту, например 1, 10, 2… Если вы выберете ”Название (числовое)”, оно отсортирует на основе числового значения.

Выберите Добавить атрибут.

Атрибут добавляется в таблицу справа, но без значений.

Выберите “Настроить термины”, чтобы добавить значения атрибута. Когда вы наведете на него курсор, вы увидите “Настроить термины”.

Далее Добавить новое “Название атрибута”, где “Название атрибута” автоматически принимает имя, которое вы дали атрибуту в предыдущем шаге.

Добавьте столько значений, сколько пожелаете. Если вы выбрали ”Произвольный порядок” для атрибута, здесь можно изменить порядок значений.

Добавление новых атрибутов к товару

Добавьте созданный атрибут к вашим товарам.

Перейдите Товары > Добавить товар (или редактировать существующий).

Выберите вкладку “Атрибуты” в Данных товара. Там вы можете выбрать любой из атрибутов, которые вы создали, с выпадающего меню.

Виберите Добавить.

Если вы выбрали ранее созданный атрибут, вы можете выбрать уже добавленные вами значение.

Добавление пользовательских атрибутов

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

Перейдите Товар > Добавить товар.

Выберите вкладку “Атрибуты”.

Выберите “Индивидуальный атрибут товара” с выпадающего списка повторите шаги, описанные выше.

Как вывести категории товаров на странице в Woocommerce?

Привет!
Как на странице магазина выводить категории товаров (в Woocommerce)?
Хочу именно категории, а не товары определенной категории. (вот так)

С одной стороны мне помог шорткод [product_categories number=»1″ parent=»0″] , но после категорий показываются тысячи товаров, да к тому же вперемешку, что мне и не нужно.
Нужно: просто страница с категориями товаров.

Как вывести подкатегории WooCommerce отдельно от товаров в магазине

После интересной заметки о наличии товара в Woocommerce рассмотрю задачу, связанную с подкатегориямии в магазине. Изначально хотел написать более масштабный пост по категориям, но позже решил сузить тему чтобы вас не запутывать. В плагине есть опция с 3-мя способами как можно показывать продукцию в разделах: 1) только товары; 2) подкатегории; 3) совместить оба варианта. В ранних версиях она находилась в меню «Настройки» — «Товары» — «Отображение», позже перенесли в настройщик темы.

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

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

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

Хак вывода подкатегорий WooCommerce

1. Первым делом заходим в раздел «Внешний вид» — «Настройки» — «WooCommerce», где для опции «На странице категории» выбираем показ только самой продукции:

Если у вас более ранние версии модуля магазина, то данная опция находится непосредственно в его настройках во вкладке «Товары» — «Отображение»:

2. Открыв файл archive-product.php в папке wp-content/plugins/woocommerce/templates, увидите как формируется структура страницы архива магазина.

В частности найдете там функцию woocommerce_product_subcategories(), которая производит вывод категорий и подкатегорий WooCommerce перед обработкой непосредственно товаров.

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

3. Вам нужно добавить в файл функций (для темы магазина это вероятнее всего custom-function.php) следующие строки:

В данном коде определяется ID объекта из query запроса и осуществляется поиск всех элементов магазина, для которых он является родительским. Дальше в блоке foreach задается как именно вы хотите вывести подкатегории в WooCommerce. Здесь:

• woocommerce_subcategory_thumbnail — отвечает за миниатюру (если нужно);
• название $term->name оборачивается в ссылку (тег А);
• можете поменять классы стилей в элементах списка.

Сохраняете файл, загружаете его обратно на FTP и проверяете как все работает.

4. Изначально оформление будет смотреться немного коряво, поэтому вам придется добавить стили (в main-style.css, style.css или другой файл):

Это лишь пример оформления от автора сниппета, изменяйте его как угодно под свою тему. Строки после min-width:768px отвечают за меньшие версии экрана. После внесения правок, смотрите результат. Не забывайте, кстати, следить за правильным размером изображений товара WooCommerce дабы фотки не получались размытыми.

5. Если вам нужно чтобы отображались даже те подкатегории, где нет продукции, добавьте дополнительный параметр в $args при вызове функции get_terms (третья строка в коде):

$args = array( ‘parent’ => $parentid, ‘hide_empty’ => false );

Я тестировал данный пример на реальном сайте — все работает отлично. Возможно, какими-то хитрыми CSS методами получится все реализовать без дополнительной функции либо данная фишка исправлена в новой WooCommerce 3.0 (я тестировал на ветке 2.6.x), но, как бы там ни было, этот пример будет хорошей практикой начинающим WordPress разработчикам.

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!
Оцените статью: