Author: wordpressaholic

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.

Header & Left sidebar

Sort By filter

Category filter

Price filter

Clear Filters

Dropdown width

Responsive navigation

Aim: Build a 3 column table with multi-rows in the columns. Also, make it responsive.

Creating the product table

Making the table responsive

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.

Video overview

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.

Adding ‘Attribute’ element

• 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.

Adding ‘Custom Field’ element

• 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.

‘Add to Cart’ button and ‘Quantity’

• 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’.
  

Navigation elements

• 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’.

Responsive design

• 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.

Done!

• 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.

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 –
  • Title
  • Featured image
  • Price
  • Rating (optional)
• 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.
  • Cell template:
    • 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.
  • Cell template:  
    • 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.