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>
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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>
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0