Woocommerce как отделить категории от товаров

Как вывести подкатегории 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!
Оцените статью:

Отображение категорий, подкатегорий и товаров отдельными списками в WooCommerce

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

Тем не менее, у этого подхода есть один минус: категории/подкатегории отображаются вместе без какого-либо разделения. То есть если у ваших товаров изображения разных размеров, макет страницы будет выглядеть просто ужасно. И даже если изображения одного размера, но хотя бы в одной строке архивной страницы содержатся категории и товары, то кнопка «Добавить в корзину» для категорий сбивает всю верстку. Не все элементы одного размера.

В этом уроке я покажу, как отобразить категории в отдельном списке перед товарами. Для этого нам необходимо выполнить 4 шага:

Найти в WooCommerce код, отвечающий за вывод категорий и подкатегорий на архивные страницы в виде списка

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Создать плагин для нашего кода

Написать функцию вставки категорий и подкатегорий перед списком товаров

Стилизовать выводимую разметку

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

Что вам понадобится

Для выполнения урока вам потребуется:

Установленный и активированный WooCommerce

Товары – я импортировала шаблонные товары из WooCommerce

Активированная тема, совместимая с WooCommerce – я использую Storefront

Прежде чем приступить: стандартные опции

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

Теперь давайте посмотрим, как WooCommerce отображает категории и подкатегории товаров на архивных страницах. Если еще не перешли, перейдите в WooCommerce > Settings, вкладка products, опция display. Для Shop Page Display и Default Category Display выберите show both:

Кликните save changes, чтобы сохранить настройки, и перейдите на страницу магазина. Мой выглядит так:

У меня все смотрится хорошо, так как у меня всего 3 категории товаров, а размеры категорий такие же, как у товаров. Но вот так выглядит один из архивов категорий товаров:

В этой категории содержится 2 подкатегории, поэтому первый товар расположен с ними на одной строке в сетке из трех элементов по ширине. Я хочу выделить мой категории/подкатегории, просто отделив их от списка товаров. Давайте же приступим.

Находим код WooCommerce, отвечающий за вывод категорий и товаров в архивы

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

Для отображения архивных страниц WooCommerce использует файл archive-product.php в папке templates. В этом файле лежит следующий код, который выводит категории и товары:

Здесь есть функция woocommerce_product_subcategories(), которая выводит категории или подкатегории перед запуском цикла, выводящего товары.

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

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

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

Как вывести все категории (рубрики) товаров 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 выводит категории и товары в один список (если включить настройку выводить категории и товары). Но нам, например, необходимо категории оформить по другому. Для этого нужно отделить категории от товаров разделив список.

Разделение

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

Включаем такой хук:

Функция создает новый список с категориями перед товарами. Стили можно позаимствовать/объединить с товарными, для этого ul нужно добавить класс products, а li product. Также можно задать для категорий отдельные стили и верстку.

Еще можно вывести количество товаров в каждой категории, добавить:

В шаблоне результатов поиска выводятся все родительские категории товаров, независимо от того какие товары мы ищем — это неправильно. Чтобы этого избежать добавим внутри функции проверку if ( !is_search() )

Отдельные шаблоны

Бывает необходимо разделить вывод категорий и товаров в разные шаблоны.

Подкатегории в боковой панели (sidebar)

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

Похожие публикации:

1. Если сила тока больше чем надо что будет
2. Как включить вай фай в кали линукс
3. Куда можно продать базу номеров
4. Как заземлить витую пару