Custom output wp list category

Question

Here is the output from the wp list categories:

Personal Area
    Allergy Asthma Dust
        Restaurant
        Cafe
        Bar
    Chemical & Smoke
        Airport
    Dump & Mold
    Pet & Dander
Commercial Area
    Commercial child 1
        Commercial child 1-2
        Commercial child 1-3
    Commercial child 2
        Commercial child 2-1

This is my code on front-page.php

<?php wp_list_categories('taxonomy=product_category&hide_empty=0&orderby=id&title_li=');?>

The category have 2 depth child. I want to custom the output html with background images each categories level and on click function to show each children

This is the html i want to added in wp list catgeories :

 <div class="row">
      <div class='col-md-6 pr-0'>
        <a href="#">
          <div class="personal text-right">
            <p>I want to improve air quality in my</p>
               <h4>PERSONAL AREA</h4>
          </div>
        </a>
      </div>

      <div class='col-md-6 pl-0'>
        <a href="#">
          <div class="commercial text-left">
            <p>I want to have better air quality in my</p>
              <h4>COMMERCIAL AREA</h4>
          </div>
        </a>
      </div>
    </div>

Here is for the children html when click parent category:

    <div class="row">
      <div class='col-md-12 pr-0'>
        <a href="#">
          <div class="personal text-right">
            <h4>What do you want to get rid off ?</h4>
            <p>Allergy Asthma Dust</p>
            <p>Chemical & Smoke</p>
            <p>Dump & Mold</p>
            <p>Pet & Dander</p>
          </div>
        </a>
      </div>

Here is the updated php code

      <?php                          
          $product_categories = get_terms( array(
              'taxonomy' => 'product_category',
              'hide_empty' => false,
              'orderby' => 'ID',
          ) );
          $cnt = 0;
          foreach($product_categories as $product_category) :   
              $cnt++;  
              if( count(get_term_children( $product_category->term_id, 'product_category' )) == 0) $catlink = 'document.location.href=\''.get_term_link( $product_category->term_id, 'product_category' ).'\''; else $catlink = 'toggleChildCategories('.$product_category->term_id.')'; // check last child category and change link

              if($product_category->parent == 0 && $cnt % 2 != 0) { // top-level parent
                  echo '<div class="col-md-6 pr-0 cat-parent-'.$product_category->term_id.' cat-parent cat-parent-'.$product_category->parent.' show">
                      <a href="javascript:void(0);" onClick="'.$catlink.'">
                          <div class="personal text-right">
                              <p>'.$product_category->description.'</p>
                              <h4>'.$product_category->name.'</h4>
                          </div>
                      </a>
                  </div>'; 
              }
              if($product_category->parent == 0 && $cnt % 2 == 0) { // top-level parent
                echo '<div class="col-md-6 pl-0 cat-parent-'.$product_category->term_id.' cat-parent cat-parent-'.$product_category->parent.' show">
                    <a href="javascript:void(0);" onClick="'.$catlink.'">
                        <div class="commercial text-left">
                            <p>'.$product_category->description.'</p>
                            <h4>'.$product_category->name.'</h4>
                        </div>
                    </a>
                </div>'; 
              }
              else { // child
                if($product_category->term_id == 4) {
                  echo '<div class="col-md-12 cat-parent-'.$product_category->term_id.' cat-children cat-item-'.$product_category->parent.' hide">
                      <h2>What do you want to get rid of ?</h2>
                  </div>';
                }
                if($product_category->term_id == 10) {
                  $parentname=get_term_by('id', $product_category->parent, 'product_category');
                  echo '<div class="col-md-12 cat-parent-'.$product_category->term_id.' cat-children cat-item-'.$product_category->parent.' hide">
                      <h2>Where do you want to get rid of</h2>
                      <h3>'.$parentname->name.'</h3>
                  </div>';
                }
                  echo '<div class="col-md-2 border2 cat-parent-'.$product_category->term_id.' cat-children cat-item-'.$product_category->parent.' hide">
                      <a href="javascript:void(0);" onClick="'.$catlink.'">
                          <h5>'.$product_category->name.'</h5>
                      </a>
                  </div>';        
              }
          endforeach;     
          ?>

Answer 1

You can use get_terms() to achieve a custom layout.

<?php                       
$product_categories = get_terms( array(
    'taxonomy' => 'product_category',
    'hide_empty' => false,
    'orderby' => 'ID',
) );

foreach($product_categories as $product_category) :         
    if($product_category->parent > 0) $hideshow='cat-item-'.$product_category->parent.' hide'; else $hideshow='cat-parent cat-parent-'.$product_category->parent.' show'; // hide child categories and append parent category
    echo '<div class="col-md-6 pr-0 cat-parent-'.$product_category->term_id.' '.$hideshow.'">
        <a href="javascript:void(0);" onClick="toggleChildCategories('.$product_category->term_id.');">
            <div class="personal text-right">
                <p>'.$product_category->description.'</p>
                <h4>'.$product_category->name.'</h4>
            </div>
        </a>
    </div>';        
endforeach;     
?>

Add this JS which would toggle appropriate child categories when the parent category clicked.

<script>
function toggleChildCategories(catid)
{
    jQuery('.cat-parent-'+catid).hide(); // hide particular parent
    jQuery('.cat-parent').hide(); // hide all parents
    jQuery('.cat-item-'+catid).slideToggle(100); // toggle child
}
</script>

Use this CSS to hide all the child categories initially.

<style>
.hide{display:none;}
</style>

Hope this helps. But please note that this is just an idea and you need to make necessary alterations.

Update: Different templates for parent (top level alone) and child categories.

<?php                          
$product_categories = get_terms( array(
    'taxonomy' => 'product_cat',
    'hide_empty' => false,
    'orderby' => 'ID',
) );

foreach($product_categories as $product_category) :   
    if( count(get_term_children( $product_category->term_id, 'product_category' )) == 0) $catlink = 'document.location.href=\''.get_term_link( $product_category->term_id, 'product_category' ).'\''; else $catlink = 'toggleChildCategories('.$product_category->term_id.')'; // check last child category and change link

    if($product_category->parent == 0) { // top-level parent
        echo '<div class="col-md-6 pr-0 pl-0 cat-parent-'.$product_category->term_id.' cat-parent cat-parent-'.$product_category->parent.' show">
            <a href="javascript:void(0);" onClick="'.$catlink.'">
                <div class="personal text-right">
                    <p>'.$product_category->description.'</p>
                    <h4>'.$product_category->name.'</h4>
                </div>
            </a>
        </div>'; 
    }
    else { // child
        echo '<div class="col-md-2 border2 cat-parent-'.$product_category->term_id.' cat-item-'.$product_category->parent.' hide">
            <a href="javascript:void(0);" onClick="'.$catlink.'">
                <h5>'.$product_category->name.'</h5>
            </a>
        </div>';        
    }
endforeach;     
?>