Запись

Woocommerce: Выводим категории над списком товаров

07.06.2023 Woocommerce, Wordpress От kastilio

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

Вывод категорий по умолчанию – плохо.

Вывод категорий над товарами – хорошо.

Чтобы исправить данное недоразумение, нужно открыть файл functions.php вашей темы на редактирование и вставить следующий код:

/* Выводим категории над списком товаров */
function woocommerce_product_category( $args = array() ) {
  $woocommerce_category_id = get_queried_object_id();
  $args = array(
    	'parent' => $woocommerce_category_id
  );
  $terms = get_terms( 'product_cat', $args );
  if ( is_product_category() ) {
	if ( $terms ) {
    	echo '<ul class="woocommerce-categories">';
    	foreach ( $terms as $term ) {
        	echo '<li class="woocommerce-product-category-page">';
			echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
            woocommerce_subcategory_thumbnail( $term );
			echo '</a>';
			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_main_content', 'woocommerce_product_category', 100 );

/* Выводим категории над списком товаров */

function woocommerce_product_category( $args = array() ) {

$woocommerce_category_id = get_queried_object_id();

$args = array(

'parent' => $woocommerce_category_id

);

$terms = get_terms( 'product_cat', $args );

if ( is_product_category() ) {

if ( $terms ) {

echo '<ul class="woocommerce-categories">';

foreach ( $terms as $term ) {

echo '<li class="woocommerce-product-category-page">';

echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';

woocommerce_subcategory_thumbnail( $term );

echo '</a>';

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_main_content', 'woocommerce_product_category', 100 );

Настроим внешний вид с помощью CSS:

/* Вывод категорий над товарами */
ul.woocommerce-categories {
	text-align: center;
	font-size: 0.5em;
	padding: 0;
  margin: 0 0 5em 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
	
	-webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	
	justify-content: flex-start;
}

/* выводим элементы в 4 столбца */
li.woocommerce-product-category-page {
	margin-left: 5%;
	margin-bottom: 2%;
	width: 21.25%;
}

/* Убираем отсуп слева у первого элемента на следующих рядах */
li.woocommerce-product-category-page:nth-child(4n+1) {
	margin-left: 0%;
}

/* === На мобильных === */
@media (max-width: 480px) {
	
	/* выводим элементы в 2 столбца */
	li.woocommerce-product-category-page {
		margin-left: 5%;
		margin-bottom: 0;
		width: 47.5%;
	}

	/* Убираем отсуп слева у первого элемента на следующих рядах */
	li.woocommerce-product-category-page:nth-child(2n+1) {
		margin-left: 0%;
	}
}

/* Вывод категорий над товарами */

ul.woocommerce-categories {

text-align: center;

font-size: 0.5em;

padding: 0;

margin: 0 0 5em 0;

list-style: none;

-ms-box-orient: horizontal;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

justify-content: flex-start;

}

/* выводим элементы в 4 столбца */

li.woocommerce-product-category-page {

margin-left: 5%;

margin-bottom: 2%;

width: 21.25%;

}

/* Убираем отсуп слева у первого элемента на следующих рядах */

li.woocommerce-product-category-page:nth-child(4n+1) {

margin-left: 0%;

}

/* === На мобильных === */

@media (max-width: 480px) {

/* выводим элементы в 2 столбца */

li.woocommerce-product-category-page {

margin-left: 5%;

margin-bottom: 0;

width: 47.5%;

}

/* Убираем отсуп слева у первого элемента на следующих рядах */

li.woocommerce-product-category-page:nth-child(2n+1) {

margin-left: 0%;

}

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

Настройка условий вывода категорий

$args = array(
    'parent' => $woocommerce_category_id,
);
$terms = get_terms( 'product_cat', $args );

$args = array(

'parent' => $woocommerce_category_id,

);

$terms = get_terms( 'product_cat', $args );

В данном примере мы только получаем ID родительской категории. Но мы можем добавить ещё условия для вывода категорий. Например, сортировку по названию категории:

$args = array(
    'parent' => $woocommerce_category_id,
    'orderby'=> 'name',
    'order' => 'ASC'
);
$terms = get_terms( 'product_cat', $args );

$args = array(

'parent' => $woocommerce_category_id,

'orderby'=> 'name',

'order' => 'ASC'

);

$terms = get_terms( 'product_cat', $args );

orderby

(строка) сортировать по:

id — по ID элементов (по умолчанию),
parent — по ID родительских элементов,
count — по количеству постов,
name — по имени,
slug — по ярлыку,
term_group — по значениям колонки term_group в таблице wp_terms базы данных,
include — в том же порядке, в котором указаны элементы в параметре include,
meta_value и meta_value_num – по значению произвольного поля,
none — без сортировки.

order

(строка) порядок сортировки:

ASC — по возрастанию (по умолчанию),
DESC — по убыванию.

hide_empty

(логическое) нужно ли добавлять в результат также и пустые категории:

true — не нужно (по умолчанию),
false — нужно.

Woocommerce: скрыть или удалить раздел Uncategorized/Misc

В Woocommerce, после установки, есть только один раздел – Uncategorized или Misc. Это раздел по умолчанию. После того, как вы…

Woocommerce: Юр. или физ. лицо при оформлении заказа

В некоторых ситуациях интернет магазины торгуют не только с физическими лицами, но и с юридическими. В других CMS, например в…

Комментировать