Сен
6
39

Как вывести подкатегории WooCommerce отдельно от товаров в магазине

подкатегории WooCommerceПосле интересной заметки о наличии товара в Woocommerce рассмотрю задачу, связанную с подкатегориямии в магазине. Изначально хотел написать более масштабный пост по категориям, но позже решил сузить тему чтобы вас не запутывать. В плагине есть опция с 3-мя способами как можно показывать продукцию в разделах: 1) только товары; 2) подкатегории; 3) совместить оба варианта. В ранних версиях она находилась в меню «Настройки» — «Товары» — «Отображение», позже перенесли в настройщик темы.

Многие используют последний метод дабы посетитель мог самостоятельно выбирать что делать: переходить в нужный архив или сразу просматривать все товары в одном месте. Его и разберем. Разработчикам, кстати, может также пригодиться сниппет позволяющий скрыть категорию и товары из Woocommerce каталога.

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

Категории и товары в архиве

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

Хак вывода подкатегорий WooCommerce

1. Первым делом заходим в раздел «Внешний вид» — «Настройки» — «WooCommerce», где для опции «На странице категории» выбираем показ только самой продукции:

Настройка отображения товаров в WooCommerce

Если у вас более ранние версии модуля магазина, то данная опция находится непосредственно в его настройках во вкладке «Товары» — «Отображение»:

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

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

категория Категории: WooCommerce;
теги Теги: , , , , .

комментариев 39 к статье “Как вывести подкатегории WooCommerce отдельно от товаров в магазине”

  • Tod   24.10.2019

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

  • Pasha   11.12.2019

    Из вкладки Товары пропала вкладка Отображение, тепер не могу убрать отображение подкатегорий (самой папки) в основной категории.

  • Tod   11.12.2019

    Pasha, сейчас эти параметры перенесли в раздел «Внешний вид» — «Настройки» — «WooCommerce», т.е. совместили с другими настройками шаблона.

  • CodeRED   11.03.2020

    Подскажите, как настроить вывод подкатегорий в категориях? Когда выбираю «Показывать подкатегории», то ничего не отображается. А при использовании кода из статьи отображаются и подкатегории и товары.

  • Tod   12.03.2020

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

  • CodeRED   12.03.2020

    Tod, дело в том, что желаемый результат — это подкатегории на страницах категорий. Без товаров. Без этого кода подкатегории вообще не отображаются. С кодом — отображаются подкатегории + товары при выбранных опциях «Показывать товар» и «Отображать подкатегории и товар». При выборе опции «Показывать подкатегории» — на месте магазина образуется пустое место и ничего не отображается… Хотелось бы, чтобы этот код можно было адаптировать и под опцию «Показывать категории»

  • Tod   13.03.2020

    CodeRED, этот код нужен только чтобы выводить подкатегории + товары в таком виде, как показано в статье. Если вам нужно просто подкатегории без продукции, то это должно работать по умолчанию в Woocommerce — там в настройках даже есть соответствующая опция. То есть для главной выбираете категории, для страницы категорий — подкатегории и все. Код не нужен.
    Если эта фишка не срабатывает, то надо искать проблему — конфликт с другим модулем либо в шаблоне как-то переопределяется данный порядок вещей (попробуйте базовый шаблон WordPress по умолчанию).

  • Кирилл   17.03.2020

    mynewsite.praktika.by роблема в том что в конечной сабкатегории не отображаются товары

  • Tod   18.03.2020

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

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


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

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

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

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

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

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