Как вывести подкатегории 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) следующие строки:
function mynew_product_subcategories( $args = array() ) { $parentid = get_queried_object_id(); $args = array( 'parent' => $parentid ); $terms = get_terms( 'product_cat', $args ); if ( $terms ) { echo '<ul class="product-cats">'; foreach ( $terms as $term ) { echo '<li class="category">'; woocommerce_subcategory_thumbnail( $term ); echo '<h2>'; echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">'; echo $term->name; echo '</a>'; echo '</h2>'; echo '</li>'; } echo '</ul>'; } } add_action( 'woocommerce_before_shop_loop', 'mynew_product_subcategories', 50 ); |
В данном коде определяется ID объекта из query запроса и осуществляется поиск всех элементов магазина, для которых он является родительским. Дальше в блоке foreach задается как именно вы хотите вывести подкатегории в WooCommerce. Здесь:
- woocommerce_subcategory_thumbnail — отвечает за миниатюру (если нужно);
- название $term->name оборачивается в ссылку (тег А);
- можете поменять классы стилей в элементах списка.
Сохраняете файл, загружаете его обратно на FTP и проверяете как все работает.
4. Изначально оформление будет смотреться немного коряво, поэтому вам придется добавить стили (в main-style.css, style.css или другой файл):
ul.product-cats li { list-style: none; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats { margin-left: 0; clear: both; } ul.product-cats li { width: 29.4117647059%; float: left; margin-right: 5.8823529412%; } ul.product-cats li:nth-of-type(3) { margin-right: 0; } } |
Это лишь пример оформления от автора сниппета, изменяйте его как угодно под свою тему. Строки после min-width:768px отвечают за меньшие версии экрана. После внесения правок, смотрите результат. Не забывайте, кстати, следить за правильным размером изображений товара WooCommerce дабы фотки не получались размытыми.
5. Если вам нужно чтобы отображались даже те подкатегории, где нет продукции, добавьте дополнительный параметр в $args при вызове функции get_terms (третья строка в коде):
$args = array( 'parent' => $parentid, 'hide_empty' => false ); |
Я тестировал данный пример на реальном сайте — все работает отлично. Возможно, какими-то хитрыми CSS методами получится все реализовать без дополнительной функции либо данная фишка исправлена в новой WooCommerce 3.0 (я тестировал на ветке 2.6.x), но, как бы там ни было, этот пример будет хорошей практикой начинающим WordPress разработчикам.
Если есть что добавить по выводу подкатегорий в WooCommerce пишите ниже: вопросы, дополнения, замечания.
Оцените статью: 
Загрузка...
Категории: WooCommerce; 
Теги: вордпресс веб-разработка, интернет-магазин, категории Woocommerce, правка шаблона, сниппеты.комментария 64 к статье “Как вывести подкатегории WooCommerce отдельно от товаров в магазине”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
Загрузка ...- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
В ветке 3.x (про 2.х — уже не помню, давно было) в выпадающем меню «На странице категории» есть 3 пункта:
1. показывать товары
2. показывать подкатегории
3. отображать подкатегории и товары.
Как я понимаю, тебе просто нужен был 2-й пункт :)
здравствуйте!
воспользовалась вашим кодом — наконец-то появились подкатегории! но и товары остались — не подскажете, как убрать их вывод? спасибо)
вдогонку)
archive-product.php выглядит так:
if (have_posts()) : ?>
<a href="#" class="»
title=»»>
<a href="#" title="»
class=»layout-control grid-layout «>
<a href="#" title="»
class=»layout-control list-layout «>
<img src="» alt=»column-1″ />
<img src="» alt=»column-2″ />
<img src="» alt=»column-3″ />
<img src="» alt=»column-4″ />
<img src="» alt=»column-5″ />
woocommerce_product_loop_start(false), ‘after’ => woocommerce_product_loop_end(false)))) :
wc_get_template(‘loop/no-products-found.php’);
endif;
Лариса, если честно, не совсем понял вопрос. В настройке WooCommerce магазина для страницы категорий продукции есть 3 вида отображения: товары, подкатегории и все вместе. Если вам нужно убрать товары, просто выбираете соответствующую опцию, хак для этого не нужен. Данный код просто позволяет выводить элементы чуть более другим способом нежели обычно.
Подскажите, как сделать так чтобы после перехода категории, внутри отображались все подкатегории, в моем случае отображаются только те подкатегории в которых есть товар.
Алексей, дописал 5тый пункт в алгоритме — посмотрите. Там оказывается можно добавить одну переменную в код, и будут выводиться все рубрики, даже без продукции.
Использую wordpress и woocommerce. Хочу сделать так, чтобы на главной странице магазина отображались только основные рубрики товара. Также, чтобы при клике на основную рубрику показывалась страница только с одними подрубриками (если они есть). А товары появлялись только тогда, когда кликнешь непосредственно на ту основную рубрику или подрубрику или подподрубрику, в которую эти товары непосредственно помещались. Как такое можно организовать? Например, есть такая структура рубрик:
Напитки
-чай
—черный
—товар1
—товар2
-кофе
—растворимый
—товар1
Хлеб
-черный
—товар1
Вот если зайти на страницу магазина то должны появляться только основные рубрики «Напитки» и «Хлеб». При клике на «Напитки» должна появляться страница только с подрубриками «чай», «кофе». При клике на «чай» должна появляться страница только с подрубрикой «черный». И только по клику по рубрике «черный» появлялась страница с товаром 1 и товаром 2.
Василий, данная функциональность есть в модуле WooCommerce по умолчанию. Раньше она была в его настройках, но в последних версиях ее перенсти в раздел «Внешний вид» — «Настроить». Там будет группа настроек WooCommerce, в которых выбираете пункт Product Catalog. Затем увидите 2 опции: Shop page display — что показываеть на главной магазина (выбираете категории) и Category display — что показывать на странице категории (выбираете подкатегории). Тогда путь к конкретным товарам будет такой, как вам нужно в задаче.
На текущий момент настройки отображения/вывода товаров перенесли в кастомайзер. Способ вывода подкатегорий, описаный в статье, по любому пригодится разработчику, если строить кастомную тему woocommerce. Метод рабочий и получилось удовлетворить запросы заказчика.
Верстальщик, да, настройки модуля слегка поменялись, не было времени обновить скрины.
Добрый день!
Подскажите, как исключить некоторые категории, чтобы они не отображались в каталоге
Анна, я чуть позже обновлю пост, но если ждать некогда поищите в гугле «woocommerce exclude categories» — как минимум, 2-3 статьи с примерами кода по теме есть.
Анна, написал пост по вашему вопросу — про то как можно скрыть категорию и товары из Woocommerce каталога.
Подскажите цикл чтоб выводилось таким образом:
категория1
-подкатегория1-1
товар 1 товар2 товар3
-подкатегория1-2
товар 4 товар 5 товар6
-подкатегория1-3
товар 7 товар8 товар9
Спасибо
Саша, даже если придумать подобный цикл, то мне кажется основная проблема будет с разбиением каталога по страницам. Плюс такой момент — нужно ли это делать, если 99% используют устоявшийся логически и одинаково воспринимаемый всеми формат «категория -> товары».
Мне нужно сделать подобное. Если можно тегами томожно и ими. ezraarthur.com/products/
Саша, судя по всему это сделано через шоркоды, например product_category — разработчик просто добавил на страницу вывод нескольких соответствующих блоков. Описание этой фишки было на официальном сайте модуля.
Спасибо за совет. И тогда еще спрошу, на этом сайте с главной страницы идет переход на обычную категорию вида \category\cat1 , а по факту переекидыввает на страницу product. где по инспектору размещены все продукты. И при выборке скиптом идет выборка нужных товаров. Как это можно осуществить , хотя бы идею. Такое нестандартное решение может быть полезно
Саша, возможно, там расположен плагин редиректа по типу Redirection где добавлена переадресация на общую страницу продуктов. Как по мне, весьма странное и спорное решение. Я бы понял если бы там создавался якорь на тот или иной блок с товарами, а так мне лично подобная навигация кажется бессмысленной — зачем показывать пользователю категории, когда потом он сам все равно вынужден листать каталог — разместили бы уже его сразу на главной дабы не делать лишние клики.
Спасибо большое! Пошаманив все получилось. Только не получается убрать подчеркивания у категорий-ссылок через css. text-decoration: none !important; не помогает(
Дмитрий, тут много нюансов: он может не сработать из-за того, что стиль задается в коде шаблона; возможно такой же important есть в файле стилей, подключаемом дальше; ошибка при задания класса и т.п. Можете маякнуть на почту, гляну сайт.
Здравствуйте. Можно ли вывести вместе с категориями их подкатегории? Чтобы получилось так:
Категория 1
— Подкатегория 1 категории 1
— Подкатегория 2 категории 1
— Подкатегория 3 категории 1
Категория 2
— Подкатегория 1 категории 2
— Подкатегория 2 категории 2
— Подкатегория 3 категории 2
и т.д.
TuMko, на сайте, для которого это делалось, нет третьего уровня вложености, поэтому сложно сказать как действует данный код из статьи. На главной магазина там просто категории, а при переходе дальше уже подкатегории второго уровня и товары. Возможно, придется код из статьи как-то доработать.
Еще как идея можно попробовать выводить описание подкатегорий, задаваемое в админке, в этом тексте прописать списком нужные вам ссылки. Их потом придется править вручную, если что, но метод может сработать — осталось только загуглить как выводить описание категорий на странице.
Здравствуйте. А как сделать, чтобы на страницах категорий в фильтре woof выводились все категории? Когда перехожу в подкатегорию фильтр пустой, а надо чтобы категории и подкатегории никуда из фильтра не пропадали.
Юлия, сложно сказать, т.к. такую задачу я не встречал. Помню, что фильтры отображаются только те, которые актуальны для данной категории/подкатегории. Возможно, где есть параметр WooCommerce или хак, который позволяет этот выбор сохранить. Я бы погуглил в англоязычных блогах.
Доброго времени.
В настройках плагина магазина указал:
На странице магазина — «Отображать категории». Отображает как и надо.
Отображение категории — «Показывать Подкатегории». Отображает товары, а не Подкатегории.
Но после перехода по одной из категорий, показываются все товары, но ни одной Подкатегории. А мне нужно, что бы было отображение Подкатегорий.
И ещё. я наверно не понял, действительно ли, что можно отображать только три вложенности Подкатегорий?
Возможно ли, что эти настройки «зарыты» в коде темы? Я использую OceanWP
Спасибо
Владимир, насколько я понимаю, задается сам принцип отображения, поэтому на главной будут категории а дальше при переходе по ним подкатегории бесконечного уровня вложенности (не три), если в струтуре магазина их много. Но лично я бы так не делал — чем больше кликов, тем меньше вероятность, что человек дойдет до конца. Лучше дополнительное разбиение формаировать через метки или атрибуты. По поводу остального не совсем понял, но вы плавы, если что-то идет «не так как должно», то вероятно такое поведение задается в шаблоне или через доп.плагины — отключите все и посмотрите как работает на базовых темах.
Всё работает, спасибо! Только появилась проблема: в поиске выводятся все категории и под категории, а потом уже результаты поиска. Как это исправить?
Василий, я бы попробовал добавить в функцию условный оператор !is_search() дабы выполнять код для всех страниц кроме поиска.
Здравствуйте,на странице магазина категории дублируются в настройках все правильно указал.На странице магазина Отображать категории,Отображение категории Показывать товары.Как исправить?