Website Building » WooCommerce » How Do I Create a Custom Category Page in WooCommerce?

How Do I Create a Custom Category Page in WooCommerce?

Last updated on January 19, 2023 @ 2:47 pm

If you’re using WooCommerce to sell products online, chances are you’ll want to create a custom category page at some point. Whether you’re looking to change the layout of your category pages, or you want to add some extra functionality, a custom category page can be a great way to achieve this.

In this article, we’ll show you how to create a custom category page in WooCommerce, step-by-step.

Creating a Custom Category Page in WooCommerce

WooCommerce makes it easy to create custom category pages. You can do this by creating a new file in your theme’s folder called category-{slug}.php. Replace {slug} with the slug of the category you want to customize.

For example, let’s say we have a category called “Shirts.” We would create a file called category-shirts.

You can also use this method to customize subcategories. So if we had a subcategory called “T-shirts,” we would create a file called category-shirts-tshirts.

Once you’ve created the file, open it up and add the following code:

<?php
// This code goes in your category-{slug}.php file
     $term = get_queried_object();
     $args = array(
     'post_type' => 'product',
     'tax_query' => array(
 array(
     'taxonomy' => $term->taxonomy,
      'field' => 'slug',
      'terms' => $term->slug,
  ),
 ),
),
$products = new WP_Query( $args );
if ( $products->have_posts() ) : ?>
<ul class="products">
    <?php while ( $products->have_posts() ) : 
    $products->the_post(); ?>

<li class="product">
<a href="<?php the_permalink(); ?>" 
    title="<?php echo esc_attr( get_the_title() ); ?>" >
    <?php the_title(); ?></a></li><?php endwhile; ?></ul>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>
PRO TIP: If you are not familiar with code or do not feel comfortable editing your theme files, we recommend using a plugin instead. There are a few plugins that can assist you with adding a custom category page in WooCommerce.

This code does the following:

  • Gets the current category object: The first line of code gets the current category object. This is an object that contains all the information about the current category, including its slug (which is what we’re interested in).
  • Creates an array of arguments for our WP_Query: The next lines of code create an array of arguments for our WPQuery. We’re telling WPQuery that we only want to return products that are in the current category.
  • Runs our WP_Query: The next line runs our query and stores the results in a variable called $products.
  • Checks if there are any products: The next lines of code check to see if there are any products in the current category. If there are products, they will be displayed in a list.
Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.