Responsive modes

It’s really important to make product table mobile friendly and  fully responsive, because Sales via smartphones and tablets account for 35%. Browsing and navigating a table must be easy, convenient and stress-free as much as possible.

WooCommerce Product table adapts the tables to the screen dimension in the most suitable way to use and works smoothly on desktop, tablet or smartphone.

WooCommerece Product Table Plugin provides 4 different modes of Responsive design according to your needs.

Resize the browser or view the page on a small device and the table will be adjust its size automatically based on screen size. Check these examples to see the difference in modes:

• 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. It means longer content will “wrap” onto extra lines as needed. This mode is perfect if 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.

• Horizontal scroll. 

In this mode scroll bar will be added if table overflows parent container width.

• Disable Responsivity.

Default table fluid layout.