Custom WooCommerce category page

How to create a custom WooCommerce category page

Rafay

If you sell lots of different types of products, you’ve probably sorted them into categories. By default, WooCommerce displays products in a grid-style layout on the category page. While this works fine for some online stores, others need to create a custom WooCommerce category page.

A custom WooCommerce category is perfect for store owners that sell less visual products such as hardware goods, tech products, pet food, or flowers. This way, they can display additional product details directly on the category page.

If you have a large product catalog, chances are that customers spend a lot of their time browsing through your WooCommerce category pages. For this reason, it’s important that you optimize them to help customers make informed purchasing decisions.

With this in mind, in this tutorial, we’ll show you step-by-step how you can create a custom WooCommerce category page. Before we begin, let’s take a closer look at what the category page is and why you might want to create a custom WooCommerce category page in the first place.

What is the WooCommerce category page?

WooCommerce lets users list products from a specific category in a grid-style layout. It lets you display a big product image with the name, price, and different purchasing options for each product. Here’s what the default WooCommerce category page looks like on the front-end:

WooCommerce default category page

Although this might work for selling image-centric products, it isn’t suitable for all types of products. This means that, depending on the type of store you run and the products you sell, the default WooCommerce category page may not be the ideal option for you. 

Let’s take a look at some different types of products that aren’t suitable for the default WooCommerce category page:

Products that require more detailed information

If your WooCommerce store sells products that require more detailed information to be displayed with them, using the default WooCommerce category page layout might not offer the best layout.

For instance, if your store sells different kinds of flowers, you might want to display additional information such as the family of the plant or its life span after it’s plucked and delivered to the customer. This additional information can help your customers make the right decision when buying from you.

Products with lots of variation options

If you sell products that have lots of variations, you would want customers to be able to select multiple product variations without having to refresh the page over and over again. Ideally, you want customers to browse through and add product variations to their cart from a single WooCommerce category page.

For instance, if your online store sells sports and gym equipment such as dumbbells, jump ropes, and yoga mats, listing all your product variations in a product table can help customers find and buy products quicker. 

Less visual products

If your online store sells products that are less visual, showcasing them in a grid-style layout with big images won’t help customers make a purchase decision. Oftentimes, products such as nuts and bolts and wrenches don’t require big images. Instead, you should list less visual products in a clean and organized manner with product details. This way, customers can make an informed purchasing decision, faster.

Related Tutorial
If you’d like to know how to create a custom shop page in WooCommerce, check out this tutorial

WooCommerce shop page

Why you might want to create a custom WooCommerce category page 

Customers visiting your store will spend a significant amount of time browsing products on your WooCommerce category pages. This is why creating the best shopping experience possible for customers is important. The easiest way of doing this is by creating a custom WooCommerce category page for your online store. 

By creating a custom WooCommerce category page, you have more control over the look and feel of your WooCommerce store. This can help you represent your brand better and attract new visitors to your online store. You also improve product visibility within a category by displaying products neatly and in an organized way on a custom WooCommerce category page. 

If you sell products with variations, displaying them on a custom WooCommerce category page can help boost product variation visibility. For instance, if you sell hardware goods such as screws, displaying the different product variations such as ¼ inch screws, ⅛ inch screws, and ½ inch screws on a custom WooCommerce category page will make it easy for customers to add multiple product variations to their cart in just a few clicks.

Adding a custom WooCommerce category page to your store makes the shopping experience intuitive for customers. This can increase your average order value and help you make more sales. Additionally, with customers having no problems adding multiple products and product variations to the cart, you’ll be able to speed up the purchasing process on your WooCommerce store.

Overview of the WooCommerce Product Table Ultimate

The WooCommerce Product Table Ultimate plugin lets users create custom WooCommerce category pages for their online store. You can display different product categories, products, and product variations on the category page in a table-style layout. Customers can select products by selecting the checkbox next to the product and add them all at once to their cart with just one click.

WooCommerce Product Table Ultimate

The quickest and easiest way for your customers to find and purchase your products

Find Out More

This makes it easier for customers to buy multiple products. They can quickly find exactly what they’re looking for and add them to their shopping cart. By making the whole shopping experience simple and intuitive, you not only boost sales but also improve customer retention. If a customer has a good experience purchasing from your store once, there’s a chance they’ll come back to your store to buy again. 

