Organizing Products

Once you’ve added products to your store, it’s time to start thinking about the organization of your store. WooCommerce automatically lists products on your Shop page and if you’re new to e-commerce, you might decide that’s enough and stop there.

But there’s actually a lot you can do to improve the organization of your store, and this organization can have a huge impact on the revenue your store generates.

As an example, in 2017, WooCommerce updated the category structure on its site. It reorganized 17 top-level categories into 7 top-level categories with subcategories.

This one change improved the conversion rate of anyone landing on a category page by 20%. That’s a massive improvement, and what’s great is that this helps both the store owner by getting more revenue and the user by making it easier to find the information they need.

Having a great structure for your store will also naturally help with...

Technical requirements

In this chapter, we’re going to install the Storefront theme (https://wordpress.org/themes/storefront/). This is the official theme from the WooCommerce team and is an excellent starting point for any store.

Later in this chapter, we’ll install the Yoast SEO plugin (https://wordpress.org/plugins/wordpress-seo/). This plugin helps you improve your search engine optimization (SEO) across your site. We’ll use it to help us improve the SEO on our category pages.

Categorizing and tagging

First, let’s talk about what’s possible with two of the commonly used WooCommerce organizational tools: categories and tags.

Each product in WooCommerce can have categories and tags. Categories tend to be hierarchical, while tags have a flat structure. It’s a best practice to have one category and several tags.

Here’s an example of a product’s category, and you can add tags right below it:

Figure 3.1 – The built-in product categories and product tags

You might notice that you can add multiple categories to a product, but that doesn’t mean you should. I recommend you only use one category for each product.

WooCommerce with the Storefront theme and a few other themes has a really nice breadcrumb feature that shows users where they are in the catalog. Breadcrumbs, which we’ll talk about later in this chapter, don’t work well with multiple categories.

You can...

Optimizing product archive pages

Now that we have intuitive categories our users can browse, let’s optimize these category pages. We can make them much easier to read both for the user and also for search engines. We’re going to do the following:

• Write descriptions for the product category pages
• Clean and simplify our URLs so they’re easy to understand at a glance

When we’re done with this section, users will understand the product archive pages (category pages) and since search engines better understand your store, you should also get more inbound traffic.

Writing descriptions for product categories

One of the most important things you should do is add a description to your product category pages. To do that, follow these steps:

1. You can do this in WooCommerce in the backend through Products | Categories | {{pick a category}}:

Figure 3.4– You can customize several details on this page...

Adding product filters to your Shop page

Since we’re organizing the products in your store, if you haven’t installed Storefront, now is a good time to do so. Most themes will work with WooCommerce, but Storefront is designed to work with WooCommerce, and it’s made by WooCommerce so it’s a great place to get started. Whatever theme you choose, you’ll want to make sure you can configure a sidebar so we can add widgets to help our users filter products.

You can do this by going to Appearance | Themes | Storefront | Activate.

Now we want to go to the WordPress customizer. You can get to the customizer through Appearance | Customize in your admin. You should see something like this:

Figure 3.9– The WordPress customizer

Let’s customize our Shop page. To do that, follow the steps given here:

1. Click on Shop from within the customizer, which will load the following page:

...

Understanding product blocks

With WordPress 5.0 (Gutenberg) came blocks, and the WooCommerce team immediately started creating custom blocks for products (https://woocommerce.com/document/woocommerce-blocks/).

To see how powerful these blocks are let’s create a new homepage. Go to the admin, then go to Pages | Add New.

Once the new page loads, it’s time to configure the homepage.

Add a title for the homepage. I like to keep it simple and obvious by calling it homepage. Now let’s add a few blocks to this page.

The simplest solution is to add the All Products block. But for my store, I want to highlight the product I’m best known for. So I’m going to use the Single Product block. Then select a specific product from the dropdown. I’ll choose Fry Thief.

Figure 3.17 – The Single Product block

I also want to show off some of our swag beneath the main product. Let’s add the Products by Category...

Summary

We looked at all of the ways to organize your products so users can easily find them and search engines can send you more traffic. From very basic techniques such as adding categories and tags to more advanced techniques such as adding product filters and using product blocks in the Gutenberg editor, you have a variety of tools to help users find the right product for them.

Organizing products is a bit of art and science. It’s worth doing some research before you launch your store to organize your products in a way that will make sense for shoppers. Once you start getting real-life users, you can analyze their browsing and search habits to see whether you can make improvements.

Now, we can learn how to optimize the rest of our site for search engines (a process called SEO) and learn how to attract traffic in the next chapter.