Now you can easily create a responsive woocommerce product table that looks and functions great on phones and tablets as well! WooCommerce Product Table has all the facilities you need to create a great phone browsing experience and increase conversions from mobile traffic.
With more and more e-commerce activity shifting to phones it is necessary to ensure your tables are mobile friendly. WooCommerce Product Table PRO was built ground-up with mobile responsiveness in mind. It is the only product table plugin that offers multiple responsive modes so you can select the view that perfectly suits your product tables and create a great tablet and phone browsing experience for your prospective customers.
Absolutely anyone can follow along and increase conversions from mobile traffic. No programming experience is required.
Using this document you will be able to create product tables that are just as convenient to use on phones as on laptop.
Note: Please see the woocommerce product table plugin tutorial series first for clarity on using the plugin. The tutorials are especially designed to help you get the most out of the plugin in the least time.
Below you will find different ways you can present your table in responsive mode with explanation on how to attain each of these responsive views. You can select the view that is most suitable for your table and follow instructions to achieve it.
Jump to section:
‘2 column’ woocommerce product table
This is a simple way to create your responsive woocommerce product table. It is used by many e-commerce sites because it is effective at packing information into small screens.
In the Phone Columns section create 2 columns. In the first column create a Product Image element. In the second column, place all the remaining table elements in separate rows.
In the case of tables with large amounts of data, you can choose to add only the essential information in the Phone Columns and let the site visitors use the product link to see more information on the product page. This responsive strategy is used by major sites like Mouser.
For further details please see tutorial 1 > Phones columns.
‘Toggle child row’ in your responsive woocommerce product table [PRO version exclusive]
Using the ‘Child row’ facility you can hide some of the table columns when the table is viewed on phones and provide a toggle button to reveal these hidden columns in a separate child row below the main product row. This is a quick and easy way of creating a responsive woocommerce product table.
So, for example, let’s say you have 6 columns in the laptop view of your product table. But on phones you might want to show just the first 2 columns, and hide the content of the other columns in your child row. Your site visitor can access this additional information by clicking the toggle button.
Please see the Child Row doc for more information on this facility.
Freeze a product table column in responsive mode [PRO version exclusive]
This method is useful if it is necessary to show multiple columns even on small devices. Perhaps in cases where the customer needs to view properties in columns for quick comparison.
Now you can freeze the first column in your phone table view by adding phone_freeze_column_left=“1” to your shortcode. Customer will be able to horizontally scroll the table while the first column stays in place.
In some cases the fixed first column may be too wide and taking up too much space in Phone view, making it difficult to see the other columns while scrolling. In such a case you can limit the width of the first column. For this, go to your table’s settings > style > css and copy paste the following:
[phone]
.wcpt-cell:first-child {
max-width: 100px !important;
}
[/phone]In the above code modify the value 100px to adjust the column width.
Use ‘Property List’ element to show more / less properties [PRO version exclusive]
This method is a modification of the ‘2 column table’ method and adds a convenient toggle button to show more properties in your responsive woocommerce product table.
Create two columns in the Phone Columns section. In the first column place the product image element. In the second column place the Title element. Then add another row inside the second column. In this row add a Property List element.
You will be adding the remaining product properties and their labels in this Property List element.
Here is the advantage of the Property List element:
- Allow customers to use the show more / show less buttons. Keep the UI neat and compact while letting customers easily see more properties.
- Centralised controls for styling all the property labels and values from one place
- Conditionally print the labels. If a property doesn’t exist for a specific product, the label doesn’t have to be printed.
You can see the Property List element being used in the Audio demo – 4 when you view it on phone. While the laptop view has several columns, on phone most of the information is displayed through the Property List element instead.
Use ‘ToolTip’ to show more information [PRO version exclusive]
The tooltip element is useful when you have large chunks of text to display in the product table such as the Excerpt element.
Placing the chunk of text directly in the table can spoil the view. In such a case you can create a ToolTip element in your table and then add the element inside it.
This way you can avoid messing up the neat table layout on small screen devices while the visitor can still conveniently access the additional information in the tooltip.
To see this in action, please check out the Food demo – 4 on laptop and then phone. The table in that demo is set to show only 2 columns on phone. And the product short description and tags are placed inside a tooltip to provide a compact view.
Please see the ToolTip doc for more information on how to use this element.