This tutorial to help you easily get started to use WooCommerce Product Table and create searchable, filterable, responsive table. All information about plugin that you could need:
Step 1: Installing WooCommerce Product Table
In WordPress, navigate to Plugins > Add New. Search for “WooCommerce Product Table by Supsystic” and click install. When the installation has completed click “Activate Plugin”. You will have a new admin menu item titled “WooCommerce Tables by Supsystic”.
Installing WooCommerce Product Table PRO
In your personal account on the supsystic.com, you will find a unique download link after purchase. After downloading the file, navigate to Plugins > Add New > Upload, and upload the file. When the installation has completed, click “Activate Plugin”. After activation of the PRO version, you need to enter license key (you can find it in your personal account on our site). To do this follow next steps:
- Go to the WooCommerce Product Table by Supsystic in WordPress navigation menu.
- Click License tab on the left navigation menu of plugin.
- Enter your email and license key.
- Click “Check” button.
Step 2: Creating Product Table
- On the left navigation menu click “Add new table”.
- Enter the title of the table.
- Click “Ok”.
Step 3: Add WooCommerce products to the table
Plugin uses the product data already created with WooCommerce (WooCommerce > Products) .You can add products to WooCommerce manually or import them using a CSV/XML import, and they will be displayed in the WooCommerce Product table.
- Move to the WooCommerce Tab and enable checkbox.
- Select the necessary items and add them to Manage Table Content. Where is an option to remove selected products or some of them. You can use Search for products to add the certain items.
Step 4: Set the table properties
WooCommerce Product Table is a plugin that gives you full product data control and allows to build a table according to your exact needs.
Plugin supports the following properties:
- Add to cart button
You can display each type as a separate column in the product table. Also you can make your own custom column title, simply edit the default one.
- Move to the Manage Table Columns constructor.
- Select the Properties of the table you want to display.
- Change order or edit the title if necessary.
- Click Save button and check the created table in preview mode.
The additional settings for the Thumbnail size and Multiple add to cart option locate in the WooCommerce tab:
Thumbnail size. Here You can set the Thumbnail size in the drop-down menu.
Multiple add to cart option. It allows to add a check-boxes to the Add to cart buttons in table. You can select products and enable these check boxes, then add all selected items to cart in one go.
Step 5: Customizing the Product Table
Here you can activate additional functions to work with the table.
- Responsive Mode. Standard Responsive mode – in this mode if table content doesn’t fit all columns become under each other with one cell per row.
Automatic column hiding – in this mode table columns will collapse from right to left if content does not fit to parent container width.
Horizontal scroll – in this mode scroll bar will be added if table overflows parent container width
Disable Responsivity – default table fluid layout
- Table Information – display information about table entries.
- Sorting – sort data by ascending or descending.
- Pagination – enable page control, divide content of the table into discrete pages – lets users tap through a series of related pages.
- Pagination List Content – Here you can set the number of rows to display on one Pagination page. Establish several numbers separated by comma to let users choose it personally. First number will be displayed by default. Since that the number of Pagination Pages will be recounted also.
- Pagination Size – large, medium, small.
- Searching– enable search by the table. Global search and search for each individual column available.
You can apply multiple individual column searches with the global search for complex searching options to be presented to the user.
- Disallow Indexing – disable table indexing for search bots.
- Execute JS Script After Table Load – Allows to execute custom Java Script code after table is loaded.
Export / Import – allow to print the WooCommerce table and export to PDF on front-end.
Here you can choose a visual style of the table.
- Auto table width – automatic detection of the cell width. If checked – width of table columns will be calculated automatically for table width 100%.
- Fixed Table Width/ Fixed Table Width (mobile) – Set fixed table width in px or %. Choose “disable” to make table width adjust by table content.
- Compact Table – decrease the amount of white space in the table.
- Align by First Table – if checked , this table will be resized by first Supsystic table on page. Important! This option makes sense only if table is not on responsive mode or responsive mode is disabled. Also if the first table has different count of columns or different settings, their sizes may not be equal.
- Disable Wrapping – disable wrapping of content in the table, so every word in the cells will be in one single line.
- Light box – add light box to images
- Borders – add borders around table: cell, row, none.
- Compact – reduce the amount of white space.
- Highlighting – enable row highlighting on mouse over.
- Disable wrapping – disable wrapping of content in the table, so all text in the cells will be on a single line.
- Highlight the order column – highlight the column that the table data is currently ordered on.
- Row striping – for example – you use a table, but the table’s rows are difficult to separate visually, especially when there are many columns (or multiple lines to a row) – add row striping to a table, it will display rows background in two similar shades of color to alternately.
Step 6: Preview
After you made some settings, you can immediately see the result – open the “Preview” tab and check the table. Note that the table may have minor changes depending on the style that your theme has.
Step 7: Add WooCommerce Product table into website content
There are different ways to add table to your site, using shortcodes:
- Table shortcode
- PHP code
Also, Table shortcode and PHP code can be found on the left navigation menu if you click “Show All Tables”.
- Select the table you need and copy the shortcode. Or choose a code from the drop-down menu and copy the code.
- Paste the shortcode into your post or page and WooCommerce Product Table plugin by will automatically create a table on your page.
WooCommerce Product Table is the perfect way to create beautiful, responsive table with a custom design. With these simple settings your WooCommerce Product Table will enhance shop’s user experience and increase conversions!
All the examples of WooCommerce Product Table you can find here.