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.
Thumbnail | Name | Summary | SKU | Categories | Attribute | Reviews | Price | Buy |
---|---|---|---|---|---|---|---|---|
![]() | Red Hoodie | This is the product description | HD-RD-SM-36-WB | Female, Hoodies, Male, Unisex | Size: L, M, XL, XS, XXL Color: Red | £20.00 | Out of stock | |
![]() | Blush Hoodie | This is the product description | HD-BH-SM-36-WB | Female, Hoodies | Size: M, S, XS Color: Red | £20.00 |
-
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.
Thumbnail | Name | Summary | SKU | Categories | Attribute | Reviews | Price | Buy |
---|---|---|---|---|---|---|---|---|
![]() | Blush Hoodie | This is the product description | HD-BH-SM-36-WB | Female, Hoodies | Size: M, S, XS Color: Red | £20.00 | ||
![]() | White T-Shirt | This is the product description | TS-WH-SM-36-WB | Female, Male, T-Shirts, Unisex | Size: M, S, XS Color: Grey, White |
-
Horizontal scroll.
In this mode scroll bar will be added if table overflows parent container width.
Thumbnail | Name | Summary | SKU | Attribute | Categories | Reviews | Price | Buy |
---|---|---|---|---|---|---|---|---|
![]() | Black Hoodie | This is the product description | HD-BC-SM-36-WB | Size: M, S, XL Color: Black | Hoodies, Male | £20.00 | ||
![]() | Red Hoodie | This is the product description | HD-RD-SM-36-WB | Size: L, M, XL, XS, XXL Color: Red | Female, Hoodies, Male, Unisex | £20.00 | Out of stock |
-
Disable Responsivity.
Default table fluid layout.
Thumbnail | Name | Summary | SKU | Categories | Attribute | Reviews | Buy | Price |
---|---|---|---|---|---|---|---|---|
![]() | Red Hoodie | This is the product description | HD-RD-SM-36-WB | Female, Hoodies, Male, Unisex | Size: L, M, XL, XS, XXL Color: Red | Out of stock | £20.00 | |
![]() | Blush Hoodie | This is the product description | HD-BH-SM-36-WB | Female, Hoodies | Size: M, S, XS Color: Red | £20.00 |