This is a quick guide to help you get started with an audio shop catalog. Please see the plugin tutorials for detailed instructions. And feel free to ask questions via the support form.
Important notes and gotchas
Using Excerpt element: You can provide a preview for your tracks in the table with a few simple steps. Begin by using the short description field of the product to add an audio embed. Make sure there is no extra space above or below the track. otherwise it will spoil the alignment in the table.
Now use the excerpt element in a table column. When you view the table, at first the audio player may appear to have strange width issue. This is a known problem with the wordpress audio player in certain conditions. But it can be easily fixed by giving a width to the Excerpt element eg: 300px. Now the audio player will take on the same width as the Excerpt element.
Using Custom Field element [PRO]: You may not wish to use the product excerpt to display your audio track preview. Perhaps you wish to add other information in the excerpt or you simply wish to have the flexibility to place the preview in a separate element to position it in a particular way.
In this case, place the audio embed code in a custom field of the product. You can read more about using custom fields here, and wordpress audio embed shortcode here.
and in the table use a custom field element. ‘Display custom field value as’ to ‘HTML’. This will parse the embedded audio shortcode as well.
Again, you must give a width to the custom field element to fix the wordpress audio player width.
Overall table style
In the table editor open the ‘Style’ tab. From here, you can control many general style settings for the table. These settings can be further customized per column or element. But it is best to start from the Laptop style panel to save effort of going to each element and repeating styles. Also you can control the width of the container from Laptop style > Container > Max-width.
BPM, Genre and other properties
You can display as many other properties of the tracks as you require. This may include Mood, Song length, License type, etc. In this example BPM is being set through a custom field and genre through an attribute.
Please view the tutorial series of the plugin on how to setup elements like custom field, attributes, navigation and customize the table’s response layout as per your choice.
If you get stuck anywhere or have questions on how to get specific results, please reach out via the support form.
You can replace the default product grid on the shop, search, category, attribute and tag pages with a product table. You can also assigns specific product tables to specific pages.
Time required: 2 – 5 mins Difficulty: Beginner
No coding required. Only file copy paste. Absolutely anyone can follow along this simple guide. In case you have any difficulty, contact support with your theme.
You can replace the product grid on archive pages with product tables. WooCommerce product archive pages are – shop, search, category, attribute and tag.
You can even assign different product tables to different category pages if you require some categories to have unique table layout.
Or you can simply select one default table across all archive pages. You don’t have to create new product tables. The plugin will automatically show correct products according the archive page where the table is printed.
You can also leave the default product grid on specific archive pages if you wish.
Configure ‘Archive Override’ settings
With WooCommerce Product Table PRO installed on your site, go to wp admin > product tables > settings > Archive Override. Here you can conveniently assign product tables to your product archive pages such as shop, search and category. To enable this facility you need to use the instructions in ‘Required copy / paste steps’ section below.
Note for page builder like Elementor, Divi or Beaver Builder
If you are using a theme builder plugin like Elementor PRO or Beaver Builder to create your archive pages like shop / category, then you need to follow this guide instead.
In case the following instructions do not work on your current theme, please contact support with your theme name to get a prompt solution.
Theme file copy / paste
Find your theme in the list below and follow the file copy / paste instructions. If your theme is not on the list simply use the general methods provided below this list.
These general methods work on almost all other themes. So simply try them on your theme. If you have any difficulty with this contact support for assistance with your theme.
General method 1:
In your child theme folder, create a new folder called ‘woocommerce’ and paste this archive-product.php file there. If an archive-product.php file already exists in the folder, rename it to archive-product.original.php in case you need it later.
In case this method does not work, please try method 2 below which works better for some themes.
General method 2:
Paste the archive-product.php file in your child theme root folder. Do not create any woocommerce folder, unlike the previous method. If an archive-product.php file already exists in the folder, rename it to archive-product.original.php in case you need it later.
After you are done with method 1 / method 2, we need to choose a table for your shop page. Go to WP Dashboard > Product Tables > Settings > ‘Archive Override’. Then, select a table for ‘Shop override table’ and save your settings.
Now when you open your shop / archive pages such as product category / product attribute term, the products should appear in the selected WCPT table instead of the default grid.
That’s all! 😊
— Following are theme specific instructions —
Do not copy over the archive-product.php file for flatsome! Leave it as it is.
Instead, in your flatsome-child theme create a new folder called ‘woocommerce’, then a subfolder inside it called ‘layouts’. Now paste the following 4 files in ‘woocommerce > layouts’:
In your X child theme create a new folder called ‘framework’, then a subfolder in it called ‘views’, then 4 subfolders in it with the name of each X theme stack: ‘ethos’, ‘icon’, ‘integrity’ and ‘renew’. Now paste the corresponding file in each of these subfolders:
Using this element you can give your site visitors the option to select specific variations when purchasing a variable product, right inside the table. There are 3 different ways the product variation options can be displayed and you can choose the display type you require for your table:
Dropdown with all the product variations listed as options
Radio buttons for each of the possible variations
Single radio button for each variation, manually created to be placed in separate columns
Keep in mind, you can also use the ‘Cart Form’ element which will simply display the ‘add to cart’ form that appears on the product page, inside the table.
If you have any difficulty in following along with this tutorial or are unable to achieve the final results you require, please contact me via the support form and I will assist you asap with your requirements.
1. Dropdown – how to use
Select the ‘Display type’ to be ‘Dropdown with all variations’
You can modify the variation labels with 3 facilities –
Hide/shop attributes in the name. Eg: A. (attribute names displayed) Color: Red, Size: Small B. (attribute names hidden) Red, Small
Change the separator between attribute name and terms to any valid character. Eg: A. (using : ) Color: Red, Size: Small B. (using :: ) Color :: Red, Size :: Small C. (using – ) Color – Red, Size – Small, etc
Change the separator between attributes to any valid character. Eg: A. (using /) Color: Red / Size: Small B. (using ,) Color: Red, Size: Small C. (using ||) Color: Red || Size: Small
2. Radio buttons – how to use
Note: Normally the radio buttons will attempt to display horizontally. However, you can give the column a fixed narrow width to force the options to display in a vertical column as above.
3. Single radio button – how to use
The following steps are illustrated in the screenshots below. Please follow along the highlighted sequence of steps in the screenshot.
Each ‘Select variation’ element is going to represent a single variation. Give this variation a name. For example ‘Small’. This name will be used by the table editor to represent this variation in the editor > column.
Select the attributes and terms to that are part of this variation. The plugin will look through the product variations and find the closest match to these attribute – terms.
Use the ‘Add another’ button to add more attribute – terms to the list of properties of the variation if required.
A default template for the element is auto-created. You can modify this template to include images, icons, remove the name, etc. However keep in mind the ‘Select’ element must remain somewhere in the template to ensure the variation is selectable. This select element creates the radio button.
Single radio button – usage example
In the example below the column 2 in the table is made to show a product variation with Serving size (attribute): Small (term).
A hybrid between a pure table and list view, the WooCommerce product list table is a great way to organize products in your shop. While WooCommerce does have an easy shortcode for creating simple product lists, unfortunately it significantly lacks power. Web shops need a tool to easily create and manage multiple product lists across their site with functionality such as search, sort, pagination, filter and responsive control.
This is why the WooCommerce Product Table plugin was created. Using this neat tool you can easily create you beautiful and responsive WooCommerce product list view in no time. You can list products by category, IDs, SKU, etc. And it comes replete with all the functionality for creating a great product catalog. What’s more? This is a free plugin!
At first WCPT may seem mainly table oriented. But check out the plugin demos and you will find it can be used as an excellent WooCommerce product list plugin as well.
You should create a WooCommerce product list view when:
The shop products need to be easily compared by a specific column such as movie rating, price, width, etc. Visually tracking a column to make comparisons between products is much easier than tracking the field in a grid.
You need to provide a sizeable amount of information for each product. This may be required because the products need some context which will not be possible without the additional information. In such a case product list shines as compared to grid / pure table.
You need your products to be neatly presented in a narrow space such as the sidebar or a footer column. Product lists fit perfectly in such tight spaces.
Now you don’t need to worry about creating an excellent WooCommerce product list table for your site anymore. While this is not a default WooCommerce functionality, WooCommerce product table plugin perfectly fills the gap and makes it easy to create a WooCommerce product list view. So download the free plugin and start increasing your shop sales now!
For some web shops, the product catalog looks best in a table view. A product list or grid view will simply not work as well. But the problem is that while WooCommerce does have convenient shortcodes for product grid and product list view, unfortunately there is no shortcode to make WooCommerce display products in table.
This is why the WooCommerce Product Table plugin was created. With this plugin you can easily make WooCommerce show products in tables. It is free and it does not require any coding knowledge. Now anyone can conveniently create simple or complex product table structure, with features such as search, sorting, pagination and styling.
When to make WooCommerce show products in table?
1. As the main product catalog
For some shops it makes sense to only use table view for their product catalog and drop any grid or list view from their website entirely. This is especially true when:
Product images are not the main focus in the product catalog. Such as, in the case of books, music, machine parts, software, common food items, etc
Shoppers are mainly interested in comparing products along certain columns. Such as numeric attributes, rating, etc.
2. As a supplementary product view
For other shops a product table view can be a great supplement to their existing product grid/list view. It would give their shoppers the additional facility of exploring their products in a table view as well, which makes sorting and visually comparing products along columns much easier.
If you have been stuck without a great table view for your product catalog you do not need to worry any more. Can WooCommerce display products in table on its own? No. But is there an easy solution for this? Yes! With the WooCommerce Product Table plugin you can conveniently manage multiple product tables across your website and maximize your opportunity for conversion. You should try it today!
Aim: Create a smart navigation system for your table. Learn how to add navigation elements above and to the left of the table. Also make the navigation fully responsiveness so that it is convenient to use on phones as well.
Aim: Quickly understand the basics of WooCommerce Product Table.
By the end of this tutorial you will be ready to create your own custom product tables.
Your final simple product table will look similar to the one below.
Before we begin, please ensure:
WooCommerce Product Table plugin is installed on your site, and the ‘Product Tables’ menu item appears in the dashboard menu.
WooCommerce is installed on your website, and you have basic understanding of how to use WooCommerce.
You have at least one product category setup on your site. And there are a few products in the category that you will show in this table.
For this tutorial, each of the products should have –
If any of these fields are missing (such as rating), they will not show up in our product table.
Creating a new WooCommerce Product Table
Go to Admin dashboard > Product Tables > Add New Table.
This will create a new empty product table for you and take you to its editor page.
At the top of the table editor page you will find an option to give your new table a name. Enter ‘Tutorial’ or any name of your choice.
Below it you will find the shortcode for displaying your new table.
Below that you can see the Editor, with its 4 tabs:
Query: Here you can control which products will be displayed in this table.
Columns: The table columns are setup in this tab.
Navigation: Controls navigation elements like filters, sorting, and result count.
Style: Overall and default design options for various parts of the table.
In the Query tab of the editor (which is open by default) select a product category you wish to display.
Creating table columns
Now open the ‘Columns’ tab of the editor.
The ‘Columns’ tab is divided into 3 sections:
Laptop Columns *required*
Tablet Columns *optional*
Phone Columns *optional*
Each of these 3 sections can have a unique set of table columns.
Columns that are created under the ‘Laptop Columns’ section will be displayed as the default columns for your product table across all device sizes. Tablet and Phone columns are optional and allow you to create table columns targeted specifically at those device groups.
For now we will be working with ‘Laptop Columns’.
In the ‘Laptop Columns’ section use the ‘Add a Column’ button to create 5 columns.
To delete any extra columns, just use the ‘X’ icon at the top right of the column settings.
Each column settings panel is divided into two main sections (see image below):
Heading: Here you can control the current column’s heading content and design. For example, if you wish to set the heading for Laptop Column 1 as ‘Title’, ‘Price’ or ‘Rating’, you would do it here.
Cell template: Here you can control what shows up in the column cells (other than the heading cell) and general design of the column. For example, if you wish for the first column to display product’s title, product’s price or product’s rating, you would make the required changes here.
Adding elements to columns
Let’s begin with setting up the first column of our table. For this, focus on the first column you have created under the Columns tab. It is labeled ‘Laptop Column 1’ (see image below).
Notice the demo table at the top of this tutorial page. It’s first column displays the product image. Accordingly, we will configure the Laptop Column 1 > Cell template to display product image.
To do this, add a new element to the ‘Cell Template’ using the ‘+ Add Element’ button. (see image below)
Clicking the ‘+ Add Element’ button opens the ‘Add Element’ screen. This screen lets you select which element to add to your cell template. Since we wish to display the product image in our first column, select the ‘Product Image’ element by clicking on it.
Now you will find a new screen has opened up titled ‘Edit Element: Product Image’. This is the ‘Element Editor’ screen, which lets you modify the settings for the element that you have just added. Right now, it is allowing you to edit the ‘Product Image’ element since you selected it to be added to your cell template. For now, we do not need to change any settings for this element. Simply close this screen by clicking outside the options box or the ‘X’ button at its top right.
When you exit the ‘Element Editor’ screen mentioned above, you will be returned to the ‘Columns’ tab of the table editor. You will also find that the ‘Product Image’ element has been added the ‘Cell Template’ of our first column.
You have now successfully setup the first column and it will display the product image when we view our final table later on in this tutorial.
Notice, that while setting up ‘Laptop Column 1’, we only worked on the ‘Cell template’ settings of the column. We did not work on the column’s ‘Heading’ settings. This is because in our final table, we do not want a heading for the first column. For the next column, however, we want a heading as well. Therefore, for column 2 we will work on setting up both – the column heading as well as cell template.
Lets focus on ‘Laptop Column 2’. If you have not already created Laptop Column 2, please do so now by using the ‘Add a Column’ button beneath the columns.
Refer to the demo table at the top of this tutorial page. As you can see, we want the second column to have the text ‘Title’ in its heading, and the cells should show the product titles.
Accordingly we will first setup the column’s ‘Heading’ to show the text ‘Title’, then we will configure its ‘Cell Template’ to show product titles.
Setting up Laptop Column 2 > Heading:
Focus on Laptop Column 2’s ‘Heading’ tab (see image below).
Use the ‘+ Add Element’ under the ‘Heading’ tab to add an element to the heading of this column.
The ‘Add Column Heading Element’ screen opens up. This screen lets you choose an element to add to the column heading. Since we wish to display text in the column heading, select the ‘Text’ element.
The ‘Text’ element’s settings screen will now open up allowing you to setup your new text element (see image below).
Give it the text ‘Title’. Then close this Element Editor screen with the ‘X’ button at its top right.
You will now find that the ‘Text’ element has been added to the column’s ‘Heading’. This element is labeled ‘Text: “Title”‘.
Setting up Laptop Column 2 > Cell Template:
Now focus on the Laptop Column 2’s ‘Cell Template’ tab. We want the product title to appear in the cells of this column. Therefore, in the cell template we are going to add the ‘Title’ element.
Previously we covered how to setup the Cell Template for Laptop Column 1 in order to show product images in column 1’s cells. The process for editing the cell template of Column 2’s will be very very similar.
In Laptop Column 2 > Cell template click on ‘+ Add Element’ to add an element to the cell template.
In the ‘Add Element To Cell Template’ screen that opens up, select the ‘Title’ element since we wish to display the product title in the cells of this column.
Now, the new element’s editor screen will open up. No settings need to be changed here. Simply close the screen by clicking outside of the options box or the ‘X’ button at the top right.
The Image below shows Laptop Column 2’s settings once it has been fully configured. The ‘Heading Tab’ has a ‘Text:”Title”‘ element, which will make the column 2 heading read ‘Title’. And the cell template tab has ‘Title’ element in it, which will make the product titles appear in the cells of column 2.
Setting up the remaining 4 columns:
The basic process of creating a column, giving it a text heading, and adding a simple element to the cell template should now be clear. We have covered this for column 1 and 2. If the process is not clear, please review the steps above.
Using the same, simple logic you can create headings and cell templates for the remaining 3 columns as well.
Please go ahead and try settings up the remaining 3 columns with the following configuration:
Laptop Column 3
This column is supposed to show product ratings. Accordingly, this column should have the text heading ‘Rating’ and its cells should show the product ratings in the final table.
Heading tab settings: Add a ‘Text’ element to the heading tab using the ‘+ Add Element’ button. In the ‘Text’ element’s settings enter ‘Rating’.
Cell template tab settings: Add a ‘Rating’ element using the ‘+ Add Element’ button.
Laptop Column 4
This column is supposed to show product price. Accordingly, this column should have the text heading ‘Price’ and its cells should show the product price in the final table.
Heading tab settings: Add a ‘Text’ element to the heading tab using the ‘+ Add element’ button. In the ‘Text’ element’s settings enter ‘Price’.
Cell template tab settings: Add a ‘Price’ element using the ‘+ Add element’ button.
Laptop Column 5
This column is supposed to show the buy button. And the column should have no heading.
Heading tab settings: *leave empty*
Cell template tab settings: Add a ‘Price’ element using the ‘+ Add element’ button.
Your final settings for all the columns should look like this:
Save table settings
Use the ‘Save Settings’ button below the editor to save your new settings.
Please ensure you save your work often to avoid accidentally losing table data.
Convenient keyboard shortcut for saving:
PC: Ctrl + s
MAC: Cmd + s
The keyboard shortcut works even inside the editor screens.
The table is saved over AJAX, without refreshing the page. But the changes won’t show up on the front end until the save process is completed on your server.
Using the table shortcode
Now that your columns are ready and your table is saved, you can print this table on the front-end of your website.
Scroll up to the top of the editor page where you will find the table shortcode.
Copy it and paste it on any page / post on your website, and view the results on the front end.
Setting up Phone columns
Large tables do not always look good when narrowed down on phone screens.
This is why top sites have a standard of displaying their tables differently on phones, in a layout that looks better on narrow screens.
WCPT lets you conveniently setup a separate responsive layout for your table so that your tables look great on small screen devices as well. This is achieved by creating a separate set of columns in the ‘Phone Columns’ section.
In this part of the tutorial we will be using the Columns > Phone Columns section to create a separate set of columns which will display the our table similar to the image below.
For our phone layout, we will only display 2 columns in our table. As you can see in the image below, the column on the left will only display the product image. While the column on the right will display the remaining elements: title, rating, price, buy button.
Notice that in column 2 each of the element (title, price, rating, buy button) are placed in a separate row each. We will be covering how to create such rows within columns here.
On our product table editor page locate the ‘Phone Columns’ section, right underneath the ‘Laptop Columns’ section. Create 2 new columns in this section (see image below).
Follow the below steps to setup your two phone columns.
Phone Column 1:
Heading: We do not need a heading, so leave this empty.
Use the ‘+ Add Element’ button to add a new element.
In the ‘Add Element To Cell Template’ screen select the ‘Product Image’ element so that it will be added to the cell template.
Now the ‘Element Editor’ screen for the product image will open up. Do not close it yet. We will make one change to our new ‘Product Image’ element. We will design it be larger.
For this, within the Element Editor screen, open the ‘Style for Element’ accordion by clicking on it (see image and video below). And set the ‘Max width’ property to ‘140px’. This will make the image large enough for our requirements.
Phone Column 2:
In this column, we will display the remaining 4 product elements – title, price, rating, buy button. Each of these elements will be neatly presented in a separate row of its own.
Heading: We do not need a heading, so leave this empty.
At the bottom of the ‘Cell template’ you will find the ‘+ Add Row’ button which will help us create these multiple rows (see image below).
Use this button to create 3 additional rows, so that we have 4 rows in total, one for each element.
If you have created an extra row, open the row settings with the settings button at the right end of the row and click the red delete button at the top right of the row settings (see image and video below).
Now, using the ‘+ Add Element’ button in each row, setup the following elements:
Row 1: ‘Title’ element
Row 2: ‘Price’ element
Row 3: ‘Rating’ element
Row 4: ‘Button’ element
Save your table settings. For this, click on the ‘Save Settings’ button at the bottom of the editor or use Ctrl/Cmd + s on your keyboard.
Now if you view your product table on a phone, you will find a neat responsive presentation of your products, similar to the demo screenshot at the starting of this ‘Phone Columns’ tutorial section.