1. Home
  2. Knowledge Base
  3. WooCommerce Product Table
  4. Product Table Shortcode Options
  5. Mobile visibility & responsive options

Mobile visibility & responsive options

WooCommerce Product Table comes with several options for controlling how the tables behave on different screen sizes, for example mobiles and tablets.

Wrap

The wrap option tells the table whether to wrap long content onto multiple lines, or to keep everything on a single line and hide the rest. The default is true which means longer content will “wrap” onto extra lines as needed. Setting this to false will ensure that each row is exactly one line high.

Example: [product_table columns="name,stock,price,add-to-cart" wrap="false"]

Priorities

WordPress plugin hide table columns on mobileThe priorities option is only relevant when displaying the table on smaller screen sizes (mobiles, tablets, etc) or when you have a lot of columns in your table and the plugin can’t fit everything in. When the screen size gets too small, the plugin will collapse certain columns down so they are no longer visible, and a “+” icon will appear at the left of each row. This allows the user to expand the row to show its full contents.

Priorities are used to determine the order in which columns are “collapsed” on smaller screens. WooCommerce Product Table has some default priorities are used and this option lets you override them. The lower the number, the higher priority that column has. So a column with a priority of “1” would have the highest priority and be collapsed last.

You need to set one priority for each column, separated by commas, for example:
[product_table columns="name,categories,tags,price,add-to-cart" priorities="1,4,5,3,2"]

Column breakpoints

The column_breakpoints option gives you fine-grained control over the breakpoints for each column when viewed at smaller screen sizes.

By default, WooCommerce Product Table will show or hide columns on smaller screens based on the priorities option described above (or the default priorities if none are set). If you wish to set more specific breakpoints, you can set one of the following options for each column: desktop, tablet, mobile, all, none or default. For example, setting a breakpoint of tablet for a column means it will display on tablet devices, but not on mobiles or desktop screens.

The all option means the column will always be visible, regardless of screen size. The none option means it will not be shown in the table, but the column will still show in the child row (or modal) when expanded. The default option will let the plugin decide when it is hidden (using the priorities option if set).

You should set one option for each column in the table, for example:
[product_table columns="name,categories,tags,price" column_breakpoints="default,desktop,mobile,all"]

Responsive control

When the plugin can’t fit all the data within the space available (for example, on mobile devices), a “plus” icon appears to the left of each row to allow the user to show or expand the full content. The responsive_control option sets whether the “+” icon control is displayed inside the first column (responsive_control="inline") or within its own separate column (responsive_control="column"). Defaults to inline.

Example: [product_table columns="name,short-description,price,add-to-cart" responsive_control="column"]

Responsive display

The responsive_display option determines how the “child rows” are displayed when viewing the table on smaller screen sizes (or when there is too much data to fit in the table). By default, the extra columns are displayed inside a child row which can be shown by clicking the “+” icon at the start of each row. You can also choose from the following options:

  • child_row – the default option. Extra data will be displayed in a hidden child row.
  • child_row_visible – Extra data is displayed in a child row which is expanded automatically when the table is first viewed.
  • modal – Extra data is displayed in a modal window when the “+” icon is clicked.

Example: [product_table columns="name,stock,price,add-to-cart" responsive_display="modal"]

Was this article helpful?

Related Articles