Артём Мáлков

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

22 янв14 коммАртём Мáлков

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

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

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

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

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

function get_categories_product($categories_list = '') {

	$get_categories_product = get_terms('product_cat', [
		'orderby' => 'name', // Поле для сортировки
		'order' => 'ASC', // Направление сортировки
		'hide_empty' => 1, // Скрывать пустые (1 - да, 0 - нет)
	]);
		
	if(count($get_categories_product) > 0) {
			
		foreach($get_categories_product as $categories_item) {

			$categories_list .= '

				<li>

					<a href="'.esc_url(get_term_link((int)$categories_item->term_id)).'">'.esc_html($categories_item->name).'</a>

				</li>

			';

		}
		
	}

	return ($categories_list == '' ? '' : '<ul class="main_categories_list">'.$categories_list.'</ul>');
		
}

Использование (вывод):

<?php

	echo get_categories_product();

?>

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

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

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

Функция:

function get_categories_product($categories_list = '', $parent_id = 0) {

	$get_categories_product = get_terms('product_cat', [
		'orderby' => 'name', // Поле для сортировки
		'order' => 'ASC', // Направление сортировки
		'hide_empty' => 1, // Скрывать пустые. 1 - да, 0 - нет.
		'hierarchical' => 1,
		'parent' => $parent_id
	]);

	if(count($get_categories_product) > 0) {

		$categories_list .= ($parent_id == 0 ? '<ul class="main_categories_list">' : '<ul class="sub_categories_list sub_categories_list_'.$parent_id.'">');

		foreach($get_categories_product as $categories_item) {

			$categories_list .= '

				<li>

					<a href="'.esc_url(get_term_link((int)$categories_item->term_id)).'">'.esc_html($categories_item->name).'</a>

					'.get_categories_product('', $categories_item->term_id).'

				</li>

			';

		}

		$categories_list .= '</ul>';

	}

	return $categories_list;

}

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

<?php

	echo get_categories_product();

?>

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

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

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

До новых встреч!

Рекомендуем к просмотру
Скидка в процентах на всю корзину без купона в WooCommerce
Посты
Вывод записей из нужных рубрик в WordPress
Статьи и советы
Изменяем количество товаров на странице WooCommerce
Хаки
14
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    1
      •  Пользователь
    4 янв в 11:49

    Большое спасибо, то что нужно.

    Не подскажите как дополнительно вывести картинки категорий?

    • 0
    1
      •  Пользователь
    5 окт в 16:39

    Здравствуйте!

    Как можно вывести дочерние категории в списке товаров при клике на родительскую категорию? Как здесь например: https://pitbikeatelie.ru/product-category/detali-dvigatelya/

    • 2
    1
      •  Проверенный
    30 авг в 15:50

    Добрый день. Подскажите, пожалуйста, как можно у меню второго уровня убрать li, чтобы остались только ссылки?

    И второй вопрос. Можно ли у второго уровня вообще убрать всё, чтобы осталось только текстовое содержимое?

    Заранее спасибо.

      • 1
      1083
        •  Команда Pandoge
      7 сен в 02:10

      Ноунейм Какой-То, здравствуйте! Да, можно, есть здесь, правда, свои нюансы. Больше двух уровней не может быть в вашем меню?

      Если нет, то в скрипте для одноуровневого меню строки:

      $categories_list .= '
      
      	<li>
      
      		<a href="'.esc_url(get_term_link((int)$categories_item->term_id)).'">'.esc_html($categories_item->name).'</a>
      
      	</li>
      
      ';

      замените на:

      $categories_list .= ($categories_item->parent > 0 ? esc_html($categories_item->name) : '
      
      	<li>
      
      		<a href="'.esc_url(get_term_link((int)$categories_item->term_id)).'">'.esc_html($categories_item->name).'</a>
      
      	</li>
      
      ');
    • 1
    1
      •  Пользователь
    3 июл в 10:18

    Здравствуйте, Артем! Подскажите как разбить сие чудо на колонки, например на 4?

      • 1
      1083
        •  Команда Pandoge
      изменено 4 июл в 11:34

      Алекс Рус, самое простое, наверное, с помощью стилей:

      .main_categories_list {
      	display: flex;
      	flex-wrap: wrap;
      }
      
      .main_categories_list li {
      	flex: 0 0 25%;
      }

      Если вы используете сетку Bootstrap, можно просто добавить класс «col-3» в тег <li>:

      $categories_list .= '
      
      	<li class="col-3">
      
      		<a href="'.esc_url(get_term_link((int)$categories_item->term_id)).'">'.esc_html($categories_item->name).'</a>
      
      	</li>
      
      ';
    • 4
    1
      •  Пользователь
    5 апр в 16:39

    Спасибо тебе! Очень крутое и быстрое решение) сэкономил кучу времени! cool

    • 2
    1
      •  Пользователь
    18 дек в 22:40

    Здравствуйте подскажите как реализовать такой вот вывод категорий на главной странице магазина вукомерс

    https://yadi.sk/i/N28iEj66DlvUtw

    если можно напишите в лс хотел Вам в личку написать, у Вас закрыто:(

    • 3
    1
      •  Пользователь
    20 сен в 13:49

    Ты и вправду БОГ!))) Пол дня искал решения, везде всякое говно предлагали, а ты взял и вкраци выложил прям то что и надо было. Не поленился даже зарегаться и поблагодарить тебя!)

      • 2
      1083
        •  Команда Pandoge
      24 сен в 01:44

      Виталий, рад, что смогли решить ваш вопрос smiley

    • 2
    2
      •  Пользователь
    1 июн в 12:03

    Подскажите, пожалуйста, как добавить класс "active" на текущую категорию?

    • 2
    2
      •  Пользователь
    1 июн в 12:02

    Подскажите, пожалуйста, а как вывести подкатегории текущей категории, то есть на которой находитесь в данный момент? upset

    • 3
    1
      •  Пользователь
    24 фев в 15:07

    Ты БОГ!!! Спасибо огромное, никак не мог найти именно древовидный вывод категорий.

      • 1
      1083
        •  Команда Pandoge
      24 фев в 22:32

      Кирилл, заходите к нам почаще smiley

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge