It is also possible to add various features such as sorting, search, and pagination to your product table with one click so that your customers can easily find and compare several products in one table and order them with the Add to Cart button directly from the table.<\/p>\n\n\n\n
The tables you create with this WordPress responsive table plugin are displayed to your customers in a fully responsive and appropriate manner on all different devices, such as desktop, tablet, and mobile.<\/p>\n\n\n\n
Here, you can find a step-by-step guide for creating mobile-friendly tables with this plugin.<\/p>\n\n\n\n
TABLEiT – Product Table for WooCommerce<\/p>\n\n\n\n
The easy way to create a responsive product table with different columns in WooCommerce <\/p>\n\n\n\n
![\"TABLEiT](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2025\/10\/tableit-banner.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\nStep 1: Install and activate the WooCommerce product table plugin <\/h3>\n\n\n\n
The first step to creating a responsive WooCommerce product table is to download and install the WooCommerce product table plugin. After the plugin activation, you need to go to the below address to open the Add New Table<\/strong> page:<\/p>\n\n\n\n WordPress Dashboard > iT Product Table > Add new table<\/strong><\/p>\n\n\n\n Then, scroll down the page and click on the Get Start<\/strong> button to create a new table:<\/p>\n\n\n\n As soon as you create a new table, all of your WooCommerce products will be imported to the table automatically. However, if you want to customize the products displayed on the product table to your customers, you can go to the Query<\/strong> tab and make a new query.<\/p>\n\n\n\n Now, you are ready to create a responsive WooCommerce product table with different columns on mobile and other devices by proceeding to the next step.<\/p>\n\n\n\n The WooCommerce product table plugin comes with a very handy interface. So, you can easily find the Columns<\/strong> tab on the top of the page. Before opening this tab to add the table columns, you need to choose one of the devices from the list:<\/p>\n\n\n\n Don\u2019t worry about customizing the columns on different devices. Later, we will show you how to import the columns from laptop to other devices.<\/p>\n\n\n\n So, to create a responsive product table, just choose laptop to see the Column<\/strong> page.<\/p>\n\n\n\n Here, you can find a big blue button which is really hard to ignore for adding a new column to your table. Simply click on it to see the new column box, which is divided into two sections:<\/p>\n\n\n\n Let\u2019s see how you can customize these sections with our plugin tools.<\/p>\n\n\n\n To show a title for the new table column, you need to press the Add Element<\/strong> button and choose one of the below elements from the list that just appeared in the left panel:<\/p>\n\n\n\n As soon as you add one of the elements, the Element Settings<\/strong> panel will be displayed to you in the left panel, including the below items:<\/p>\n\n\n\n You can add more than one element in a heading to customize the title of the new column. For example, if you want to let customers sort the product based on the product price, try to:<\/p>\n\n\n\n The result is like this:<\/p>\n\n\n\n And this is what the heading looks like in your table:<\/p>\n\n\n\n In the Cell Content<\/strong> box, you have two options:<\/p>\n\n\n\n By following the above instructions, you can show all WooCommerce fields to your customers in an eye-catching and mobile-friendly product table.<\/p>\n\n\n\n For example, we tried to add the below columns to our product table:<\/p>\n\n\n\n To see how the product table look like on the laptop, press the Preview icon<\/strong> on the top right corner of the page:<\/p>\n\n\n\n If everything looks good, you can proceed to the next step of creating a responsive product table <\/p>\n\n\n\n To create a table for mobile or tablet, click on the Columns<\/strong> tab again and choose one of the options other than laptop. In this tutorial, we first try the Phone<\/strong> option and then the Tablet,<\/strong> but there is no difference in which one you choose first.<\/p>\n\n\n\n The tools you have for creating tables responsive for tablet is the same as the Laptop <\/strong>option except for an Import tool allowing you to copy all columns from the Laptop to the Tablet page. <\/p>\n\n\n\n To use these tools for designing a responsive WooCommerce product table for tablets, You just need to choose Tablet<\/strong> from the list of Columns<\/strong> tab.<\/p>\n\n\n\n Then choose the Import<\/strong> button if you want to copy all columns from the Laptop<\/strong> view to the Tablet<\/strong> view.<\/p>\n\n\n\n Then you can edit the columns, remove or rearrange them by using the icons designed in the column box:<\/p>\n\n\n\n It is also possible to add a new column by pressing the related button.<\/p>\n\n\n\n After changing and arranging the columns, you can see a preview to make sure everything is perfect.<\/p>\n\n\n\n We will make some examples in the next section to show you how easy it is to create and customize responsive product tables in our plugin.<\/p>\n\n\n\n After choosing the Phone<\/strong> option, the plugin will lead you to a new page which is almost the same as the laptop column page.<\/p>\n\n\n\n On this page, you have two options for creating WooCommerce products’ mobile view columns.<\/p>\n\n\n\n To import columns from the Laptop<\/strong> view, click on the Import<\/strong> icon on the top right corner of the screen. Then wait a few seconds and let the plugin show all the columns that you have already added to the Laptop view, here.<\/p>\n\n\n\n Now, you can customize imported columns to create a responsive table for mobile by using one of the below options: <\/p>\n\n\n\n For example, we remove the Content<\/strong> row from the mobile view to make our WooCommerce product table more mobile-friendly. <\/p>\n\n\n\n You can add new columns between the previous columns by pressing the +<\/strong> icon displayed among them or press Add a Column<\/strong> button to add a new column at the end.<\/p>\n\n\n\n When the customization suits your needs, you can click on the eye icon to see a preview of your product table for mobile.<\/p>\n\n\n\n Displaying the responsive WooCommerce product table on your website is an easy task by following the instructions below:<\/p>\n\n\n\n That\u2019s it. You can now let customers visit the page on each device and review the products in a responsive table for mobile and desktop.<\/p>\n\n\n\n In the following images, you can observe the output of our example in each device:<\/p>\n\n\n\n WooCommerce products desktop view \ud83d\udc47<\/p>\n\n\n\n WooCommerce products mobile view\ud83d\udc47<\/p>\n\n\n\n TABLEiT – Product Table for WooCommerce<\/p>\n\n\n\n The easy way to create a responsive product table with different columns in WooCommerce <\/p>\n\n\n\n![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-add-new-table-section.png\")
<\/a><\/figure>\n\n\n\n![\"choose](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/click-get-start-button.png\")
<\/a><\/figure>\n\n\n\nStep 2: Add columns to the product table and create mobile responsive table<\/h3>\n\n\n\n
\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-columns-laptop.png\")
<\/a><\/figure>\n\n\n\n\n
![\"click](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/click-add-a-column-button.png\")
<\/a><\/figure>\n\n\n\nCustomize product table heading<\/h4>\n\n\n\n
\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-element-for-table-heading.png\")
<\/a><\/figure>\n\n\n\n\n
\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-text-box.png\")
<\/a><\/figure>\n\n\n\n\n
![\"choose](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/choose-sort-by-field-.png\")
<\/a><\/figure>\n\n\n\n![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-customize-heading-and-cell-content.jpg\")
<\/a><\/figure>\n\n\n\n![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-sorting-price.jpg\")
<\/a><\/figure>\n\n\n\nCustomize product table cell content<\/h4>\n\n\n\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-element-for-table-cell-content-row.png\")
<\/a><\/figure>\n\n\n\n\n
\n
![\"customize](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/customize-style-tab-in-content-element.png\")
<\/a><\/figure>\n\n\n\n![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-customize-content-element.jpg\")
<\/a><\/figure>\n\n\n\nStep 3: Create mobile-friendly product tables<\/h3>\n\n\n\n
Create a responsive product table for tablet devices<\/h2>\n\n\n\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-columns-tablet.png\")
<\/a><\/figure>\n\n\n\n![\"click](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/click-import-button.png\")
<\/a><\/figure>\n\n\n\n![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-icons-for-column-settings.png\"){kind=icon}
<\/a><\/figure>\n\n\n\n![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-columns-settings.jpg\")
<\/a><\/figure>\n\n\n\nCustomize responsive product table for mobile devices<\/h2>\n\n\n\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-columns-phone.png\")
<\/a><\/figure>\n\n\n\n\n
![\"click](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/click-import-icon.png\"){kind=icon}
<\/a><\/figure>\n\n\n\n\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-icons-for-column-settings-.png\"){kind=icon}
<\/a><\/figure>\n\n\n\n\n
![\"select](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/select-remove-icon-row.png\"){kind=icon}
<\/a><\/figure>\n\n\n\n\n
![\"click](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/click-add-a-column-button-for-table-phone.png\")
<\/a><\/figure>\n\n\n\n![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-customization-products-table-for-mobile.jpg\")
<\/a><\/figure>\n\n\n\nStep 4: Use Shortcode to display mobile responsive table to customers <\/h3>\n\n\n\n
\n
![\"click](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/click-shortcode-icon.png\"){kind=icon}
<\/a><\/figure>\n\n\n\n\n
![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-products-desktop-view.jpg\")
<\/a><\/figure>\n\n\n\n![\"result](\"https:\/\/ithemelandco.com\/blog\/wp-content\/uploads\/2023\/12\/result-products-mobile-view.jpg\")
<\/a><\/figure>\n\n\n\n