Adding product tables to the WooCommerce shop page, category archives & search results
Our WooCommerce Product Table plugin lists your products in a table view. Most people create tables by adding a shortcode to a page in WordPress. However, you can also add it to the WooCommerce shop page template in your theme so that the product table layout replaces the usual store layout provided by WooCommerce.
This page will tell you how to 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
To do this, you need to overwrite the relevant WooCommerce template file in your theme. Keep reading for full instructions, and to download a sample WooCommerce shop page template file that you can use.
These instructions will add the product table layout to all of the above pages. 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 this will require custom coding that is outside the scope of under our plugin support.
Please note that this code 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.
How to add product tables to the shop page, categories, taxonomies and product search results
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.
Using filter widgets on the shop page, categories and taxonomy archives
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).
Stuck? Use our $99 setup service
The instructions in this article 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.
Can I use a different shortcode for each category?
The above instructions assume that you’ll have the same shortcode for each category. To dynamically use different shortcodes depending on the current category, 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 sample template provided above will add the product table layout globally throughout your store. 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 use the product table layout on product search results from other plugins such as Relevannsi and WooCommerce Product Search?
For a more advanced search, some people like to use WooCommerce Product Table with a third party search plugin such as Relevannsi or the official WooCommerce Product Search or Product Finder plugins which have extra features such as advanced search filters and instant results. You can do this by customizing the search results template for the search plugin to include the product table layout.
The sample template above is a good starting point to help you with this. However, this is an advanced task and is not covered by our plugin support. If you don’t know how to do it then you will kneed 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.)