How to set html layout in a loop

I want to set the html layout view in a loop for multiple categories. My html code is here ... there were many categories from wo-commerce (wp-admin). The given code is a way to display my categories in home.php

, so I want to add more categories in home.php

via loop.Thanks My html code so far ...

    <div class="selected-products-wrapper clearfix">
    <div class="category-list">
    <span class="category-main" style="background-color: #5D973E">
      <div class="category-main_logo">
                <img src="" alt="" class="v-middle"></div>
      <span class="category-main-title">
             <a href="<?php
                 echo get_term_link($cat->slug, 'product_cat');
             ?>">
                 <?php echo $cat->name; ?></a></span>
      <div class="category-main-yakataheader"><img src=""></div>
        </span>
        <ul class="sub-category-list">
            <li><a href="#"><?php echo $sub_category ->name; ?></a></li>
        </ul>
        <a href="#" class="view-all">View all</a>
    </div>
    <div class="images-list">
        <a href="" class="large-img">
            <img src="" alt="Confectionery"
                 class="v-middle lazy-img" height="351" width="290">
        </a>
        <span class="small-img-block">
      <a href="">
                <img src="" alt="Fruits &amp; Veggies"
                     class="v-middle lazy-img" height="175" width="171">
            </a>
      <a href="">
                <img src="" alt="Noodles"
                     class="v-middle lazy-img" height="175" width="171">
            </a>
        </span>
        <span class="center_img-block">
             <a href="">
                 <img src="" alt="Oats"
                      class="v-middle lazy-img" height="175" width="344">
             </a>
             <a href="">
                 <img src="" alt="Ofada"
                      class="v-middle lazy-img" height="175" width="344">
             </a>
        </span>
        <span class="small-img-block last-img-block">
             <a href="">
                 <img src="" alt="Cooking Oils"
                      class="v-middle lazy-img" height="175" width="171">
             </a>
             <a href="">
                 <img src="" alt="Seasoning"
                      class="v-middle lazy-img" height="175" width="171">
             </a>
        </span>
    </div>
    <div class="alt-images-block">
        <a href="">Fruits &amp; Veggies</a>
        <a href="">Noodles</a>
        <a href="">Cooking Oils</a>
        <a href="">Seasoning</a>
    </div>
</div>