WooCommerce altered shop loop / products per category display

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/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header( 'shop' ); ?>

	<?php
		/**
		 * woocommerce_before_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
		 * @hooked woocommerce_breadcrumb - 20
		 */
		do_action( 'woocommerce_before_main_content' );
	?>

		<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

			<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

		<?php endif; ?>

		<?php
			/**
			 * woocommerce_archive_description hook.
			 *
			 * @hooked woocommerce_taxonomy_archive_description - 10
			 * @hooked woocommerce_product_archive_description - 10
			 */
			do_action( 'woocommerce_archive_description' );
		?>


			<?php
				/**
				 * woocommerce_before_shop_loop hook.
				 *
				 * @hooked woocommerce_result_count - 20
				 * @hooked woocommerce_catalog_ordering - 30
				 */
				do_action( 'woocommerce_before_shop_loop' );
			?>

<?php

// first we need to get the product categories ....

$categories_args = array(
	'taxonomy' => 'product_cat' // the taxonomy we want to get terms of
);

$product_categories = get_terms( $categories_args ); // get all terms of the product category taxonomy

if ($product_categories) { // only start if there are some terms

	echo '<ul class="catalog">';

	// now we are looping over each term
	foreach ($product_categories as $product_category) {

		$term_id 	= $product_category->term_id; // Term ID
	    $term_name 	= $product_category->name; // Term name
	    $term_desc 	= $product_category->description; // Term description
	    $term_link 	= get_term_link($product_category->slug, $product_category->taxonomy); // Term link


	    echo '<li class="product-cat-'.$term_id.'">'; // for each term we will create one list element

	    echo '<h4 class="product-cat-title"><a href="'.$term_link.'">'.$term_name.'</a></h4>'; // display term name with link

	    echo '<p class="product-cat-description">'.$term_desc .'</p>'; // display term description


	    // ... now we will get the products which have that term assigned...


	    $products_args = array(
			'post_type' 	=> 'product', // we want to get products
			'tax_query' 	=> array( 
				array(
					'taxonomy' => 'product_cat',
					'field'    => 'term_id',
					'terms'    => $term_id, // here we enter the ID of the current term *this is where the magic happens*
				),
			),
		);

		$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();

			while ( $products->have_posts() ) : $products->the_post();

				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 '</li>';//END here is the end of our product-cat-term_id list item

	}//END foreach $product_categories

	echo '</ul>';//END of catalog list

}//END if $product_categories


?>
	<?php
		/**
		 * woocommerce_after_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
		 */
		do_action( 'woocommerce_after_main_content' );
	?>

	<?php
		/**
		 * woocommerce_sidebar hook.
		 *
		 * @hooked woocommerce_get_sidebar - 10
		 */
		do_action( 'woocommerce_sidebar' );
	?>

<?php get_footer( 'shop' ); ?>