Your cart is currently empty!
WooCommerce Child Categories on Parent Category Archive Page
โ
by
This code adds your child categories before the loop on your parent category archives in WooCommerce.
add_action('woocommerce_before_shop_loop', 'display_woo_subcategories', 15);
function display_woo_subcategories() {
if (!is_product_category()) {
return;
}
$term_id = get_queried_object_id();
$taxonomy_name = 'product_cat';
$termchildren = get_term_children($term_id, $taxonomy_name);
if (empty($termchildren)) {
return;
}
echo '<div class="woo-subcategories multi-column">';
echo '<ul>';
foreach ($termchildren as $child) {
$term = get_term_by('id', $child, $taxonomy_name);
$thumbnail_id = get_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
echo '<li>';
echo '<a href="' . esc_url(get_term_link($term, $taxonomy_name)) . '">';
if ($image) {
echo '<img src="' . esc_url($image) . '" alt="' . esc_attr($term->name) . '" />';
}
echo '<h3>' . esc_html($term->name) . '</h3>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
Here’s some sample CSS.
.woo-subcategories.multi-column ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.woo-subcategories.multi-column ul li {
flex: 1 1 30%;
box-sizing: border-box;
text-align: center;
}
.woo-subcategories.multi-column ul li img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 10px;
}
.woo-subcategories.multi-column ul li h3 {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
Free
$0
Access only to all free tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Monthly
$75
Access to 10 premium tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Yearly
$500
Access to 15 premium tutorials per month.
Monthly Tutorial Request
Includes code guarantee and priority coding support.
Was This Tutorial Helpful?