How to Create a Custom WooCommerce Category Page Design
Are you looking for an alternative to the default WooCommerce category page design in your WordPress theme? Creating a custom design for your WooCommerce product categories lets you offer an optimized shopping experience, which can have a positive effect on your store’s bottom line.
With the right plugin, creating your own custom WooCommerce category page layout doesn’t have to be difficult, either. That’s what we’re going to show you in this post. We’ll cover how to create a custom table-based layout for your WooCommerce categories. This puts you in control over exactly what information displays and how shoppers will interact with your products.
Here’s an example of what you’ll build in this post:
We’ll start with some of the benefits of this table approach. Then, we’ll get into a step-by-step guide on how to do it in your own WooCommerce store.
The benefits of using a table layout for your category pages
While the exact design of your eCommerce store’s category page layout depends on your WordPress theme, most themes’ category page designs look something like this:
That layout is fine for some situations, but it limits the number of products that you can display. It also restricts how much information you can provide about each product (though adding product quick view buttons is one way to mitigate this).
Woo Multistore have written about the importance of designing the WooCommerce category page in a way that boosts conversions. A table layout helps you overcome the shortcomings by displaying more products and information in a compact layout that ends up using less space, as well as adding extra navigation features such as searching and filtering.
That means you can get more of your products/product details in front of shoppers’ eyeballs, which ensures they can see your whole catalog and ups your chance of them making a purchase.
You’ll also see SEO benefits with search engines as you can display more custom content on a fully custom page (or landing pages too). This lets you show products which are relevant, and then add contextual text too. All of this should be rewarded with higher rankings.
While this type of layout can benefit all types of eCommerce store, it’s especially helpful for:
- Wholesale stores
- Digital files (videos, audio files, ebooks, etc.)
- Product catalogs
- …lots more!
How to create a custom WooCommerce category page design with WooCommerce Product Table
Another benefit of using a table layout for your WooCommerce category page design is that you can set everything up without needing any special technical knowledge.
To do this, you’ll use the WooCommerce Product Table plugin. This plugin lists your WooCommerce products in a flexible table layout that you control, along with the ability to add filters, search boxes, pagination, and more.
You can also use the plugin to only display products from specific categories or subcategories. WooCommerce Product Table provides two ways to do this:
- You can use a shortcode to manually create your own WooCommerce category pages.
- Alternatively, you can directly edit your theme’s category archive template file to automatically use product tables on all category pages.
Below, we’ll show you how to set up the WooCommerce Product Table to achieve both options.
1. Configure WooCommerce Product Table
Once you’ve installed and activated the WooCommerce Product Table plugin, you’ll want to configure its default settings.
This lets you control what information is displayed in your product table and how everything works, like whether or not to display certain product attributes or how the add to cart functionality will work.
To get started, go to WooCommerce → Settings → Products → Product tables to access the category plugin’s settings.
It’s worth perusing all the available settings and choosing the ones that fit your unique situation. However, we’re just going to cover the basics that are essential to design your WooCommerce category page.
First, find the Columns setting under the Table content section. This is where you’ll control what information appears in your table. In addition to displaying core product information, you can also display product attributes, custom fields, and more.
You can find a full list of column options here, but this configuration is a good basic version that will work for most stores:
image, name, description, price, add-to-cart
Further down, you’ll find the Add to cart column section, which lets you control the add to cart buttons.
To attract bulk purchases, you can add checkboxes that allow shoppers to bulk add multiple products to their carts. Or, you can also just add a separate add to cart button to each product (or both!):
Once you’re finished, make sure to save your changes.
2a. Use a shortcode to create your own WooCommerce category page design
Once you’ve configured the product’s settings, you have two ways to create your actual WooCommerce categories.
The first is to add the plugin’s shortcode to a regular WordPress page.
With this method, you’re essentially creating a new WooCommerce product category page for each product category that you want to display, rather than replacing the existing WooCommerce category page template file.
You can either continue to use your existing category pages in conjunction with your new table layout. Or, you can just replace the links to each existing product category page with your new table-powered category pages. (Tip: If you’re no longer using the built-in category pages, redirect them to the new ones where you’re using product tables.)
To get started, go to Pages → Add New to create a basic WordPress page. Then, add the
[product_table] shortcode to the page. You can also add a category title using the regular title field.
By default, the shortcode will display all your WooCommerce products.
However, you can use the category shortcode parameter to filter out products from specific categories and/or subcategories. You can also combine multiple categories, or create conditions like a product having to be in multiple categories or subcategories to be displayed.
For example, to filter out products from the “chair” category, you could use the following shortcode:
If you want to add a category image or category name, you can also do that above the shortcode using the regular WordPress editor.
Once you publish the page, you should see your new WooCommerce category page design:
To create pages for additional WooCommerce categories, repeat the process for each product category or subcategory that you want to display.
2b. Replace your theme’s existing category template
As an alternative to manually creating regular WordPress pages and adding the shortcode, you can also edit your theme’s template file. This will automatically replace your theme’s existing category archive page design with the new table layout. You’re effectively creating a custom WooCommerce category page template.
This method is a little more advanced, but it lets you completely change how your WooCommerce store handles product category pages. Additionally, it will also change your WooCommerce shop page and other archive pages such as tag archives.
To get started, you’ll need to connect to your site via FTP and create a new “woocommerce” folder in your WordPress theme or child theme folder. For example,
/wp-content/themes/<your theme>/woocommerce/. This is what will house your new woocommerce_template part.
There, you’ll want to add a new archive-product.php file to define your WooCommerce category page template. You can download a pre-made template file from the plugin knowledge base.
Once you upload that file to the folder that you created, you should see your new table layout on the main WooCommerce shop page, all your category pages, and any other archive pages at your WooCommerce store.
If you edit the archive-product.php file, you can also change the WooCommerce Product Table plugin’s shortcode parameters. You can use this to customize WooCommerce category page designs uniformly across your site.
For a deeper look at this application, you can check out our full tutorial on this subject here. Or, we’ve partnered with Codeable so that you can hire a Codeable WordPress expert to set it up for just $99.
3. Make your WooCommerce categories more searchable with filters
If you want to add more search and filter tools to your WooCommerce categories, you have two options:
- You can add search, sort, and filter options via the WooCommerce Product Table settings. These will appear above or below your product table.
- WooCommerce Product Table includes widgets that you can use to add filters to your sidebar.
You can choose your preferred method, or it’s also totally fine to use both approaches at the same time. That will let your shoppers choose their preferred method.
To add search, sort, and filter options directly to the table layout, go to WooCommerce → Settings → Products → Product tables. Then, scroll down to the Table controls section and configure the options according to your preferences:
You can learn more in this help article.
To use the filter widgets, you can go to Appearance → Widgets. There, you’ll find four new widgets prefixed by “Product Table:”. You can add all the widgets, or only choose the specific filters that you’d like to include:
Here’s an example of what both sets of filters might look like:
How to create a custom WooCommerce category page design with code
If you know your way around PHP, HTML, and CSS, it’s also possible to create a custom WooCommerce category page design using code, without a WooCommerce plugin.
You’ll want to work with the same archive-product.php file mentioned above, except you’ll need to manually make your changes, rather than downloading a pre-configured file like the table layout method allows. You can also use this same approach to edit your single product pages via the single-product file or other parts of your storefront.
Unfortunately, because you’ll need to directly edit the code in your theme’s template files to make each change, this method isn’t accessible to non-developers. We recommend reaching out to Codeable if you need some help or sticking with the simpler table layout method above.
Create your custom WooCommerce category page design today!
Creating a custom WooCommerce category page design lets you utilize a more shopper-friendly way to display your products.
By using a table-based category page layout, you’re able to display more products, along with more details about each product.
You can also add plenty of helpful search and filter options to help your shoppers find products.
By more effectively connecting shoppers with the products that they’re interested in, you can sell more products and increase your store’s revenue.
To use a table design for your WooCommerce categories, you can use the WooCommerce Product Table plugin. Setup is easy, and you won’t need any special technical knowledge to get up and running like you would if you wanted to directly edit your archive template file.
Get started today and create a more effective way for shoppers to browse product categories at your WooCommerce store.