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 , , , Size: L, M, XL, XS, XXL
Color: Red
4.00 out of 5
£20.00
View cart
Blush Hoodie This is the product description HD-BH-SM-36-WB , Size: M, S, XS
Color: Red
4.50 out of 5
£20.00
View cart
  • 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 , Size: M, S, XS
Color: Red
4.50 out of 5
£20.00
View cart
White T-Shirt This is the product description TS-WH-SM-36-WB , , , Size: M, S, XS
Color: Grey, White
5.00 out of 5
£10.00£7.00
View cart
  • 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
,
5.00 out of 5
£20.00
View cart
Red Hoodie This is the product description HD-RD-SM-36-WB Size: L, M, XL, XS, XXL
Color: Red
, , ,
4.00 out of 5
£20.00
View cart
  • 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 , , , Size: L, M, XL, XS, XXL
Color: Red
4.00 out of 5
View cart
£20.00
Blush Hoodie This is the product description HD-BH-SM-36-WB , Size: M, S, XS
Color: Red
4.50 out of 5
View cart
£20.00

 

Leave a Reply

Your email address will not be published. Required fields are marked *