WooCommerce altered shop loop / show category > sub categories > products on archive page

archiv-product.php

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header( 'shop' );

/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action( 'woocommerce_before_main_content' );

?>
<header class="woocommerce-products-header">
	<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
		<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
	<?php endif; ?>

	<?php
	/**
	 * Hook: woocommerce_archive_description.
	 *
	 * @hooked woocommerce_taxonomy_archive_description - 10
	 * @hooked woocommerce_product_archive_description - 10
	 */
	do_action( 'woocommerce_archive_description' );
	?>
</header>
<?php
if ( woocommerce_product_loop() ) {

	/**
	 * Hook: woocommerce_before_shop_loop.
	 *
	 * @hooked wc_print_notices - 10
	 * @hooked woocommerce_result_count - 20
	 * @hooked woocommerce_catalog_ordering - 30
	 */
	do_action( 'woocommerce_before_shop_loop' );


	// first we get all top-level categories
	$top_categories_args = array(
		'taxonomy' => 'product_cat', // the taxonomy we want to get terms of
		'parent' => 0 // all top level cats with a parent of 0
	);
	$top_categories = get_terms( $top_categories_args );

	if ($top_categories) {
		foreach ($top_categories as $top_category) {

			$top_id = $top_category->term_id;
			$top_slug = $top_category->slug;
			$top_name = $top_category->name;
			$top_desc = $top_category->description;

			echo '<div class="'.$top_slug.'">';

				echo '<h2>'.$top_name.'</h2>';

				if ($top_desc) {
					echo '<p>'.$top_desc.'</p>';
				}

				// here we get all the sub categories of the current cat
				$sub_categories_args = array(
					'taxonomy' => 'product_cat',
					'parent' => $top_id
				);
				$sub_categories = get_terms( $sub_categories_args );

				if ($sub_categories) {
					foreach ($sub_categories as $sub_category) {

						$sub_id = $sub_category->term_id;
						$sub_slug = $sub_category->slug;
						$sub_name = $sub_category->name;
						$sub_desc = $sub_category->description;
						
						echo '<div class="'.$top_slug.'-'.$sub_slug.'">';

						echo '<h3>'.$sub_name.'</h3>';

						if ($sub_desc) {
							echo '<p>'.$sub_desc.'</p>';
						}

						$products_args = array(
							'post_type' 	=> 'product', 
							'tax_query' 	=> array( 
								array(
									'taxonomy' => 'product_cat',
									'field'    => 'term_id',
									'terms'    => $sub_id, 
								),
							),
						);

						$products = new WP_Query( $products_args );

						if ( $products->have_posts() ) { // only start if we hace some products

							// START some normal woocommerce loop, as you already posted in your question

							woocommerce_product_loop_start();
							
							if ( wc_get_loop_prop( 'total' ) ) {

								while ( $products->have_posts() ) : $products->the_post();
								
									/**
									 * Hook: woocommerce_shop_loop.
									 *
									 * @hooked WC_Structured_Data::generate_product_data() - 10
									 */
									do_action( 'woocommerce_shop_loop' );

									wc_get_template_part( 'content', 'product' );

								endwhile; // end of the loop.
								
							}

							woocommerce_product_loop_end();

							// END the normal woocommerce loop

							// Restore original post data, maybe not needed here (in a plugin it might be necessary)
							wp_reset_postdata();

						} else { // if we have no products, show the default woocommerce no-product loop

							// no posts found
							wc_get_template( 'loop/no-products-found.php' );

						}//END if $products

						echo '</div><!-- END sub categories container -->';

					}
				}

			echo '</div><!-- END top categories container -->';
		}
	}

	/**
	 * Hook: woocommerce_after_shop_loop.
	 *
	 * @hooked woocommerce_pagination - 10
	 */
	do_action( 'woocommerce_after_shop_loop' );
} else {
	/**
	 * Hook: woocommerce_no_products_found.
	 *
	 * @hooked wc_no_products_found - 10
	 */
	do_action( 'woocommerce_no_products_found' );
}

/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action( 'woocommerce_after_main_content' );

/**
 * Hook: woocommerce_sidebar.
 *
 * @hooked woocommerce_get_sidebar - 10
 */
do_action( 'woocommerce_sidebar' );

get_footer( 'shop' );