Сен

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

Оцените статью:

(голосов - 5, средний балл: 6,80 из 7)

Загрузка...

Категории: WooCommerce;

Теги: вордпресс веб-разработка, интернет-магазин, категории Woocommerce, правка шаблона, сниппеты.

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

← Ранее 1 2 3 Далее →

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х сайтах, там все работало. В настройках отображения категории должны быть указаны товары.
Евгений 21.07.2020
Добрый день. Извиняюсь что не по теме, но близко =)
Задача в том, что бы вывести кастомное текстовое поле из плагина ACF под заголовком подкатегории, на странице подкатегорий.
Пробую такой код, но поле не выводится. Может у вас был опыт с подобными задачами?

function my_woocommerce_after_shop_loop() {
$cate = get_queried_object();
$cateID = $cate->term_id;
$mycat = ‘product_cat_’ . $cateID;
$my_gallery = get_field(‘ml-acf-pc-atr’, $mycat);
echo » . ( $my_gallery ) . »;
}

add_action(‘woocommerce_subcategory_count_html’, ‘my_woocommerce_after_shop_loop’, 10, 2);
Tod 21.07.2020
Евгений, к сожалению, опыта настройки ACF + Woocommerce не было.
rosbiz 25.07.2020
Спасибо за решение! А есть возможность сделать кликабельными картинки в выводимых категориях? Потому как в этом решении кликабельны только заголовки. Спасибо

rosbiz 25.07.2020

Это пример можно немного улучшить, изменив код след. образом:

function mynew_product_subcategories( $args = array() ) {
        $parentid = get_queried_object_id();
        $args = array(
            'parent' => $parentid
        );
        $terms = get_terms( 'product_cat', $args );
        if ( $terms ) {   
            echo '';
                foreach ( $terms as $term ) {             
                    echo '';     
                                  echo '<a href="&#039; .  esc_url( get_term_link( $term ) ) . &#039;" rel="nofollow">slug . '">';
                        woocommerce_subcategory_thumbnail( $term );
                        echo '';                         
                                echo $term->name;                         
                        echo '';   
                                 echo '</a>';
                    echo '';                                                       
            }
            echo '';
        }
}
 
add_action( 'woocommerce_before_shop_loop', 'mynew_product_subcategories', 50 );

В этом случае кликабельным будет не только заголвок но и картинка категории.

Сергей 06.08.2020
Кто-нибудь подскажите! Реализовал данное решение все Гуд. Теперь во всех категориях выводятся подкатегории списком.
ПРОБЛЕМА:
У меня есть категории в которых не нужно выводить подкатегории ( в стандартном решении для каждой категории можно выбрать, что показывать). Как можно отключить вывод списка подкатегорий для определенной родительской категории?
Яков 09.08.2020
Здравствуйте!
Будьте добры, подскажите!
Я обновил плагин Woocomerce на последнюю версию и выпадающий список, в котором можно было выбрать как отображать категорию не работает. То есть выбрать товары, подкатегории или вместе не работает. На странице категории отображаются только все товары подкатегории, а мне нужно как раньше,чтобы отображались именно подкатегории.
Я добавил ваш код из этой статьи, работает, спасибо большое, но вместе с подкатегориями теперь отображаются также и все товары этих подкатегорий.
Подскажите, как можно сделать, чтобы товары не отображались.
Tod 10.08.2020
Сергей, если я правильно понял, то в код нужно добавить проверку на принадлежность определенной категории к родительской — гуглить «woocommerce check if parent category»)) Должен быть какой-то условный оператор, я думаю.
Tod 10.08.2020
Яков, смотрите, если проблема возникла после обновления плагина, то лучше всего его просто откатить до нужной версии — есть такой модуль WP Rollback, который достаточно просто и легко это делает. Это самый простой метод, т.к. вполне возможно в новой версии закрались какие-то ошибки или несовместимости с макетом. Второй вариант — отредактировать мой код, чтобы показывать только подкатегории. Хотя я бы лично перешел в настройки Wocommerce по отображению подкатегорий/товаров и потестировал бы разные варианты отображения — вдруг, при обновлении что-то из настроек слетело именно там.
Артем 10.11.2020
Добрый день! Подскажите как сделать, что кликабельным был не только текст подкатегории но и изображения?
Tod 10.11.2020
Артем, нужно подправить код и добавить вывод ссылки A Href вокруг функции woocommerce_subcategory_thumbnail аналогично тому, как это сделано с заголовком.
Ростислав 05.03.2021
Спасибо за решение. Подскажите как изменить код, что бы не показывать категории на странице поиска. Самому не хватает знаний. Спасибо!
Tod 07.03.2021
Ростислав, о каких именно категориях идет речь? посмотрел на двух сайтах магазинах — когда ввожу в поиске запрос, то в результатах только товары. Возможно, это какая-то специфика вашей конкретной темы.
Илья 11.03.2021
Tod, спасибо большое!
Работает на Ура!
Подскажи, пожалуйста, а как выводить эти подкатегории не только на страницах категорий, но и на страницах атрибутов?
Ведь это очень важно — например есть атрибут Бренд, в котором отображается огромное количество товаров из разных категорий, а сортировать по категориям нет возможности.
Tod 13.03.2021
Илья, чтобы сортировать множество товаров по разным атрибутам лучше использовать плагины фильтров, как на всех популярных магазинах. К сожалению, в WordPress среди бесплатных толковых решений не так много мне попадалось.
Илья 13.03.2021
Tod, видимо мы недопоняли друг друга)
Плагины фильтра это все понятно, я использую это.
Вопрос в другом — субкатегории с помощью данного кода отображаются только на страница категорий. Но также есть не только страницы категорий, но и атрибутов и тегов.
Хотелось бы отображать все категории, принадлежащие показанным товарам и на страницах атрибутов.
от как это реализовать?
Ксения 16.04.2021
Есть проблема. Не выводяться товары внутри категории, несмотря на то, что настройки стоят правильные, такие — http://joxi.ru/bmoPKGzHyzGjK2
Tod 17.04.2021
Ксения, к сожалению, не могу посоветовать ничего конкретного, т.к. тут может быть много причин. Попробуйте поменять шаблон на стандартный и посмотреть работает ли модуль, отключите лишние плагины и посмотрите появятся ли товары. Нужно искать причину почему так происходит пошагово.
Ксения 17.04.2021
Tod, проблему решила. http://joxi.ru/krDVQ3lU4eeDy2 Все было просто.
Tod 19.04.2021
Ксения, отлично! спасибо, что поделились решением.
Сергей 08.06.2021
Привет. Как можно сделать добавление класса активной подкатегории?
Tod 09.06.2021
Сергей, посмотрите в HTML код сгенерированной страницы — возможно там для активной подкатегории будет какой-то дополнительный класс.