WooCommerce Products Table Using Ninja Table
Creating a table from woocommerce products is a powerful feature of the Ninja table. All you need to do is going to your dashboard and hovering over Ninja Tables Pro and clicking on All tables.
From the upper right corner click on add table (See How To Add A Table) as like creating any table, A popup window will appear where you need to give a name to the table as always.
As shown in the screenshot click on the WooCommerce table from the left.
As shown in the image above give the table a name first and then filter the products. Select the product categories & tags you want to insert in the table. Also, you can filter the simple, variable and grouped products from the product type tab.
For example, if you select the Accessories category from the categories tab and simple from the product type tab all the single accessories products will be shown in the table. If you don’t want to show the products which are out of stocks just check the “Hide out of stock items”.
You can order all the products by date, product title, price etc from “Initial order by options”
Go ahead and select the “Create product table” button. Now the table will look like the below image.
Note: All settings can be changed after creating the table.
From the appearance tab, you can select where you want to show the cart details. In my case, I selected to show the cart and checkout icon both before and after the table. You can also select cart & checkout icons along with cart details.
The query setting tab is exactly the same settings you have done while creating the table. See the below image. From this tab, you can change your initial settings.
From the “add new column tab”, you can create a custom column to your product table. Setting up and styling a column with Ninja Tables can be found HERE.
Give the column a name, choose the data type and select the field type. In my case, I named the column product SKU where I want to show the SKU of the product.
Go ahead and click the add column button and your custom column will appear like this.
The design guide for the table can be found here.
DATATYPE 7: IMAGE FILE LIGHTBOX
If you want the input field would contain an image, image lightbox or iframe lightbox then you can choose Image/File/Lightbox as the data type.
Under the data type section, you need to select image linkable properties from four options including Image only, Image Lightbox, Iframe Lightbox and Link to URL.
- Image Only: In this case, your table cell will contain a plain image.
- Image Lightbox: The image will popup as a lightbox on click.
- Iframe Lightbox: Iframe will show a popup video on click.
- Link to URL: A clickable image with its destination link.
The data input would like the following screenshot.
This is what Image/File/ Lightbox data type is.
DATATYPE 8: Button Link
Button/Link is used to have a link input field in your form. The output is a button. If you want to add buttons on in your table, choose Button/Link as the data type as shown in the screenshot below.
You can choose the background, text and border color for the button as shown in the image above.
Now, you can add some data to the column by going to the Table Rows part. Next, you will find a dialogue box where you will find the button input field that exists as a link input field.