Organizing your WooCommerce store with clear categories and subcategories helps customers navigate your products more efficiently.
By providing a structured and intuitive browsing experience, you can guide customers directly to the products they are interested in.
Out of the box, the Woo Products module can only display Woo Products.
In this article, we will walk you through the steps to show categories and subcategories on your Woo Archive pages, making your online store more user-friendly and organized.
Install and activate the Code Snippets plugin
Create a new PHP snippet
Paste in the following PHP code:
function et_display_categories_shortcode($atts, $content=null){
extract( $atts = shortcode_atts(
array(
'limit' => 12,
'column' => 4,
), $atts, 'et_display_categories' ) );
ob_start();
$term_obj = get_queried_object();
$term_id = $term_obj->term_id;
$term_slug = $term_obj->slug;
$children = get_categories( array(
'child_of' => $term_id,
'taxonomy' => $term_obj->taxonomy,
'hide_empty' => false,
'fields' => 'ids',
) );
if (is_shop()) {
echo do_shortcode('[product_categories parent="0"]');
} elseif (is_product_tag()){
echo do_shortcode('[products limit="'.$limit.'" columns="'.$column.'" order="DESC" paginate=true tag="'.$term_slug.'"]');
} elseif (is_product_category()) {
if($children) {
echo do_shortcode('[product_categories parent="'.$term_id.'" limit="'.$limit.'" columns="'.$column.'"]');
} else{
echo do_shortcode('[products limit="'.$limit.'" columns="'.$column.'" order="DESC" paginate=true category="'.$term_slug.'"]');
}
}
return ob_get_clean();
}
add_shortcode('et_display_categories', 'et_display_categories_shortcode');Save your changes
Go to WordPress Dashboard → Divi → Theme Builder
Create a new templates
Assing the new template to:
All Product Category Pages
All Product Tags Pages
Shop
Create the Custom Body and inside place the following two modules:
The Post Title module and set it to only show the Title
The Code module
Inside the Code Module, add this shortcode:
[et_display_categories limit="4" column="4"]
Save your changes.
Bonus Tip: For each WooCommerce Category, you can set a Featured image by going to WordPress Dashboard → Products → Categories and editing your categories.
The result can be seen in the screenshot below:
