循环显示类别，缩略图和产品-Woocommerce

Question

我正在努力为客户端创建自定义循环：

。显示特定类别，缩略图以及该类别的所有产品。布局是这样的：

category grid

。第二种选择是使用可变产品，例如：

grid with variable products

---

对于第一个选项，我使用下面的代码。但是我不知道如何显示类别产品。

                     <div class="row">

<?php
    $prod_categories = get_terms( 'product_cat', array(
        'orderby'    => 'name',
        'order'      => 'ASC',
        'hide_empty' => 0,
        'numberposts' => -1,
        'exclude' => array('16,19,23')
    ));
    foreach( $prod_categories as $prod_cat ) :
        $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
        $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
?>
    <div class="col <?php echo $prod_cat->slug; ?>">
        <h3 class="text-center"><?php echo $prod_cat->name; ?></h3>
        <div class="text-center">
            <img src="<?php echo $cat_thumb_url; ?>" alt="<?php echo $prod_cat->name; ?>" />
        </div>
    </div>
<?php endforeach; wp_reset_query(); ?></div>   

                      </div> 

目标是：当用户将鼠标悬停在产品图片上时，将显示其背后的变体。用户单击变体，然后打开产品快速查看。