Woocommerce 商店页面显示类别名称并显示该类别中的产品

I'm developing a website with Woocommerce plugin installed. I want my shop page to show the category name first & then display the products within that category, then next category name with the products it has.

已经在谷歌和这里搜索，找到了解决方案，但这不是我想要的。它在每个产品的价格区域后添加了类别名称。我不是专业人士，所以很难解决这个问题。

function wc_category_title_archive_products(){

    $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );

    if ( $product_cats && ! is_wp_error ( $product_cats ) ){

        $single_cat = array_shift( $product_cats ); ?>

        <small class="product_category_title"><?php echo $single_cat->name; ?></small>

<?php }
}
add_action( 'woocommerce_after_shop_loop_item', 'wc_category_title_archive_products', 5 );

<?php    
    $cat_args = array(
        'parent' => '0',
        'taxonomy' => 'product_cat'
    );
    $categories = get_categories( $cat_args );

    foreach ($categories as $category) { 
        echo $category->cat_name;
        echo do_shortcode('[product_category category="'.$category->cat_name.'" per_page="12" columns="4" orderby="date" order="DESC"]'); 
    }
?>