You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为WordPress电商(WooCommerce)的每个产品类别创建自定义单页?

Hey there! Creating custom single pages for each WooCommerce product category is totally achievable, and I’ve got a few reliable methods to walk you through. Let’s dive in:

Method 1: Use WooCommerce Template Hierarchy to Build Custom Category Pages

WordPress (and WooCommerce) follows a template hierarchy that lets you target specific product categories with custom templates. Here's how:

  • Navigate to your theme folder (usually wp-content/themes/your-theme-name)
  • Copy either archive-product.php (WooCommerce's default product archive template) or category.php (your theme's default category template) into the same folder
  • Rename the copied file to taxonomy-product-cat-{your-category-slug}.php. For example, if your category slug is "laptops", the file should be taxonomy-product-cat-laptops.php
  • Open this new file and customize it to your heart's content: add category-specific banners, rewrite the category description, adjust product layout, or even add extra sections like recommended products or brand stories
  • Save the file, and WordPress will automatically load this custom template whenever someone visits that product category page
Method 2: Custom Page Template + Shortcodes (Great for Simple Customizations)

If you just want to add unique pre/post content around the product list without overhauling the layout, this method is simpler:

  • Create a new PHP file in your theme folder, name it something like custom-product-category-page.php, and add this template header at the top:
<?php
/*
Template Name: Custom Product Category Page
*/
get_header();

// Fetch the product category slug from a custom field (you can use ACF or add a manual custom field)
$category_slug = get_post_meta(get_the_ID(), 'target_category_slug', true);

if ($category_slug) {
    // Add your custom header content
    $category = get_term_by('slug', $category_slug, 'product_cat');
    echo '<div class="category-banner"><h1>Welcome to our ' . esc_html($category->name) . ' Collection</h1></div>';
    
    // Use WooCommerce's shortcode to display the category products
    echo do_shortcode('[product_category category="' . $category_slug . '" per_page="12" columns="4"]');
    
    // Add your custom footer content
    echo '<div class="category-about"><p>Here’s a special message about this category only...</p></div>';
}

get_footer();
?>
  • Save the file, then head to your WordPress dashboard and create a new page. Under "Page Attributes", select the "Custom Product Category Page" template
  • Add a custom field (like target_category_slug) and input the slug of the product category you want to link to
  • Publish the page, and it’ll show your custom content alongside the category’s products
Method 3: Use WooCommerce Hooks (No Template File Edits Needed)

If you don’t want to mess with template files (to avoid losing changes when your theme updates), use WooCommerce’s action hooks to inject custom content:

  • Open your theme’s functions.php file (preferably in a child theme to protect your changes) and add this code:
// Add custom content at the top of specific product categories
add_action('woocommerce_before_main_content', 'custom_category_top_content', 10);
function custom_category_top_content() {
    global $wp_query;
    $current_category = $wp_query->get_queried_object();
    
    // Target specific category slugs
    if ($current_category->slug === 'laptops') {
        echo '<div class="custom-top-banner"><h2>Our Premium Laptop Selection – Power Meets Portability</h2></div>';
    } elseif ($current_category->slug === 'smartphones') {
        echo '<div class="custom-top-banner"><h2>Latest Smartphones – Stay Connected, Anywhere</h2></div>';
    }
}

// Add custom content at the bottom of specific product categories
add_action('woocommerce_after_main_content', 'custom_category_bottom_content', 10);
function custom_category_bottom_content() {
    global $wp_query;
    $current_category = $wp_query->get_queried_object();
    
    if ($current_category->slug === 'laptops') {
        echo '<div class="custom-bottom-note"><p>Get free setup service with any laptop purchase!</p></div>';
    }
}
  • This code will insert your custom content before and after the main product list on the specified category pages. Adjust the slugs and content to match your needs
Quick Tips to Avoid Headaches
  • Always use a child theme when modifying theme files or adding custom code—this ensures your changes won’t be wiped when the parent theme updates
  • Back up your files before making edits, just in case something goes wrong
  • Customize the styling of your new sections using your theme’s custom CSS panel (under Appearance > Customize > Additional CSS)

内容的提问来源于stack exchange,提问作者Nkurunziza Déogratias

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 04:23:56