Additionally, with the WooCommerce Product Table Ultimate plugin, you don’t have to use CSS or edit theme files to customize your custom WooCommerce category page. This means that you can create and customize a custom WooCommerce category page using the plugin even if you’re not programming literate. You can add the custom WooCommerce category page to your online store using a shortcode or a Gutenberg block. 

Creating a custom WooCommerce category page

Here, we’ll show you how to use the WooCommerce Product Table Ultimate plugin to create a custom WooCommerce category page. 

For this tutorial, we’ll assume you already have a WordPress site set up with the WooCommerce plugin installed and activated. We’ll also assume you have some products added to your WooCommerce store sorted into categories. 

Step #1. Install and activate the WooCommerce Product Table Ultimate plugin

Start by getting the WooCommerce Product Table Ultimate plugin and installing it on your WordPress site. Then, navigate to WooCommerce → Settings → Product Table Ultimate → License and enter the license key in the ‘License Key’ box. 

Click the ‘Save changes’ button to continue. 

Step #2. Create your custom WooCommerce category page 

The next step is to create a new custom WooCommerce category page. We’ll customize it later using the WooCommerce Product Table Ultimate plugin. 

Go to Pages → Add New to create a new page and give the category page a new title. Click on the ‘Add block’ button to add a Gutenberg block to your newly created custom WooCommerce category page.

Search for the ‘Product Table Ultimate’ block and add it to your page to showcase products and product variations in a simple, yet organized way on your custom WooCommerce category page. Once you’re done with the changes, click the ‘Publish’ button to continue. 

Custom WooCommerce category page

Now that we have a custom WooCommerce category page, we can start customizing the different layout settings available in the WooCommerce Product Table Ultimate plugin. To do this, navigate to WooCommerce → Settings → Product Table → Layout to configure the different settings.

Layout settings

Sortable columns

You can set specific sortable columns to be displayed in the table. Just enter the column in the text field. This will add a column heading to the product table on the front-end of your store. Customers can click the column headings and sort the rows.

This allows customers to sort columns in either alphabetical order or reverse alphabetical order. It can also be used as a way to sort products by price, either low to high or high to low. This way, customers can find the product they’re looking for quickly.

Filterable columns

The different columns in the product table can also be filtered. This means that you can let customers select a term and only view items in the table that match that term. You can filter by Categories, Tags, and Attributes.

For example, if you sell shoes on your WooCommerce store and have categories for running shoes, casual shoes, and snowshoes, customers can just click the Running shoes category to view only running shoes.

Filter methods

If you’ve added filterable columns on your custom WooCommerce category page, you can choose which methods customers can use to filter terms. The available options include:

  • Clickable terms. These terms will be hyperlinked for users to simply click on the terms to activate the filter. The terms are listed above the table.
  • Dropdown fields. Users can select terms from dropdown fields either above or below the product table on your custom WooCommerce category page.

Select filters locations

This option lets you select where to display the dropdown fields if you decide to use dropdown fields as the filter method. You can choose above the table, below the table, or both.

After you’re done with the configuration, click the ‘Save changes’ button to continue. 

Step #3. Add your custom category page to WooCommerce 

The final step is to add your custom category page to your online store. You can do this by going to WooCommerce → Settings → Product Table.

WooCommerce Product Table Ultimate settings

Set the ‘Override pages’ option to ‘Category pages’. This will override the default category page. Once you’re done, click the ‘Save changes’ button to continue.

In addition to this, you can also add your custom WooCommerce category page to the main menu. This makes it easier for customers to find the category page from your homepage. To do this, head over to Appearance → Menus and add the custom category page to your navigation menu.

It might look something like this on the front-end:

Preview

Conclusion

By creating a custom WooCommerce category page, you not only improve product visibility and product variation visibility but also make it intuitive for customers to buy from your store. Users will be able to add multiple products to their cart from specific category pages in just a few clicks. 

Instead of listing your products in the default category page layout, you can use a product table to display all of the products in an organized way. This enables customers to find what they’re looking for faster. Additionally, this can help you improve the user experience on your WooCommerce store and help boost sales.

Ready to create a custom WooCommerce category page? Get the WooCommerce Product Table Ultimate plugin today!

WooCommerce Product Table Ultimate

The quickest and easiest way for your customers to find and purchase your products

Find Out More

Leave a Reply

Your email address will not be published. All fields are required.