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.
WooCommerce is one of the most popular e-commerce platforms in the world, powering over 30% of all online stores. With its user-friendly interface and easy-to-use features, WooCommerce makes it easy for anyone to set up an online store and start selling products or services.
One of the key components of a successful online store is a well-designed category page. Category pages are important for organizing and displaying products in a way that makes sense to customers. They allow customers to easily navigate your store, find the products they are looking for, and make informed purchasing decisions.
A category page in WooCommerce displays a list of products that belong to a specific category, such as "Shirts" or "Shoes." By default, WooCommerce provides a basic category page layout that includes a product grid, product filters, and paging. However, these default category pages can be limiting and may not provide the best user experience for your customers.
To truly stand out and create a unique online store experience, it's important to customize your WooCommerce category pages. By customizing your category pages, you can create a visually stunning and user-friendly shopping experience that reflects your brand and helps increase sales.
Here's an example of what you'll build in this post:
In the following sections, we'll explore the importance of customizing category pages in WooCommerce and provide a step-by-step tutorial on how to create a custom WooCommerce category page design with the WooCommerce Product Table plugin.
The benefits of using a table layout for your category pages
While the exact design of your e-commerce 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 has 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 that 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 stores, it's especially helpful for:
- Wholesale stores
- Digital files (videos, audio files, ebooks, etc.)
- Product catalogs
- ...lots more!
Creating a custom category page in WooCommerce
Here's a brief summary of the steps involved in creating a WooCommerce custom category page in WooCommerce:
- Understand your brand and target audience: Before you start designing your category page, it's important to have a clear understanding of your brand and target audience. This will help you make design decisions that align with your brand's personality and appeal to your target customers.
- Customize your category page template: To save you from having to modify templates using PHP, we’ll do this using the WooCommerce Product Table plugin. This replaces the basic layout on your category archive pages with an optimized order form view.
- Test and refine: Finally, test your new category page design to ensure it is user-friendly and functions as expected. Make any necessary adjustments and continue to refine your design over time to optimize the user experience and increase conversions.
Understanding WooCommerce Category Pages
Before diving into the process of creating a custom WooCommerce category page, it’s important to understand what category pages are and their purpose. Simply put, category pages are used to group similar products together on an online store. For example, if you sell clothing, you might have categories for men’s clothing, women’s clothing, and children’s clothing. Each category page would then display products related to that category.
How do category pages work in WooCommerce?
WooCommerce comes with built-in functionality to categorize your products. Essentially, category pages in WooCommerce are dynamically generated web pages that list products assigned to a specific category. These pages allow shoppers to browse through products of their interest and help you showcase your offerings in a more organized way.
However, by default, WooCommerce uses a generic template for all category pages, which can be limiting for businesses that want to showcase their products in a unique and more visually appealing manner. This is where customizing the product category page design can come in handy. With the right tweaks, you can make your category pages stand out and better reflect your brand and product offerings.
A well-designed category page can help improve the discoverability of your products and make it easier for shoppers to navigate through your site, ultimately leading to more sales.
The importance of category pages for SEO and user experience
Effective category pages are essential for organizing products, improving user experience, and boosting SEO rankings. Properly categorizing your products and optimizing your category pages can help your online store stand out in a crowded e-commerce market.
Not only do custom pages improve navigation, but they also play an important role in establishing a strong brand identity. By incorporating your brand's colors, typography, and product images, you can create a consistent look and feel throughout your store that helps build trust and credibility with your customers.
In addition to improving user experience, well-optimized category pages can also boost your store’s search engine rankings. Properly categorizing your products and optimizing your page content can help search engines better understand your site's structure and content, making it easier for them to remember your site. This can result in higher visibility and more traffic to your store.
How to create a custom WooCommerce category page design with WooCommerce Product Table
Another benefit of using a table layout for your WooCommerce product 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. It transforms your category pages into quick one-page order forms. That way, customers can quickly select multiple products, quantities, and variations, and add them to their cart in a single click.
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 create a new page listing 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. You can also do all this in the plugin setup wizard, which opens automatically when you first install it.
It's worth reading through all the available settings and choosing the ones that fit your 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, buy
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 three 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.
- Alternatively, you can use the WooCommerce Product Filters plugin to power your filters. This is the most advanced filtering option for WooCommerce category pages.
Depending on which method you choose for adding filters to your custom WooCommerce category page, follow the instructions below:
Using WooCommerce Product Table's built-in filters (methods 1 and 2)
To add filter dropdowns above the product table, 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 WooCommerce Product Table 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:
You can use both types of filtering together. Here's an example of what this might look like:
Using the WooCommerce Product Filters plugin (Method 3)
The Product Filters plugin provides the most sophisticated way to add WooCommerce filter by category to your shop page and category pages. You can add filters for any type of product data - sub-categories, tags, attributes, variations, colors, custom taxonomies, price, rating, etc. And even better, you can choose from a range of style options for each filter.
To use WooCommerce Product Filters on your custom category pages, follow these steps:
- Install WooCommerce Product Filters.
- In the setup wizard, select the filter group that you want to display on the WooCommerce category page. The plugin creates a recommended group for you, so you can just use that.
- Next, go to Products → Filters and add filters to the filter group which you selected in the setup wizard.
Now, your custom WooCommerce category pages will show the advanced filters. Neat!
How to create a custom WooCommerce category page design with code
So far, we’ve learned how to use the WooCommerce Product Table plugin to create customized WooCommerce category pages. That’s a great option because it’s a no-code solution. However, if you have development experience then you can also use code to create your own custom category page.
Before you start making any changes to your category page, it’s important to plan out the layout and structure of the page. Consider the elements that you want to include on your page, such as product images, descriptions, and pricing information. Think about the order in which you want these elements to appear on the page, and how you want them to be styled.
Once you have a basic layout in mind, you can start adding custom PHP, CSS, and HTML to your WooCommerce product category page. This can be done by modifying the existing WooCommerce template files or by creating a custom WooCommerce category page template file from scratch. You can use CSS to change the look and feel of your WooCommerce category page, while HTML can be used to add new elements to the page.
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 WooCommerce 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.
Testing your custom category page on different devices and browsers
After designing and customizing your WooCommerce product category page, it's important to test it on different devices and browsers to ensure that it looks and functions properly. Here are some steps to follow for testing your custom WooCommerce category page:
- Test on different devices: Your WooCommerce category page should be tested on various devices such as desktops, laptops, tablets, and mobile devices. This will help you ensure that the layout and design are responsive and adaptable to different screen sizes.
- Test on different browsers: Your WooCommerce category page should be tested on different browsers such as Chrome, Firefox, Safari, and Internet Explorer. This will help you ensure that your page looks and functions consistently across different browsers.
- Check for errors: Use a tool like Google Chrome's Developer Tools or Mozilla Firefox's Firebug to check for any errors or warnings on your page. Fix any issues that are identified during testing.
- Test page speed: Use a tool like Google PageSpeed Insights to test the speed of your page. A slow-loading page can negatively affect user experience and SEO rankings.
- User testing: Ask a few people to test your custom WooCommerce category page and provide feedback on the design and functionality. This will help you identify any issues that you may have missed during development.
If you’re still getting problems, then it might be better to use a plugin like WooCommerce Product Table which comes with a WooCommerce edit category page feature. That way, you can be sure that your custom WooCommerce category page is fully tested and works perfectly.
Create your custom WooCommerce category page design today!
By using the WooCommerce Product Table plugin, you can create a custom WooCommerce product category page design that offers a more user-friendly way to display your products. This table-based layout allows you to showcase more products and provide additional details about each one. Moreover, you can incorporate search and filter options to help your customers easily find what they're looking for.
This custom WooCommerce product category page design can improve the shopping experience for your customers. As well as ultimately increase sales and revenue for your online store. Unlike directly editing your archive WooCommerce category page template file, setting up the WooCommerce Product Table plugin is easy and doesn't require any specialized technical knowledge.
By making use of this plugin, you can efficiently and effectively connect your customers with the products they want. As well as displaying your products in an organized and visually appealing way.
Get started today and create a more effective way for shoppers to browse product categories at your WooCommerce store.
I tried to do the steps as suggested but they don't work Block->Shortcode->[product_table category="t-shirts"] publish->preview and didn't work. I checked my products and the categories and are labeled properly :(
Hi, Nadja. I'm sorry to hear you're having difficulty with displaying products from a particular category in a product table on your site. So that we can locate your Barn2 Account to assist you best and for full product support, please could you submit a request via our dedicated Support Center. Thanks!
Nice article. Is it difficult to code a product category page like those offered in plugins? how much coding is involved? on the other hand, what plugin would you recommend that can customize the product category page?
Hi, Eric. Thanks for your comment. The ease or difficulty as well as the scope of manually creating product category pages via custom coding or programmatically will of course depend on your (or your developer's) familiarity with PHP, WordPress, and WooCommerce.
As described in our article, you can customize the product category pages on your site to display the products more efficiently in the product table format/layout without any coding by using WooCommerce Product Table to Enable product tables on all category pages. This is implemented via the Table display (Shop Integration) options in the Product Table settings page.
Let me know if you have any more questions. You can also enquire in more detail via our dedicated Support Center. Thanks!
Nice article, but you suggest to non-developers to reach out to Codeable. It would be nice to actually add the code for developers who still need this information. This reference to Codeable without adding the code for developers makes this entire article seem like an advertisement for Codeable.
Hi, Bruce. We suggest to non-developers to opt for the simpler table layout method (See: How to create a custom WooCommerce category page design with WooCommerce Product Table).
Our recommending Codeable would be for those who instead wish to Customize their category pages via custom code, but who might need additional assistance for this developer-level task that exceeds our standard support. I hope you'll understand that as much as we would like to provide the custom code snippets to do this, the exact code can vary depending on the theme in use and the type of product table that will be displayed. Thanks.