Как оформить список категорий товаров на странице магазина WooCommerce?

Question

[TuMko]

В настройках магазина WooCommerce выбрана опция отображения категорий на странице магазина, а на странице категорий отображаются подкатегории.
Нужно оформить верстку по шаблону. Я определил, что в файле archive-product.php функция woocommerce_product_loop_start() выводит список категорий. Эта функция связана хуком woocommerce_maybe_show_product_subcategories, который зависит от функции woocommerce_output_product_categories. В этой функции и подключается шаблон content-product_cat.php, который выводит элемент списка категорий товаров li. Мне необходимо, чтобы эти элементы были обернуты в div ul с определенными классами.
В функции woocommerce_output_product_categories есть такой код, который по идее оборачивает список:

function woocommerce_output_product_categories( $args = array() ) {
		$args = wp_parse_args( $args, array(
			'before'    => apply_filters( 'woocommerce_before_output_product_categories', '' ),
			'after'     => apply_filters( 'woocommerce_after_output_product_categories', '' ),
			'parent_id' => 0,
		) );
...
}

Я так полагаю, что эти фильтры и отвечают за вывод кода "до" и "после", но как им присвоить необходимое значение в виде html кода?

Comments

[ian14]

Можно вывести категории так

<ul class="homepage-category">
<?php
$prod_cat_args = array(
    'taxonomy'    => 'product_cat',
    'orderby'     => 'id',
    'hide_empty'  => true,
    'parent'      => 0
  );

$woo_categories = get_categories( $prod_cat_args );
  foreach ( $woo_categories as $woo_cat ) {
      $woo_cat_id = $woo_cat->term_id;
      $woo_cat_name = $woo_cat->name;
      $woo_cat_slug = $woo_cat->slug;
      echo '<li class="main-cat-item">';
      $category_thumbnail_id = get_term_meta($woo_cat_id, 'thumbnail_id', true);
      $thumbnail_image_url = wp_get_attachment_image_src( $category_thumbnail_id, 'medium')[0];  
      echo '<a href="' . get_term_link( $woo_cat_id, 'product_cat' ) . '"><img src="' . $thumbnail_image_url . '"/> <h4>' . $woo_cat_name . '</h4></a>';
      echo "</li>\n";
  }
 
 ?>
</ul>

Answer 1

[ian14]

Попробуйте обернуть с помощью jQuery

Или выводите категории так

<ul class="homepage-category">
<?php
$prod_cat_args = array(
    'taxonomy'    => 'product_cat',
    'orderby'     => 'id',
    'hide_empty'  => true,
    'parent'      => 0
  );

$woo_categories = get_categories( $prod_cat_args );
  foreach ( $woo_categories as $woo_cat ) {
      $woo_cat_id = $woo_cat->term_id;
      $woo_cat_name = $woo_cat->name;
      $woo_cat_slug = $woo_cat->slug;
      echo '<li class="main-cat-item">';
      $category_thumbnail_id = get_term_meta($woo_cat_id, 'thumbnail_id', true);
      $thumbnail_image_url = wp_get_attachment_image_src( $category_thumbnail_id, 'medium')[0];  
      echo '<a href="' . get_term_link( $woo_cat_id, 'product_cat' ) . '"><img src="' . $thumbnail_image_url . '"/> <h4>' . $woo_cat_name . '</h4></a>';
      echo "</li>\n";
  }
 
 ?>
</ul>

Comments

[TuMko]

Пользоваться jQuery как-то не особо логично было бы, когда можно переопределить уже готовую конструкцию WooCommerce.
Если же выводить вышеуказанным кодом, то это тоже неудобно, т.к. категории будут выводится постоянно, в том числе и при поиске товаров, который использует шаблон archive-product.php.

[ian14]

TuMko, это смотря в каком месте выводить. Используйте разные шаблоны для страниц

Answer 2

[Andrey Tsvetkov]

В functions.php можно добавить:

// Add code before
function custom_before_output_product_categories() {
  echo '<div class="div-class"><ul class="ul-class">';
}
add_filter('woocommerce_before_output_product_categories', 'custom_before_output_product_categories');

Можно было бы добавить и для фильтра woocommerce_after_output_product_categories, но нужно проверить, корректно ли отобразится верстка.