WooCommerce WordPress分类层级跳转需求:需实现分类→子分类→商品路径
Hey there! I get it—you want to set up a clear "Parent Category → Subcategory → Product List" navigation flow in your WooCommerce store, instead of jumping straight to products from parent categories. And you found some solutions that felt way too complex for your current WordPress knowledge. Let's break this down into simple, doable steps.
This approach uses a small code snippet to override WooCommerce's default behavior, perfect if you're comfortable adding a bit of code safely.
Step-by-Step Implementation
- First, open your theme's
functions.phpfile (use a child theme to avoid losing changes on theme updates, or use a plugin like Code Snippets to add code safely). - Paste this code:
add_action( 'woocommerce_before_main_content', 'force_parent_category_show_subcategories', 10 ); function force_parent_category_show_subcategories() { if ( is_product_category() ) { $current_category = get_queried_object(); // Check if the current category has child categories $child_categories = get_terms( $current_category->taxonomy, array( 'parent' => $current_category->term_id, 'hide_empty' => false // Set to true if you only want to show subcategories with products ) ); if ( ! empty( $child_categories ) ) { // Replace default product list with subcategory grid remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 ); // Show category title and description echo '<div class="woocommerce-products-header">'; echo '<h1 class="woocommerce-products-header__title page-title">' . single_term_title( '', false ) . '</h1>'; if ( $current_category->description ) { echo '<div class="term-description">' . wp_kses_post( $current_category->description ) . '</div>'; } echo '</div>'; // Render subcategory grid (matches WooCommerce's default product grid style) echo '<ul class="products columns-' . wc_get_loop_prop( 'columns' ) . '">'; foreach ( $child_categories as $child ) { $cat_thumbnail = get_term_meta( $child->term_id, 'thumbnail_id', true ); $cat_image = wp_get_attachment_url( $cat_thumbnail ); echo '<li class="product-category product">'; echo '<a href="' . get_term_link( $child ) . '">'; if ( $cat_image ) { echo '<img src="' . esc_url( $cat_image ) . '" alt="' . esc_attr( $child->name ) . '" />'; } echo '<h2 class="woocommerce-loop-category__title">' . $child->name . ' <mark class="count">' . $child->count . '</mark></h2>'; echo '</a>'; echo '</li>'; } echo '</ul>'; // Stop loading the default product list exit; } } }
- Save the changes. Now, any parent category with subcategories will display only its subcategories, and users will need to click into a subcategory to see products. Categories without subcategories will still show their product list as usual.
If code feels intimidating, use a simple plugin to configure the category flow visually:
- Install and activate WooCommerce Category Pages (a lightweight plugin designed for this exact use case).
- Go to
Products → Categoriesin your WordPress dashboard. - Edit any parent category, and look for the "Display Type" setting.
- Change it from "Products" to "Subcategories".
- Save the category. Repeat this for all parent categories you want to adjust.
This plugin lets you toggle between showing subcategories or products for each category, no coding needed.
- Clear your WordPress and browser cache after making changes to see the updated flow immediately.
- If you have a custom category template (like
archive-product.phpin your theme), double-check that it doesn't override the snippet or plugin settings. - Test all category pages to ensure parent categories show subcategories, and subcategories load product lists correctly.
内容的提问来源于stack exchange,提问作者user8453223

