how to set html layout in loop

Question

I want to set a html layout view in a loop for multiple categories. My html code is here...there were many of categories came from (wp-admin) woocommerce. Given code is layout of how to show my categories in home.php so i want to add more categories in home.php through loop.Thanks My html code is 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>

Answer 1

you need to create a custom php function with the data you want repeat.

e.g.

<?php
function repeat_category(){ ?>
//your html code you want to repeat goes here.

<?php } ?>

Then you can just use

<?php 
repeat_category(); 
?>

Wherever you want your html code to appear.