Adding product tables to the WooCommerce shop page, category archives & search results
Our WooCommerce Product Table plugin lists your products in a table view. You can create product tables either by adding a shortcode to a page, or by enabling the product table layout on your main shop page and/or product category archives and product search results. This article provides more information about adding product tables to the shop, category and search results pages.
The simple method
The easiest way to automatically enable product tables throughout your store is to use the options on the plugin settings page:
- Go to WooCommerce → Settings → Products → Product tables.
- Tick one or both of the boxes in the ‘Table display’ section:
- Shop page – this enables the product table layout on the main shop page, which you selected on WooCommerce → Settings → Products.
- Product category archives – this enables the product table layout on all your product category pages, and also the product search results page. (Note: This is the product-specific search provided by WooCommerce. It is not possible to use product tables on the global WordPress search – if you want to do that, then check out our generic table plugin Posts Table Pro.)
When you enable these options, the product table layout will be used instead of the default layout that comes with your theme.
If your shop and category pages normally have a left or right sidebar, then the sidebar will still appear when you switch to the product table layout. Similarly, if the shop is normally full-width then it will remain full-width when you activate the product table layout.
Many WordPress themes have options allowing you to choose whether or not your shop and category pages have a sidebar. You can use these to show/hide/remove the sidebar. If the theme doesn’t have this option then you will need to add some custom code.
We have tested the above options with a wide range of themes, including the most popular themes such as Astra, Atelier, Avada, Bridge, Enfold, Flatsome, Genesis Framework, JupiterX, OceanWP, Porto, Shapely, Storefront, Total, Uncode, Woodmart, and all of the default WordPress themes such as TwentyTwenty. Don’t worry if your theme isn’t listed here.
You may find that these options don’t work as expected in a small number of themes. This may happen in the unlikely event that your theme has its own modified version of the archive-product.php template file with theme-specific HTML formatting. If this happens in your theme, then it will not be possible to use the options shown above. Instead, you will need to use one of these methods:
- Ask a developer to customize the already-custom archive-product.php template in your theme.
- Use the ‘Developer method’ (described below) to override the custom archive-product.php template in your theme with the sample template that we provide.
Please note that this method is aimed at developers and if you don’t know how to use it then you should ask your developer. If you don’t have one, we recommend using our setup service.
If you need more flexibility, or if the options on the plugin settings page don’t work with your theme, then you can add the product table shortcode to the archive-product.php template, overwriting the relevant WooCommerce template file in your theme.
This will replace the usual store layout provided by WooCommerce. You can either use the sample archive-product.php template provided below, or create your own.
About the sample template
Our sample archive-product.php template will add the product table layout to all of the following pages in your store:
- The main shop page
- The product category and product tag archive pages
- Any custom product taxonomy archives
- The product search results page
This is because the WooCommerce shop page template (archive-product.php) is used for all these layouts, and there isn’t a separate WooCommerce category page template file. If you want to use product tables on some templates but not others (e.g. the search results page but not the main shop page), then you need to add some additional code.
1. First create a folder called “woocommerce” in your theme or child theme. If your theme already has this folder, you can skip this step. Upload the folder to your server in this location:
2. Next, download the our sample archive-product.php template (see table below), and upload it to the /woocommerce/ folder you just created. It should be in this location:
Download the archive-product.php file based on your current setup:
|I’m using the latest version of WooCommerce (3.3 or later)||DOWNLOAD|
|I’m using WooCommerce 3.2 or earlier||DOWNLOAD|
|I’m using the Flatsome theme||DOWNLOAD|
- If you need more information on WooCommerce templates, please refer to the WooCommerce documentation.
- The template is also included in the plugin folder under the /templates/ directory.
You should now see product tables displayed on your main WooCommerce shop page, category pages and elsewhere in your store.
If you don’t see a product table, check the following:
- Is the correct theme active? If you have uploaded your template to the child theme (e.g. flatsome-child) but the parent theme is active, then your template won’t be picked up. In this case you would need to activate the child theme.
- Does your theme have a file called ‘woocommerce.php’? It will be in the theme’s root folder, i.e. /wp-content/themes/<your theme>/woocommerce.php. If so, this file will override the archive-product.php template (and any other template), so it won’t work. To fix this you will need to delete or rename the woocommerce.php file.
- Do you have a caching plugin? Sometimes this can prevent the new template from being picked up. Try disabling the caching plugin temporarily or clearing the cache.
How to configure the product table
If you inspect the sample template file, you’ll see that line 60 sets the product table shortcode:
$shortcode = '[product_table columns="image,name,price,add-to-cart"]';
You can add additional shortcode options (and change the
columns option) as you would with the shortcode on a regular page.
For example, if you wanted to add the
show_quantity options, you would change this line to:
$shortcode = '[product_table columns="image,name,price,add-to-cart" sort_by="price" show_quantity="true"]';
Please see this article for the full list of shortcode options. Alternatively, you can set the options globally on the plugin settings page.
Create your own
If you need something that isn’t provided in our sample template, then you will need to customize it as required. We recommend using the sample template as a starting point.
Stuck? Use our $99 setup service
The instructions for the Developer Method are quite technical and involve editing template files in your theme. If you’re not confident in doing it yourself, then one of Codeable’s WordPress experts will be happy to do it for you.
Simply click the ‘Get Started’ link above and enter your information. The price and project description have been pre-filled for you. You should read through the description and add any further information about how you’d like your product tables to work. You can then submit the project, and a Codeable expert will contact you soon.
Warning! Using filter widgets on shop and category pages
WooCommerce Product Table comes with its own set of product filter widgets which you can add to a widgetized area such as a sidebar. These only work for product tables on normal pages and posts. They do NOT work for product tables that have been added directly to the shop page, category pages etc.
To use filter widgets on these pages, you need to use the built-in WooCommerce filter widgets instead of the dedicated product table widgets. You can find these in Appearance > Widgets. They start with ‘Filter Product by’ instead of ‘Product Table’ (see screenshot).
Can I have different product table settings for each category?
The above instructions assume that all your product tables will have the same columns, settings etc., and will simply list different products for each category. To customize the product table options for specific categories, you would need to do some extra custom coding.
This is outside the scope of our standard plugin support. If you don’t know how to do the required coding, then we recommend that you post a job on Codeable where one of their WordPress experts can quote for the work.
Can I add the product table layout to some categories but not others?
The above instructions will add the product table layout to all category pages. Some people like to use the product table on specific categories only. For example, you might be creating a WooCommerce wholesale store and want to use product tables to add a wholesale order form to your B2B categories only.
To just show the product table layout on specific categories, you would need to add some custom code to the archive-product.php template. If you want to specify which categories should have the product table layout then you will need to reference these categories in the template. This is a developer-level task and if you don’t have a developer then we recommend posting a job on Codeable.
If you are using WooCommerce Product Table with our WooCommerce Protected Categories plugin, then you might want to only use the product table layout in your protected categories – while keeping the default store layout for your public categories. To do that, please refer to the WooCommerce Protected Categories developer documentation as a starting point.
Can I list categories as well as products?
Yes, you can do this in the general WooCommerce settings. Go to Appearance → Customize → WooCommerce → Product Catalog and change the ‘Shop page display’ or ‘Category page display’ options to ‘Show categories & products’. With this option, the categories will be listed in a grid layout at the top of the page, with a product table listing the products underneath.
Please note that it is not possible to list actual categories in a table layout, because WooCommerce Product Table is only designed to list products. The only way to include categories within the product table is in the ‘category’ column, which lists the categories that each product is assigned to.
If you choose the ‘Show categories’ option then the product table layout will NOT be used because this layout lists categories rather than products.
Can I use the product table layout on product search results from other plugins such as Relevanssi?
You can use WooCommerce Product Table with third party search plugins such as Relevanssi that work by improving the native WooCommerce product search. To set it up, simply use one of the above methods to add the product table layout to your product search results.
If you are using a search plugin that provides its own search results template – instead of using the native WooCommerce product search results – then you would need to modify that template to use the table layout. Again, this is a developer-level task so if you don’t know how to do it then you will need to ask a developer to do it for you, or post a job on Codeable.
Can I use product tables on the main WordPress search results?
The above instructions will use the product table layout on the product search that comes with WooCommerce. It will not work on the WordPress search box for your whole website. This is because the sitewide search results include other types of content (such as pages and posts), and WooCommerce Product Table can only list products.
If you want to create a table view for your sitewide search results, then you can do this with our other table plugin, Posts Table Pro. This lists all types of WordPress content in a table, instead of just products. (Instructions for Posts Table Pro here.)