Сен
6
0

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

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

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

К сожалению, в шаблоне 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) следующие строки:

// WooCommerce products and categories/subcategories separately in archive pages
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 отвечают за меньшие версии экрана. После внесения правок, смотрите результат.

Я тестировал данный пример на реальном сайте — все работает отлично. Возможно, какими-то хитрыми CSS методами получится все реализовать без дополнительной функции либо данная фишка исправлена в новой WooCommerce 3.0 (я тестировал на ветке 2.6.x), но, как бы там ни было, этот пример будет хорошей практикой начинающим WordPress разработчикам.

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

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

категория Категории: WooCommerce;
теги Теги: , , , , .
Оставить комментарий


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

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

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

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

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

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