How to Display Subcategories Rather Than Parent Categories on Product Category Loop on the Homepage
As an ecommerce store owner, you want to make it as easy as possible for your customers to navigate your website and find the products they're looking for. One common issue that WordPress users face is the default behavior of displaying parent categories on the homepage rather than subcategories.
This can be frustrating for your visitors, as they may have to click through multiple levels of categories to reach the specific products they're interested in. Fortunately, there's a solution to this problem, and in this article, we'll guide you through the process step-by-step.
Understanding the Issue
By default, WordPress displays the parent categories on the homepage when using the product category loop. This means that if you have a category structure like "Electronics > Smartphones > iPhone", the "Electronics" category will be shown on the homepage, rather than the "Smartphones" or "iPhone" subcategories.
This can be confusing for your visitors, as they may have to click through multiple levels of categories to find the specific products they're looking for. This can lead to a poor user experience and potentially higher bounce rates.
Step 1: Set Up Your WordPress Menu
The first step in displaying subcategories on your homepage is to set up your WordPress menu properly. From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.
In the Menu Editor, you'll need to define a menu and choose which items you want to add. You can select categories, subcategories, posts, and even custom links to include in your menu.
To display subcategories on your homepage, you'll want to add the category parent links to your menu, rather than the individual category links. This will ensure that the subcategories are displayed in the menu, rather than the parent categories.
For example, if you have a category structure like "Electronics > Smartphones > iPhone", you would add the "Electronics" category to your menu, rather than the "Smartphones" or "iPhone" subcategories. This will allow the subcategories to be displayed on the homepage.
Once you've added the category parent links to your menu, you can rearrange the order of the items as needed and save your changes.
Step 2: Customize Your Theme's Code
Now that you've set up your WordPress menu, you'll need to customize your theme's code to display the subcategories on the homepage. This will involve modifying the code that generates the product category loop on your homepage.
The specific code changes will depend on the theme you're using, but the general process is as follows:
-
Locate the product category loop code: In your theme's files, find the code that generates the product category loop on the homepage. This is typically located in the index.php
or home.php
file.
-
Modify the code to display subcategories: Replace the code that displays the parent categories with code that displays the subcategories instead. You can do this by using the get_terms()
function in WordPress to retrieve the subcategories, and then displaying them in the loop.
Here's an example of what the modified code might look like:
<?php
$args = array(
'taxonomy' => 'product_cat',
'parent' => 0,
'hide_empty' => true,
);
$product_categories = get_terms($args);
if (!empty($product_categories)) {
foreach ($product_categories as $category) {
$child_args = array(
'taxonomy' => 'product_cat',
'parent' => $category->term_id,
'hide_empty' => true,
);
$child_categories = get_terms($child_args);
if (!empty($child_categories)) {
echo '<div class="product-category-container">';
echo '<h2>' . $category->name . '</h2>';
echo '<div class="product-category-grid">';
foreach ($child_categories as $child_category) {
echo '<a href="' . get_term_link($child_category) . '">';
echo '<div class="product-category-item">';
echo '<img src="' . get_term_meta($child_category->term_id, 'thumbnail_id', true) . '" alt="' . $child_category->name . '">';
echo '<h3>' . $child_category->name . '</h3>';
echo '</div>';
echo '</a>';
}
echo '</div>';
echo '</div>';
}
}
}
?>
This code first retrieves the top-level product categories, and then for each of those categories, it retrieves the subcategories and displays them in a grid layout on the homepage.
Note that the specific implementation may vary depending on your theme's structure and the way it handles product categories. You may need to adjust the code accordingly to fit your needs.
- Test and Verify: After making the code changes, test your website to ensure that the subcategories are being displayed correctly on the homepage. You may need to clear your browser cache or use a different browser to see the changes take effect.
Verifying the Result
Once you've completed the steps above, you should see the subcategories being displayed on your homepage instead of the parent categories. This will make it easier for your visitors to navigate your site and find the products they're looking for.
To ensure that the changes are working as expected, you can check the following:
-
Inspect the Homepage: Visit your website's homepage and inspect the HTML source code to ensure that the subcategories are being displayed correctly.
-
Test Category Navigation: Click on the subcategories displayed on the homepage to ensure that they're linking to the correct pages and that the product listings are being displayed correctly.
-
Monitor User Behavior: Use a tool like Flowpoint.ai to track user behavior on your website and see if the changes you've made have improved the user experience and reduced bounce rates.
By following the steps outlined in this article, you'll be able to effectively display subcategories on your WordPress homepage, providing a better shopping experience for your customers and potentially boosting your conversion rates.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.