By 
It is a common practice in many online stores to use different templates for categories, tags, custom post types, and taxonomies. If you use different templates for categories, you can add specific features on category pages. For example, you can add category images, show category description, allow users to subscribe to categories, and choose a different layout for each category.
WooCommerce Storefront Theme Create Multiple Category Templates
In this brief tutorial, I will show you how to create category templates in your WooCommerce store.
The Template Hierarchy for Category Pages
WordPress has a powerful templating system that allows you to create themes by using different templates for different website sections. When displaying any page, WordPress looks for a template in a pre-defined hierarchical order. For example, to display a category page, it looks for templates in the following order:
category-slug.php > category-id.php > category.php > archive.php > index.php
The first template it will look for is the one specific for that particular category using the category slug. The category-design.php template will be used to display the ‘Design’ category. However, if it does not find a category-slug template, WordPress will look for a category ID template.
It will then look for the generic category template, which is usually category.php. However, if there is no generic category template present, WordPress will look for a generic archive template.
After that, it will use the index.php template to display the category.
How to Create a Category Template
The typical category.php template looks like this:
<?php
/**
* A Simple Category Template
*/
get_header(); ?>
<section id="primary" class="site-content">
<div id="content" role="main">
<?php
// Check if there are any posts to display
if ( have_posts() ) : ?>
<header class="archive-header">
<h1 class="archive-title">Category: <?php single_cat_title( '', false ); ?></h1>
<?php
// Display optional category description
if ( category_description() ) : ?>
<div class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
</header>
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<div class="entry">
<?php the_content(); ?>
<p class="postmetadata"><?php
comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');
?></p>
</div>
<?php endwhile;
else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Let us assume that you have a category called “Classy Clothes” with the category-slug “classy” and you want to display this category differently than others. This result can be achieved by creating a template for that particular category.
To do this, go to Appearance > Editor. You will see some theme files on your right. Click on archive.php. If it is not there, look for category.php. However, if you are using the Storefront theme you will find archive.php.
Copy all the contents of the archive.php file and paste them in a text editor like Notepad. Save this file as category-design.php.
The next step is to go to wp-content > Themes > Storefront theme. Upload the category-design.php file to your theme directory.
It is worth mentioning that any changes you make to this template will only appear in this particular category’s archive page. You can use this technique to create templates for as many categories as you want. You just need to use category-{category-slug}.php as the file name. Category slugs are found in the categories section in the WordPress admin area.
This is another example of a category-slug.php template. It is the same as the category.php template, with little changes:
<?php
/**
* A Simple Category Template
*/
get_header(); ?>
<section id="primary" class="site-content">
<div id="content" role="main">
<?php
// Check if there are any posts to display
if ( have_posts() ) : ?>
<header class="archive-header">
<?php
// Since this template will only be used for Design category
// we can add category title and description manually.
// or even add images or change the layout
?>
<h1 class="archive-title">Design Articles</h1>
<div class="archive-meta">
Articles and tutorials about design and the web.
</div>
</header>
<?php
// The Loop
while ( have_posts() ) : the_post();
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<div class="entry">
<?php the_excerpt(); ?>
<p class="postmetadata"><?php
comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');
?></p>
</div>
<?php endwhile; // End Loop
else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
However, if you do not want to use category-slug template, then you can use category-id template to create a template for specific category ID
How to use Conditional Tags for a Category
When you create templates for your theme, you need to be sure if you need an extra template. This is because in some cases you want to make are not too complicated and can be achieved using conditional tags inside a generic template.
WordPress supports many conditional tags. One of them is the is_category() conditional tag. You can use it to change your templates to display different output if the condition is matched. For example, you might want to show some extra information on the category archive page for a category. To do this, simply add this code in category.php file right after <?php if ( have_posts() ) : ?>.
<header class="archive-header"> <?php if(is_category( 'Featured' )) : ?> <h1 class="archive-title">Featured Articles:</h1> <?php else: ?> <h1 class="archive-title">Category Archive: <?php single_cat_title(); ?> </h1> <?php endif; ?> </header>
Conclusion
In this post, I have highlighted that you can use different templates for categories, tags, custom post types, and taxonomies. Moreover, I have shared the template hierarchy that is used in WordPress for category pages.
Additionally, I have shown you how you can create a category template and how you can use conditional tags for a category.
Similar Articles
- How to Add Custom Post Types to ‘at glance’ Dashboard Widget WordPress
- How to Create Custom Post Type in WordPress without Plugin
- How to Add Default Content to Custom Post Type Editor
- How to Add Content Before or After the_content & In Custom Post Types
- How to Remove or Hide Comments from Custom Post Type » Disable Comments in Custom Post Types
- How to Create WordPress Pagination for Custom Post Types
- How to Remove or Disable autop In WordPress Posts & Custom Post Types