如何为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) orcategory.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 betaxonomy-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.phpfile (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
相关产品推荐
相关产品推荐

