WooCommerce gives you a few options as to what you can display on your archive pages:
- categories (on the main shop page) or subcategories (on category pages)
- both products and categories.
When I’m setting up a store, I normally select the third option: products and categories/subcategories. This means visitors to my store can either select products right from the home page or refine their search by clicking through to a product category archive.
However, there’s one failing with this approach: It displays the categories/subcategories together, with no separation between the two. This means that if your product images have different dimensions from your product images, the layout can look a bit messy. Even if your images are the same size, if one of the lines in the archive page includes both categories and products, the absence of an ‘Add to Cart’ button for categories makes that row look untidy, as not all of its elements have the same dimensions.
In this tutorial I’ll show you how to display categories in a separate list before displaying products.
To do this, we’ll follow four steps:
- Identify the code WooCommerce uses to output categories and subcategories on archive pages.
- Create a plugin for our code.
- Write a function to put categories or subcategories before product listings.
- Style the output.
But before you start, you’ll need a WooCommerce installation with some products added, and product categories and subcategories set up.
What You’ll Need
To follow along, you’ll need:
- A development installation of WordPress.
- A code editor.
- WooCommerce installed and activated.
- Products added—I’ve imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
- A WooCommerce-compatible theme activated—I’m using Storefront.
Before We Start: The Default Options
Let’s take a look at what WooCommerce gives us by default.
I’ve started by adding some images to my product categories and subcategories, as the WooCommerce dummy data doesn’t include those. I’ve simply used an image of one of the products from each category or subcategory, as you can see in the screenshot:
Now let’s take a look at how WooCommerce displays the product categories and products in archive pages.
If you haven’t already, go to WooCommerce > Settings, select the Products tab, and then choose theDisplay option. For each of the Shop Page Display and Default Category Display options, select Show both:
Click the Save changes button to save your settings and visit your site’s shop page. Mine looks like this:
As it happens, because I have three product categories and my category images are the same size as my product images, it looks quite neat. But here’s one of the product category archives:
Because this category has two subcategories, the first product is displayed alongside them, in a grid three items wide. I want to make my categories and subcategories more prominent, and simply present them separately from the product listings. So let’s do that.
Identifying the Code WooCommerce Uses to Output Categories and Products in Archives
The first step is to identify how WooCommerce outputs categories and subcategories. So let’s delve into the WooCommerce source code to find the relevant function.
The file WooCommerce uses to display archive pages is
archive-product.php, which is in the
Inside that file, you can find this code, which outputs the categories and products:
So there’s a
woocommerce_product_subcategories() function which is outputting the categories or subcategories before running the loop which outputs the products.
The function is pluggable, which means we could override it in our theme. Unfortunately that doesn’t quite work as WooCommerce has built-in styling for clearing items, which would appear at the beginning of a row with the default display.
So instead of that, we’ll turn off display of categories and subcategories on our archive pages, so that just products are displayed. Then we’ll create a new function that outputs the product categories or subcategories, and hook it to the
woocommerce_before_shop_loop action, making sure we use a high priority so that it fires after the functions which are already hooked to that action.
Note: Because WooCommerce adds clears to each third product listing, we can’t use the
woocommerce_product_subcategories() function or an edited version of it to display the categories. This is because it will clear the third, sixth (and so on) category or product listed, even when we use this function to display categories separately. We could try to override that, but it’s simpler just to write our own function.
So let’s create a plugin which does that.
Creating the Plugin
wp-content/plugins directory, create a new folder and give it a unique name. I’m calling mine
tutsplus-separate-products-categories-in-archives. Inside that, create a new file, again with a unique name. I’m using the same name:
Open your file and add this code to it:
You might want to edit the author details as this is your plugin you’re writing. Save your file and activate the plugin via the WordPress admin.
Writing Our Function
Now let’s write the function. But before you start, turn off category listings in the admin screens. Go to WooCommerce > Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show products. Save your changes.
Your shop page will now look something like this:
In your plugin file, add this:
Now add this code inside the function:
Let’s take a look at what that function does:
- It identifies the current queried object and defines its id as
- It uses
get_terms()to identify terms with the currently queried item as their parent. If this is the main shop page, it will return top-level categories; if this is a category archive, it will return subcategories.
- Then it checks if there are any terms, before opening a
foreachloop and a
- For each term, it creates a
lielement, and then outputs the category image using
woocommerce_subcatgeory_thumbnail(), followed by the category name in a link to its archive.
Now save your file and refresh the main shop page. Mine looks like this:
The categories are displayed, but they need some styling. Let’s do that next.
Styling the Category Listings
So that we can add styling, we need a stylesheet inside our plugin, which we’ll need to enqueue.
In your plugin folder, create a folder called
css, and inside that, create a file called
Now, in your plugin file, add this above the function you’ve already created:
This correctly enqueues the stylesheet you’ve just created.
Now open your stylesheet and add the code below. WooCommerce uses mobile first styling, so that’s what we’ll be using too.
I’ve copied the exact widths and margins from the styling used by WooCommerce.
Now check your main shop page again. Here’s mine:
Here’s the Music category archive:
And here’s how it looks on smaller screens: