/ Плагины / Отделить категории от товаров

Отделить категории от товаров

HIT

22.01.2017

7586

5

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

Разделение

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

Включаем такой хук:

// Отделяем категории от товаров
function tutsplus_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">';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
woocommerce_subcategory_thumbnail( $term );

echo '<h3>'.$term->name.'</h3>';
echo '</a>';
}

echo '</ul>';

}

}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

Функция создает новый список с категориями перед товарами. Стили можно позаимствовать/объединить с товарными, для этого ul нужно добавить класс products, а li product. Также можно задать для категорий отдельные стили и верстку.

Еще можно вывести количество товаров в каждой категории, добавить:

echo '<p class="count">'.$term->count.'</p>';

В шаблоне результатов поиска выводятся все родительские категории товаров, независимо от того какие товары мы ищем — это неправильно. Чтобы этого избежать добавим внутри функции проверку if ( !is_search() ) { }

Отдельные шаблоны

Бывает необходимо разделить вывод категорий и товаров в разные шаблоны.

Как это сделать?

Подкатегории в боковой панели (sidebar)

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

<?php $args = array(
    'post_type'      => 'product',
    'posts_per_page' => -1,
	'product_cat' => get_queried_object()->slug,
	'meta_query'   => array( 
		'relation' => 'AND',
		array(
			'key'  => '_stock',
			'value'   => 0,
			'compare' => '>'
		),
		array(
			'key'  => '_regular_price',
			'value'   => 0,
			'compare' => '>'
		),		
	),
	'fields' => 'ids'
);

$loop = query_posts( $args );

wp_reset_query();
	
foreach ($loop as $id) {
	$terms = get_the_terms( $id, 'product_cat' );
	$cur_terms[] = $terms[0]->term_id;
}
	
$cur_terms_uniq = array_unique($cur_terms);

if ($cur_terms_uniq): ?>  

<div id="podcat-list">
	<?php foreach ($cur_terms_uniq as $cur_term) : ?>
	<?php $term = get_term( $cur_term, 'product_cat' ); ?>
	<div class="podcat-line"><a href="<?php echo get_tag_link($term->term_id);?>">
		<?php woocommerce_subcategory_thumbnail( $term ); ?>	
		<p><?php echo $term->name; ?></p>
		</a></div>
	<?php endforeach; ?>
</div>

<?php endif; ?>

Стили:

/* Подкатегории */

#podcat-list {margin-bottom: 30px;}

.podcat-line a {display: flex; align-items: center; border: 1px solid #eee; border-radius: 3px; margin-bottom: 7px; color: #333; padding: 7px;}

.podcat-line a:hover {margin-left: -15px; margin-right: 15px;}

.podcat-line.podcat-parent a {margin-bottom: 15px;}

.podcat-line a img {width: 15%; margin-right: 5%;}

.podcat-line p {padding-left: 15px;}

.podcat-line i {color: #e7c68f; font-size: 0.8rem;}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Отключаем стандартные метабоксы

Отключаем стандартные метабоксы

Отключая стандартные метабоксы, мы фактически избавляемся изначально от лишнего функционала. При отключении метабоксов мы также отключаем сами поля, что позволяет существенно разгрузить таблицу wp_postmeta (особенно если у сайта несколько тысяч Читать далее »

Колесо удачи для интернет-магазина

Колесо удачи для интернет-магазина

Добавим на интернет-магазин возможность посетителям проверить свою удачу посредством колеса удачи. Колесо представляет собой барабан с секторами с разными вариантами скидок, либо отсутствия их. Lucky Wheel for WooCommerce – Spin Читать далее »

Акция 20% на каждый 3 и 30% на каждый 4 товар

Акция 20% на каждый 3 и 30% на каждый 4 товар

Поступила нестандартная задача, реализовать акцию 20% на каждый 3 и 30% на каждый 4 товар. Сложность заключалась в том что скидки 20% и 30% должны были действовать на товары начиная Читать далее »

Добавить комментарий

5 комментариев

  1. Сергей

    Спасибо за Ваше решение! Долго искал и не мог найти рабочее. Стилями и тегами подогнал под то, что мне было нужно. Все выглядит и работает как надо.

    1. Alexandr

      Спасибо! Но должен сказать, что данное решение не мое. Нашел на каком-то из зарубежных сайтов. Проверил и тоже решил, что решение неплохое.

  2. Светлана

    Спасибо, все работает, кроме if ( !is_search() ) { } — категории все равно отображаются в поиске.Можно как-то исправить?

  3. Кирилл

    Добрый день. Столкнулся с такой проблемой. У меня на сайте товары, которых нет в наличии, скрываются с сайта, а с Вашим кодом у меня в списке категорий появляются категории, в которых нет ни одного товара (по факту они есть, но скрыты, т.к. нет в наличии). Я внес маленькое изменение в Ваш код, чтобы категории с нулевым кол-вом товаров не отображались в списке категорий.
    // Отделяем категории от товаров
    function tutsplus_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 ) {
    $amount = $term->count;
    if ($amount == ‘0’) {
    echo »;
    }
    else {
    echo ‘<li class=»category»>’;
    echo ‘<a href=»‘ . esc_url( get_term_link( $term ) ) . ‘» class=»‘ . $term->slug . ‘»>’;
    woocommerce_subcategory_thumbnail( $term );
    echo ‘<h3>’.$term->name.'</h3>’;
    echo ‘</a>’;
    }
    }
     
    echo ‘</ul>’;
     
    }
     
    }
    add_action( ‘woocommerce_before_shop_loop’, ‘tutsplus_product_subcategories’, 50 );
     

  4. Кирилл

    Кавычки придется восстановить, обработчик сообщений весь код херит, не могу его ввести нормально даже через тег <code>.

Отделить категории от товаров
Иконки svg
Рекомендации для васИконки svgOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.