display product's category static slider name and image in loop wordpress

Question

I try to convert a category static slider in my home page for woocommerce but I don't know use which loop or function to do that, here is my code:

<div class="row mt-3 mb-5">
                <div class="col-12">
                    <div class="category-section dt-sn dt-sl">
                        <div class="category-section-title dt-sl">
                            <h3>More Than 3000 products</h3>
                        </div>
                        <div class="category-section-slider dt-sl">
                            <div class="category-slider owl-carousel">
                                <div class="item">
                                    <a href="#" class="promotion-category">
                                        <img src="./assets/img/category/notebook-computer.png" alt="">
                                        <h4 class="promotion-category-name">Electronics</h4>
                                        <h6 class="promotion-category-quantity">150</h6>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="#" class="promotion-category">
                                        <img src="./assets/img/category/lifeline-in-a-heart-outline.png" alt="">
                                        <h4 class="promotion-category-name">Beauty</h4>
                                        <h6 class="promotion-category-quantity">620</h6>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="#" class="promotion-category">
                                        <img src="./assets/img/category/repair-tools.png" alt="">
                                        <h4 class="promotion-category-name">Tools</h4>
                                        <h6 class="promotion-category-quantity">310</h6>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="#" class="promotion-category">
                                        <img src="./assets/img/category/hanbok.png" alt="">
                                        <h4 class="promotion-category-name">Clothes</h4>
                                        <h6 class="promotion-category-quantity">1000</h6>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="#" class="promotion-category">
                                        <img src="./assets/img/category/sofa.png" alt="">
                                        <h4 class="promotion-category-name">Home Appliance </h4>
                                        <h6 class="promotion-category-quantity">615</h6>
                                    </a>
                                </div>
                                <div class="item">
                                    <a href="#" class="promotion-category">
                                        <img src="./assets/img/category/school-material.png" alt="">
                                        <h4 class="promotion-category-name">Art</h4>
                                        <h6 class="promotion-category-quantity">60</h6>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

This is for showing the name and image of each product category, with a link to the categories woocommerce page. To get it automatically on a dynamic way it's possible by using the function get_terms(). This only shows the categories that have products associated, to show all categories even the empty ones we need to change the 'hide_empty' to false on this $cat_args variable array.

$cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args );
echo '<pre>';
print_r($cats);

Having this we can make a loop to display the info intended.

$cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args );
foreach ($cats as $key => $cat):
    echo $cat->name;
endforeach;

For example to show the "first generation" categories we compare the parent equals to zero.

$cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args );
foreach ($cats as $key => $cat):
  if ($cat->parent == 0):
    echo $cat->name;
  endif;
endforeach;

and if we have categories images we can show them for example like so.

$cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args );
foreach ($cats as $key => $cat):
  if ($cat->parent == 0):
    $image = wp_get_attachment_url(get_term_meta($cat->term_id, 'thumbnail_id', true));
    if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;
    echo $cat->name;
  endif;
endforeach;

Now let's assume the categories have sub-categories ("2nd generation"), we can make a foreach loop inside the foreach.

$cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args );
foreach ($cats as $key => $cat):
  if ($cat->parent == 0):
    $image = wp_get_attachment_url(get_term_meta($cat->term_id, 'thumbnail_id', true));
    if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;
    echo $cat->name;
    foreach ($cats as $key => $cat2):
      if ($cat2->parent == $cat->term_id):
        $image = wp_get_attachment_url(get_term_meta($cat2->term_id, 'thumbnail_id', true));
        if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;
        echo $cat2->name;
      endif;
    endforeach;
  endif;
endforeach;

It is possible also to have more sub-categories, let's say a "third generation", it's only needed to write a third foreach loop inside the second one.

$cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args );
foreach ($cats as $key => $cat):
  if ($cat->parent == 0):
    $image = wp_get_attachment_url(get_term_meta($cat->term_id, 'thumbnail_id', true));
    if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;
    echo $cat->name;
    foreach ($cats as $key => $cat2):
      if ($cat2->parent == $cat->term_id):
        $image = wp_get_attachment_url(get_term_meta($cat2->term_id, 'thumbnail_id', true));
        if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;
        echo $cat2->name;
        foreach ($cats as $key => $cat3):
          if ($cat3->parent == $cat2->term_id):
            $image = wp_get_attachment_url(get_term_meta($cat3->term_id, 'thumbnail_id', true));
            if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;
            echo $cat3->name;
          endif;
        endforeach;
      endif;
    endforeach;
  endif;
endforeach;

To add the link to the category page we can use the function get_term_link().

<a href="<?php echo get_term_link($cat); ?>"> <?php echo $cat->name ?></a>

And if there is more sub-categories of sub-categories, this can go on and on, but on a user point of view I belive that more than three "generations" of categories it's good enough, more than that can start to become very confusing.

In this dynamic product categories menu or whatever we present it, for example in the home page, if we add or delete a category they will show or dont as they are or not.

This is the function I use, now we just need to put html and css or even javascript on it!

Here's just little structure of it.

<?php $cat_args = array( 'orderby' => 'name', 'order' => 'asc', 'hide_empty' => true,);
$cats = get_terms( 'product_cat', $cat_args ); ?>
<div class="menu-body"> <?php
  foreach ($cats as $key => $cat):
    if ($cat->parent == 0): ?>
      <div class="menu-cat"> <?php
        $image = wp_get_attachment_url(get_term_meta($cat->term_id, 'thumbnail_id', true));
        if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif; ?>
        <a href="<?php echo get_term_link($cat); ?>"> <?php echo $cat->name ?></a> <?php
        foreach ($cats as $key => $cat2):
          if ($cat2->parent == $cat->term_id): ?>
            <div class="menu-subcat"> <?php
              $image = wp_get_attachment_url(get_term_meta($cat2->term_id, 'thumbnail_id', true));
              if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif; ?>
              <a href="<?php echo get_term_link($cat2); ?>"> <?php echo $cat2->name ?></a> <?php
              foreach ($cats as $key => $cat3):
                if ($cat3->parent == $cat2->term_id): ?>
                  <div class="menu-sub-subcat"> <?php
                    $image = wp_get_attachment_url(get_term_meta($cat3->term_id, 'thumbnail_id', true));
                    if ( $image ): echo '<img src="'.$image.'" alt=""/>'; endif;  ?>
                    <a href="<?php echo get_term_link($cat); ?>"> <?php echo $cat->name ?></a>
                  </div> <?php
                endif;
              endforeach; ?>
            </div> <?php
          endif;
        endforeach; ?>
      </div> <?php
    endif;
  endforeach; ?>
</div>
<style media="screen">
  .menu-body{
    background:gray;
    margin:10px;
    border-radius:10px;
  }
  .menu-body img{
    width:30px;
    height:30px;
  }
  .menu-cat{
    margin-left:15px;
    color:yellow;
  }
  .menu-subcat{
    margin-left:30px;
    color:lightgreen;
  }
  .menu-sub-subcat{
    margin-left:30px;
    color:lightblue;
  }
</style>