В одной из ранних статей мы отдельно от основного вывода WC выводили подкатегории. В этой статье мы усложним код вывода категорий и сделаем у категорий и вывод товаров. Это даст нам решение: подкатегория -> товары, подкатегория -> товары … и т.д.

Данное решение с успехом можно применить, когда мы используем Woocommerce в виде каталога или прайса.

Доработка функции вывода подкатегорий

Жирным выделена новая часть, которую я добавил в предыдущее решение

function tutsplus_product_subcategories( $args = array() ) {
	if ( !is_search() ) { 
		$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>';                 
					echo '<a href="'.esc_url( get_term_link($term) ).'" class="'.$term->slug.'">';         
					woocommerce_subcategory_thumbnail($term);
					echo '<h3>'.$term->name.'</h3>';
					echo '</a>';

					global $post; // !Обязательно заглобалить
					echo '<ul class="products">';
						$args = array(
							'post_type' => 'product',
							'posts_per_page' => 20,
							'product_cat' => $term->slug
						);
						$myposts = get_posts($args);
						foreach( $myposts as $post ) {
							setup_postdata($post);
							get_template_part('solus-product');
						}
						wp_reset_postdata();
					echo '</ul>';
				}
			echo '</ul>';
		}  
	}
}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 61 );

Обращаю внимание на строку get_template_part(‘solus-product’); в этом шаблоне содержится стандартный вывод товара WC

<li <?php wc_product_class(); ?>><span> <?php do_action('woocommerce_before_shop_loop_item'); do_action('woocommerce_before_shop_loop_item_title'); do_action('woocommerce_shop_loop_item_title'); do_action('woocommerce_after_shop_loop_item_title'); do_action('woocommerce_after_shop_loop_item'); ?> </span></li>

Плагины

Nested Category Layout стоимость 79$ (19.19.2018)

Вывод миниатюры категории произвольного размера

<?php global $wp_query; 
$cat = $wp_query->get_queried_object(); 
$thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );  
$image = wp_get_attachment_url( $thumbnail_id );  
echo "<img src='{$image}' alt='' />";  ?>

Если использовать шаблон product-cat-list.php, то первые две строки необязательны.