2. Basics tutorial 2/2 - WC Product Table

Aim: Complete our table from Tutorial 1. Add attribute, custom field, navigation and AJAX add to cart.

Your finished product table will look similar to the one below.

Before we begin, please ensure:

You have followed tutorial 1, and are comfortable applying the concepts covered in that tutorial. We will be extending the table from Tutorial 1 in this tutorial.
The products you wish to show in your table have at least one attribute and custom field each so that you may display those in your tale as well.

Below is a quick video overview of this tutorial. In case you get stuck at any time, this video should help visually clarify the tutorial flow.

Duplicate the second column (the title column) and in the duplicated column change the ‘Heading’ text to ‘Attr 1’.
In the ‘Cell template’ of this duplicated column, remove the ‘Title’ element and instead, add an ‘Attribute’ element.
In the ‘Element Editor’ screen of this ‘Attribute’ element select the attribute you wish to show. Then click outside the screen to add the element to your column.
If you wish to add more attribute element columns, just duplicate this column and modify the duplicate to show the other attributes.

Duplicate the attribute column and change the duplicated column’s heading text to CF 1
In the ‘Cell template’ of this duplicated column, remove the ‘Attribute’ element and instead, add a ‘Custom Field’ element.
In the ‘Element Editor’ screen of this ‘Custom Field’ element enter the custom field name that you wish to display. Then click outside the screen to add the element to your column.
If you wish to add more custom field element columns, just duplicate this column and modify the duplicate to show the other custom fields.

Focus on the last column that displays the Buy Here button.
In the ‘Cell Template’ of this column add a ‘Quantity’ element. Drag this element and place it before the ‘Button’ element.
Open the ‘Button’ element, change its Label > Text: “Buy here” to “Add to cart”
Select the ‘Button’ element’s link to be ‘Add to cart via AJAX’.

Open the ‘Navigation’ tab of the editor.
Under ‘Header’ section add a new row. Select ‘Left and Right columns’ for this row so that it is divided into 2 parts (this is the default option).
In the left column add the element ‘Result Count’.
In the right column add the element: ‘Sort By’.

If you are using the table from Tutorial 1, the ‘Phone Columns’ section should already have 2 column.
The first column displays the product image
For the second column, add new rows to include the attriute and custom field columns that we have created. You can use text labels for the elements.
Use the image below as a reference point.

Save settings using Ctrl/Cmd + S or the ‘Save Settings’ button at the bottom of the page.
View your table on the front-end of the site.