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 with the WooCommerce Product Table plugin.
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 centrally enable the product table layout on all product category pages. (Ideal if you want to customize all your product category pages.)
- Alternatively, you can use a shortcode to manually create your own WooCommerce category pages. (For example, if you want to use the table to list products from specific categories only.)
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.
Once you’ve configured the product’s settings, you have two ways to create your actual WooCommerce categories. We’ll look at these next.
2a. Enable product tables on all category pages
WooCommerce Product Table comes with an option to automatically add the product table layout to all category pages. This is the easiest option, and just takes a second to set up.
On the plugin settings page, simply tick the ‘Product category archives’ box:
This will globally enable the table layout for all categories, replacing the default layout that came with your theme.
2b. Use a shortcode to create your own WooCommerce category page design
You can also use a shortcode to list WooCommerce products by category. This option is perfect if you don’t want to use the product table layout on ALL your categories.
Simply add the plugin’s shortcode to a regular WordPress page, and specify which categories you want to list products from. Repeat the process as many times as you like – once for each category.
With this method, you’re essentially creating a new WooCommerce product category page for each product category that you want to display, rather than redesigning the WooCommerce category page globally.
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.
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 archive-product.php file in your theme or child theme. 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.