This is How to Separate Product Archive Page for WooCommerce Taxonomy
As an ecommerce store owner using WooCommerce, you may want to create a custom archive page for your product taxonomy, such as product categories or tags. This allows you to have more control over the design and layout of the archive pages, making them better aligned with your overall website branding and user experience.
However, many WooCommerce store owners run into issues when trying to implement a separate archive page for their product taxonomy. The cause behind this issue is that you haven't added the necessary code to load the custom template you've created. Additionally, the naming convention of the taxonomy file may not be correct according to WordPress standards.
In this article, we'll walk through the step-by-step process to properly set up a separate product archive page for your WooCommerce taxonomy. By the end, you'll have a custom template that delivers a tailored shopping experience for your customers.
Understanding the Problem
The default WooCommerce archive pages, such as the product category or tag archives, are generated using the standard WordPress archive template hierarchy. This means that WooCommerce will try to load a specific template file based on the taxonomy you're viewing.
For example, if a customer is browsing your "Shirts" category, WooCommerce will look for a template file named archive-product.php
in your theme's root directory. If that file doesn't exist, it will then try to load the generic archive.php
template.
The issue arises when you want to create a custom template specifically for your product taxonomy archive page. You may have created a new file, like taxonomy-product_cat.php
, to handle the design and layout of your "Shirts" category page. However, WooCommerce isn't automatically loading this custom template.
The cause behind this problem is two-fold:
-
Missing Template Loading Code: You haven't added the necessary code to your functions.php file to tell WooCommerce to use your custom template for the product taxonomy archive page.
-
Incorrect Naming Convention: The name of your custom taxonomy template file may not be following the correct WordPress naming convention, which can prevent it from being recognized by the platform.
Let's go through the steps to properly set up a separate product archive page for your WooCommerce taxonomy.
Step 1: Create the Custom Taxonomy Template File
First, you'll need to create a new template file in your theme's root directory. The file should be named according to the WordPress naming convention for taxonomy templates, which is: taxonomy-{taxonomy_name}.php
.
For example, if you're creating a custom template for your "Product Categories" taxonomy, the file should be named taxonomy-product_cat.php
.
Inside this file, you can then add your custom HTML, CSS, and PHP code to design the layout and functionality of the archive page. You can use the default WooCommerce templates as a starting point and customize them to fit your needs.
Step 2: Load the Custom Taxonomy Template
Now that you have the custom taxonomy template file created, you need to tell WooCommerce to use it instead of the default archive template. You can do this by adding a small snippet of code to your theme's functions.php
file.
Here's the code you'll need to add:
add_filter( 'template_include', 'woocommerce_taxonomy_template', 30 );
function woocommerce_taxonomy_template( $template ) {
if ( is_tax( 'product_cat' ) || is_tax( 'product_tag' ) ) {
return locate_template( 'taxonomy-product_cat.php' );
}
return $template;
}
This code checks if the current page being loaded is a WooCommerce product category or tag taxonomy archive. If so, it tells WooCommerce to use the taxonomy-product_cat.php
template file instead of the default archive template.
You can customize this code to work with any of your custom product taxonomies. Just replace 'product_cat'
and 'product_tag'
with the slug of your own custom taxonomy.
Step 3: Ensure Correct Naming Convention
As mentioned earlier, the naming convention of your custom taxonomy template file is crucial for WordPress to recognize and load it correctly. The file should be named taxonomy-{taxonomy_name}.php
, where {taxonomy_name}
is the slug of your custom product taxonomy.
For example, if you have a custom taxonomy called "Brand", the file should be named taxonomy-product_brand.php
.
Double-check that the file name matches the taxonomy slug exactly. This will ensure that WordPress can properly locate and use your custom template.
Real-World Example: Separate Archive for Product Categories
Let's go through a real-world example of how to create a separate archive page for your WooCommerce product categories.
Suppose you have an online store that sells various clothing items, and you want to have a unique layout and design for your "Shirts" category page. Here's how you can set it up:
-
Create a new file in your theme's root directory called taxonomy-product_cat.php
.
-
Inside this file, add your custom HTML, CSS, and PHP code to design the layout and functionality of the "Shirts" category page. You can use the default WooCommerce category archive template as a starting point and customize it to your liking.
For example, you might want to display the category description at the top, then show the products in a grid layout with larger featured images.
-
In your theme's functions.php
file, add the following code:
add_filter( 'template_include', 'woocommerce_taxonomy_template', 30 );
function woocommerce_taxonomy_template( $template ) {
if ( is_tax( 'product_cat' ) ) {
return locate_template( 'taxonomy-product_cat.php' );
}
return $template;
}
This code tells WooCommerce to use the taxonomy-product_cat.php
template file when the customer is viewing a product category archive page.
With these steps, you've successfully created a separate archive page for your WooCommerce product categories. Customers browsing the "Shirts" category will now see the custom design and layout you've implemented, providing a more tailored shopping experience.
Remember, you can repeat this process for any of your custom product taxonomies, such as "Brands" or "Tags", to have complete control over the design and functionality of your WooCommerce archive pages.
By taking the time to properly set up a separate product archive page for your WooCommerce taxonomy, you can improve the overall user experience on your ecommerce store and potentially boost conversion rates. Flowpoint.ai can help you identify any other technical errors that may be impacting your website's performance and provide AI-generated recommendations to fix them.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.