Мар
11
8

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

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

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

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

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

Создание меню категорий в WooCommerce

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

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

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

Навигационное меню для WooCommerce

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

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

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

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

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

Плагин Max Mega Menu для меню WooCommerce

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

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

Плагин Max Mega Menu для меню WooCommerce

Здесь:

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

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

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

Виджет меню WooCommerce в сайдбаре

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

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

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

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

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

Виджет меню WooCommerce в сайдбаре

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 2, средний балл: 7,00 из 7)
Загрузка...

категория Категории: WooCommerce; Виджеты; Возможности;
теги Теги: , , , , , .

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

  • Вадим   13.03.2018

    Спасибо все доходчиво написано, таким новичкам как я — в самый раз!) Добавил категории через виджет в сайдбаре, сверху у меня обычное меню.

  • Марина   19.03.2018

    С Max Mega Menu все отлично получается — супер плагин! Надо было чуть больше о нем рассказать..

  • Tod   19.03.2018

    Марина, по этому модулю есть отдельный пост, в статье имеется ссылка на него.

  • Андрей   28.03.2018

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

  • Valentina   28.04.2018

    Скажите пожалуйста-где у меня ошибка: у меня 2 меню на сайте, одно верхнее и одно боковое. В боковом получается добавить страницу, ввести в меню и она отображается, а в верхнем- не получается тоже самое сделать, чувствую, что наверное страница и рубрика не одно и тоже? есть у вас видео по этому вопросу?

  • Tod   29.04.2018

    Valentina, в принципе, когда-то давно рассказывал про создание меню в WordPress, хотя статья не особо детальная — можете глянуть, вдруг поможет. Страница/рубрика — не одно и то же. У вас шаблон может быть так настроен, что в одном из меню (верхнем) страницы добавляются автоматически, а в другом — нет. В разделе админки «Внешний вид» — «Меню» вам нужно посмотреть какие объекты созданы и попытаться их отредактировать.

  • Valentina   29.04.2018

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

  • Tod   29.04.2018

    Valentina, можете попробовать выделить несколько картинок (удерживая Ctrl) в процессе добавления изображений на страницу (илт в описание товара) и указать для них одинаковый Alt. То есть именно на странице редактирования, а не в медиабиблиотеке. Не факт, что сработает, но вроде бы когда-то получалось. Если не выйдет — я бы поискал какой-то плагин массового редактирования картинок (думаю что-то должно быть).
    Если по меня не срабатывает — надо разбираться детальнее, нюансов может быть несколько, например, если меню выводится через функцию и там в параметрах заданы какие-то настройки.

Оставить комментарий


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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости