Создаем WooCommerce меню категорий и не только (через админку, виджеты, плагины)

Есть у некоторых разработчиков плагинов нехорошая привычка скрывать важные опции во вкладку «Настройки экрана». Отчасти из-за этого раньше я создавал навигацию для магазина через добавление произвольных ссылок, вручную прописывая URL’ы. Каково же было мое удивление, когда в одном из проектов увидел полноценное WooCommerce меню категорий товаров. Сегодня расскажу как легко его реализовать + рассмотрю другие смежные нюансы. В работе нам помогут некоторые виджеты и, рассмотренный ранее, модуль MegaMenu. 

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

• Стандартное WP меню для магазина.
• Подключение навигации в шаблоне.
• Продвинутая реализация через Max Mega Menu.
• Список категорий в сайдбаре (с помощью виджетов). 

Меню категорий WooCommerce

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

1. Первым делом переходите в раздел «Внешний вид» — «Меню».
2. Далее в «Настройках экрана» включаете опцию добавления категории в меню WooCommerce, которая по умолчанию не активна. Аналогичная фишка есть и для меток.
3. После этого в списке элементов навигации появится выбор категорий продукции.
4. Отмечаете галочками нужные объекты и кликаете «Добавить». Далее можете отсортировать их как захотите.
5. Не забудьте сохранить результат. 

Навигационное горизонтальное меню WooCommerce

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

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

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

Продвинутое меню категорий WooCommerce

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

Итак, когда плагин уже установлен, при наведении на разные пункты увидите соответствующую кнопку:

Алгоритм действий:

• Создаете главный (корневой) элемент меню, называете его «Магазин«, «Каталог товаров» и т.п. Именно для него вы будете редактировать основные настройки Mega Menu.
• Дальше в подпунктах можно добавить несколько подкатегорий и еще парочку дочерних в них. Пусть в примере будет 3 уровня иерархии: «Главная — Категории — Подкатегории«.
• Кликаете по Mega Menu в корневом пункте и вызываете всплывающее окно.

Здесь:

1. В настройках выбираете число колонок для отображения: если поставите 3, а подкатегорий у вас всего 6, то список расположится в 2 ряда. Менять местами элементы можете на предыдущем шаге.
2. Вся мощь данного модуля заключается в том, что вам разрешается размещать тут любые виджеты, например расположить WooCommerce корзину в меню или добавить лучшие товары.
3. Слева находятся разные полезные опции: скрытие на мобильных устройствах, скрытие заголовков (вызывайте окно Mega Menu для нужных элементов дабы сделать колонки без названий), вставка иконок рядом/вместо текста. 

WooCommerce меню в сайдбаре

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

Из настроек элемента пользователю доступны:

• Название блока.
• Тип сортировки (по порядку, имени).
• Отображение количества товаров в категории.
• Вывод выпадающего списка.
• Соблюдение иерархии.
• Скрытие пустых разделов.

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

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

Также сделать меню WooCommerce в сайдбаре вы можете, совместив первый метод из текущей статьи и специальный виджет «Произвольное меню»:

В настройках указываете заголовок (если нужно) и выбираете один из ранее созданных объектов. Затем сохраняете виджет. Отображается информация в виде списка, при желании ее можно оригинально оформить через CSS стили.

Итого. Этих четырех методов создания WooCommerce меню с категориями товаров должно хватить в большинстве ситуаций. Недавно также рассмотрел как редактировать меню личного кабинета WooCommerce — возможно кому-то пригодится. Иногда встречаются задачи с добавлением корзины в навигационный блок, но это относится больше к другой теме. В крайнем случае попробуйте реализовать ее через Mega Menu или соответствующую функцию в шаблоне. Если что-то новое будет появляться, обновлю статью.

Дополнения и вопросы по статье традиционно пишите ниже.

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

Оцените статью:

(голосов - 8, средний балл: 5,50 из 7)

Загрузка...

Категории: WooCommerce; Виджеты; Возможности;
Теги: базовые знания, виджеты, вордпресс веб-разработка, интернет-магазин, категории Woocommerce, меню и навигация, решение задач wordpress.