在 WooCommerce 中的新行上显示每个类别及其产品

在商店的主页上，我使用了一个代码来显示此类产品的类别名称：

第一类

产品 1 产品 2 产品 3

第 2 类

产品 1 产品 2 产品 3

我将此代码添加到子主题的 archive-product.php 文件中：

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' );

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' );

    woocommerce_product_loop_start();

    if ( wc_get_loop_prop( 'total' ) ) {

            /* Start my loop section */
            foreach( get_terms( array( 'taxonomy' => 'product_cat' ) ) as $category ) :
                $products_loop = new WP_Query( array(
                    'post_type' => 'product',

                    'showposts' => -1,

                    'tax_query' => array_merge( array(
                        'relation'  => 'AND',
                        array(
                            'taxonomy' => 'product_cat',
                            'terms'    => array( $category->term_id ),
                            'field'   => 'term_id'
                        )
                    ), WC()->query->get_tax_query() ),

                    'meta_query' => array_merge( array(

                    // You can optionally add extra meta queries here

                ), WC()->query->get_meta_query() )
            ) );

            ?>                      

            <h2 data-link="<?php echo get_term_link( (int) $category->term_id, 'product_cat' ); ?>"><?php echo $category->name; ?></h2>

            <?php
                while ( $products_loop->have_posts() ) {
                    $products_loop->the_post();
                    /**
                    * woocommerce_shop_loop hook.
                    *
                    * @hooked WC_Structured_Data::generate_product_data() - 10
                    */
                    do_action( 'woocommerce_shop_loop' );
                    wc_get_template_part( 'content', 'product' );
                }
                wp_reset_postdata();
            endforeach;
            /* End my loop section */

    }

    woocommerce_product_loop_end();

    /**
    * 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' );

但不幸的是，类别和产品并未按应有的方式显示。类别在一行上，但应显示在新行上。

这是文件中的代码还是样式有问题？如何解决这个问题？我会很高兴你的帮助！