We are all constantly growing as developers in our respective areas, and as a frontender, I’m always excited to learn new code, particularly PHP and JQuery. I quickly learned it a mistake to not keep track of the custom functions and templates that have helped me complete the more complicated designs, mockups, and client expectations. As an employee of Eyesore Inc and a web professional, one of my greatest pleasures is being able to tell clients “Yes, we can do that” without hesitation. So, with respect to that, I’ve done my best collecting tools for my toolbox, sharpening them when possible.
Today’s issue is rather niche. This is a Woocommerce website designed and developed from a Blank template. The mockup has an archive for a product category’s subcategories, or child categories, whichever way you prefer to call it. This page not only lists the child categories, but also displays their respective thumbnails, in a column format. From my previous experience, I already had on-hand two functions(many thanks to Adriano of WP_Types for these) to pull a list of the subcategories, seen below.
function woocommerce_subcats_from_parentcat_by_ID($parent_cat_ID) {
$args = array(‘hierarchical’ => 1,’show_option_none’ => ”,’hide_empty’ => 0,’parent’ => $parent_cat_ID,’taxonomy’ => ‘product_cat’);
$subcats = get_categories($args);
echo ‘<ul class=”wooc_sclist”>’;
foreach ($subcats as $sc) {
echo ‘<li><a href=”‘. $link .'”>’.$sc->name.'</a></li>’;
}
echo ‘</ul>’;
}
function woocommerce_subcats_from_parentcat_by_NAME($parent_cat_NAME) {
$IDbyNAME = get_term_by(‘name’, $parent_cat_NAME, ‘product_cat’);
$product_cat_ID = $IDbyNAME->term_id;
$args = array(‘hierarchical’ => 1,’show_option_none’ => ”,’hide_empty’ => 0,’parent’ => $product_cat_ID,’taxonomy’ => ‘product_cat’);
$subcats = get_categories($args);
echo ‘<ul class=”wooc_sclist”>’;
foreach ($subcats as $sc) {
$link = get_term_link( $sc->slug, $sc->taxonomy );
echo ‘<li><a href=”‘. $link .'”>’.$sc->name.'</a></li>’;
}
echo ‘</ul>’;
}
These functions work well for displaying a list of the subcategory names, but what if we also what the thumbnails attached to them? We need to use this function as well and call to it where necessary.
function woocommerce_subcategory_image($term_id) {
$category_thumbnail = get_woocommerce_term_meta($term_id, ‘thumbnail_id’, true);
$image = wp_get_attachment_url($category_thumbnail);
echo ‘<img src=”‘ . $image . ‘”>’;
}
This is the function I’m currently using, for displaying the child category’s thumbnail with the title:
function woocommerce_subcats_from_parentcat_by_ID($parent_cat_ID) {
$args = array(‘hierarchical’ => 1,’show_option_none’ => ”,’hide_empty’ => 0,’parent’ => $parent_cat_ID,’taxonomy’ => ‘product_cat’);
$subcats = get_categories($args);
echo ‘<ul class=”wooc_sclist”>’;
foreach ($subcats as $sc) {
$link = get_term_link( $sc->slug, $sc->taxonomy );
echo ‘<li><a href=”‘. $link .'”>’;
woocommerce_subcategory_image($sc->term_id);
echo ‘</a>’;
echo ‘<a href=”‘. $link .'”>’.$sc->name.'</a></li>’;
}
echo ‘</ul>’;
}
We don’t just work for our clients, we also work with them, bringing custom solutions that cookie-cutter templates cannot provide.
