How to Display Parent or Sub-Child Categories in WooCommerce: A Comprehensive Guide
Introduction:
WooCommerce offers a robust category system for organizing your products. However, sometimes you need more control over how these categories are displayed on your shop page, product pages, or even in widgets. Specifically, you might want to show only the parent category, or dive deeper and showcase a specific sub-child category to improve navigation and highlight specific product selections. This guide will walk you through various methods to achieve this, ranging from simple WooCommerce settings to custom code implementations. We will cover different ways to achieve this so you can choose the method that best suits your technical skills and design preferences.
Main Part:
Understanding WooCommerce Categories
Before we dive into the practical solutions, it’s crucial to understand how WooCommerce handles categories:
- Parent Categories: These are the main, top-level categories. For example, “Clothing” or “Electronics.”
- Subcategories (Child Categories): These fall under parent categories. For instance, under “Clothing,” you might have “Shirts,” “Pants,” and “Dresses.”
- Sub-child Categories: Categories can extend further, creating deeper hierarchies. Under “Shirts,” you might have “T-Shirts,” “Button-Down Shirts,” etc.
- Show or hide empty categories: You can choose whether to display categories that don’t currently have any products assigned to them.
- Display category hierarchy: This shows the parent-child relationships between categories.
- Show product counts: Display the number of products within each category.
- Limit depth in the hierarchy: You can limit the widget to only display categories within a specific depth level. This is useful for showing only parent categories or for creating a more compact display.
- Title: Give the widget a title (e.g., “Shop by Category”).
- Display as dropdown: Choose if you want the categories displayed as a list or a dropdown menu.
- Show product counts: Enable to show the number of products in each category.
- Hierarchy: Enable to show parent/child relationships.
- Show only top level categories: If selected, this will only show the parent categories. This is how you display parent categories.
- Hide empty categories: Choose whether to hide categories that don’t have any products.
- Max category depth: Set a limit for the maximum number of levels to display.
The key is understanding this hierarchy to manipulate the display correctly.
Methods for Displaying Parent or Sub-Child Categories
Here are several methods you can use to show parent or sub-child categories in WooCommerce:
#### 1. Using WooCommerce Category Widget
This is the simplest method, perfect for beginners. The WooCommerce Category widget allows you to:
How to use the WooCommerce Category Widget:
1. Go to Appearance > Widgets in your WordPress dashboard.
2. Find the “WooCommerce Product Categories” widget.
3. Drag and drop the widget to your desired sidebar or widget area.
4. Configure the widget options:
#### 2. Editing the WooCommerce Shop Page
By default, the WooCommerce shop page may display all categories. You can modify this behavior using a plugin or by modifying the template file.
Using a Plugin:
Several plugins allow you to customize the shop page layout, including category display. Search the WordPress plugin repository for “WooCommerce category display” or “WooCommerce shop page customization.” Popular options often allow filtering by category and can be configured to only show parent categories or specific sub-child categories. Look for plugins with good ratings and a large number of active installations.
Modifying the Template (Requires coding knowledge):
This method requires modifying the WooCommerce template files. Always create a child theme to avoid losing your changes during theme updates.
1. Find the relevant template file: Typically, the file responsible for displaying categories on the shop page is `archive-product.php` or a similar file within your theme’s WooCommerce directory (`/wp-content/themes/[your-theme]/woocommerce/`). If this file doesn’t exist, copy it from the WooCommerce plugin directory (`/wp-content/plugins/woocommerce/templates/`) to your child theme’s WooCommerce directory.
2. Edit the template file: Within the template file, you’ll find code that loops through and displays the categories. You can modify this code to filter the categories based on their parent.
To only display parent categories, you can use the `get_terms()` function with the `parent` argument set to 0:
'product_cat', 'parent' => 0, // Only show parent categories );
$terms = get_terms( $args );
if ( $terms && ! is_wp_error( $terms ) ) :
?>
-
<a href="”>
name; ?>
To display a specific sub-child category, you can use the `slug` argument in the `get_term_by` function:
<?php $term = get_term_by( 'slug', 'your-sub-child-category-slug', 'product_cat' );
if ( $term && ! is_wp_error( $term ) ) :
?>
name; ?>
description; ?>
<?php
$args = array(
‘post_type’ => ‘product’,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘term_id’,
‘terms’ => $term->term_id,
),
),
);
$products = new WP_Query( $args );
if ( $products->have_posts() ) :
?>
-
<a href="”>
have_posts() ) : $products->the_post(); ?>
<?php
wp_reset_postdata();
else :
echo ‘
No products found in this category.
‘;
endif;
?>
Important: Replace `’your-sub-child-category-slug’` with the actual slug of your sub-child category. You can find the slug by going to Products > Categories in your WordPress dashboard and hovering over the category you want to use. The slug will be visible in the URL in the bottom left corner of your browser.
#### 3. Using Custom Functions in `functions.php`
You can create a custom function to display categories and then call that function in your theme templates. This provides a reusable and organized way to manage your category display logic.
1. Open your child theme’s `functions.php` file.
2. Add the following code:
<?php
function display_parent_categories() {
$args = array(
‘taxonomy’ => ‘product_cat’,
‘parent’ => 0,
);
$terms = get_terms( $args );
if ( $terms && ! is_wp_error( $terms ) ) {
echo ‘
- ‘;
- ‘ . $term->name . ‘
foreach ( $terms as $term ) {
echo ‘
‘;
}
echo ‘
‘;
}
}
function display_specific_sub_child_category( $category_slug ) {
$term = get_term_by( ‘slug’, $category_slug, ‘product_cat’ );
if ( $term && ! is_wp_error( $term ) ) {
echo ‘
‘ . $term->name . ‘
‘;
echo ‘
‘ . $term->description . ‘
‘;
$args = array(
‘post_type’ => ‘product’,
‘tax_query’ => array(
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘term_id’,
‘terms’ => $term->term_id,
),
),
);
$products = new WP_Query( $args );
if ( $products->have_posts() ) {
echo ‘
- ‘;
- ‘ . get_the_title() . ‘
while ( $products->have_posts() ) {
$products->the_post();
echo ‘
‘;
}
echo ‘
‘;
wp_reset_postdata();
} else {
echo ‘
No products found in this category.
‘;
}
}
}
?>
3. Call the function in your template:
To display parent categories:
To display a specific sub-child category (replace `’your-sub-child-category-slug’` with the actual slug):
SEO Considerations
When displaying categories, remember these SEO best practices:
- Use clear and descriptive category names: Help users and search engines understand what each category is about.
- Write compelling category descriptions: These provide context for search engines and can improve click-through rates.
- Use internal linking: Link between related categories and products to improve site navigation and SEO.
- Ensure your categories are mobile-friendly: A responsive design is crucial for a good user experience and SEO.
- Implement Schema markup: Use product and category schema to help search engines better understand the content of your pages.
Conclusion:
Displaying parent or sub-child categories in WooCommerce can significantly improve your store’s navigation and user experience. By using the WooCommerce Category widget, customizing your template files, or creating custom functions, you have flexible options to tailor your category display to your specific needs. Remember to consider SEO best practices to ensure your categories are easily found and understood by both users and search engines. Choose the method that best aligns with your technical skill level and design goals.
