WooCommerce product table on mobile: compact view and responsive setup

A WooCommerce product table with eight columns does not fit a phone held upright: either the text is squeezed into narrow columns or the customer scrolls sideways to find the price and the cart button. For a WooCommerce product table on mobile, WOOT has three tools: a compact view that turns every row into a card, per-column hiding by screen width or for touch devices, and sideways scrolling for what is left. Below is how each one works and the small details that make the table pleasant to use on a phone.

Compact view: every product becomes a card

Set Compact view width in the table's Options tab. When the browser window is that many pixels wide or narrower, the table switches to compact view:

• the header row and the footer row with the column titles are hidden;
• each product becomes one full-width cell in which the fields are stacked in column order;
• each field starts with its column title, for example Price: $24.00, so the customer still knows what the value is.

The default value -1 switches compact view off. 600 covers phones held upright, 800 or 900 also small tablets. The plugin compares the width of the browser window, not the type of device, so you can try it on a computer by making the window narrow: the table rebuilds itself after a resize, and on a phone after rotating it. In a shortcode: [woot id=12 compact_view_width=600].

Three consequences of the hidden header:

• Customers cannot sort by clicking column titles, so turn on Show Sorting Dropdown and offer a few useful sortings (price, name, popularity); more on that in product table sorting.
• Select all products and add selected live in the header of the Cart column, so they are not available in compact view; every card keeps its own Add to cart button. The row checkboxes have nothing to do there, and this CSS hides them in compact view only (cards are built from div elements, the normal view from td cells):

  .woot-data-table div.table23_td_add_to_cart .woot-checkmark-container {
      display: none;
  }

• The order of the columns becomes the order of the lines in every card: put the title, the price and the Cart column first and the long texts last, in the Columns tab.

Hide the column titles inside the cards

For some fields the title in front of the value only takes space: a thumbnail does not need "Thumbnail:", and the cart buttons explain themselves. Each title is a span with the class table23_td_cell_title, and it exists only in compact view, so a plain CSS rule is enough. Put it into Appearance → Customize → Additional CSS:

/* WOOT compact view: hide the column titles of selected fields */
.woot-data-table .table23_td_thumbnail .table23_td_cell_title,
.woot-data-table .table23_td_add_to_cart .table23_td_cell_title {
    display: none;
}

/* or hide all of them */
.woot-data-table .table23_td_cell_title {
    display: none;
}

Every field in a card has the class table23_td_ plus its field key: table23_td_post_title, table23_td_price, table23_td_sku, or the meta key of a field from the Meta tab. In the table's own Custom CSS tab, leave out .woot-data-table and write one selector per rule: the plugin puts the table's ID in front of each rule. You may see rules that start with .table23-in-compact-mode; the plugin adds that class only after the window has been resized, so such rules can miss the first view on a phone, while the rules above work from the start.

Hide columns on small screens or touch devices

Fewer columns help in both views. There are two settings, and they answer different questions.

For most shops Hide on small screen is the right choice: SKU, gallery, weight or a long attribute column can go below 600 or 800 pixels while the customer keeps title, price and cart. A table built only from shortcode attributes uses hide_on_mobile for the touch-device behaviour, with a comma-separated list of field keys: [woot columns="thumbnail,post_title,sku,price,add_to_cart" hide_on_mobile="sku"].

What remains wider than the screen can be scrolled sideways: on touch devices the table area scrolls horizontally, and on other screens wide tables get a horizontal scrollbar. That is acceptable for one extra column, but not for five, which is what compact view is for.

Image preview on hover and touch screens

The Preview on hover option of the Thumbnail column (the width of the preview in pixels, 400 by default) shows a large image when the mouse is over a thumbnail. Phones have no hover, so the plugin does not attach the preview when WordPress recognises a mobile device (the wp_is_mobile() check: phones, Android tablets, Kindle and similar). An iPad that requests desktop websites, which Safari on iPadOS does by default, is not recognised as mobile, and there a tap can open the preview.

To switch the preview off everywhere, set Preview on hover to -1, or add preview_image_width=-1 to the shortcode. Thumbnails also link to the product page in a new tab; to keep visitors in the same tab, see opening product links in the same tab, or turn on the thumbnail's No Link option if the image should not be a link at all.

Flying header, filter and other details on small screens

• Flying header. Use flying header keeps the column titles visible while the customer scrolls a long table. In compact view it is switched off automatically, because there is no header. If it collides with your theme's sticky menu on tablets, switch it off, or use use_flow_header=0 in the shortcode.
• The filter. Drop-downs sit side by side, at least 150 pixels each, while range sliders and text fields take the full width, so on a phone a filter with several elements pushes the table down. Hide filter form in Options collapses the filter behind a show/hide button, which leaves the products on the first screen.
• Rows per page. Ten products are already a long scroll as cards. Keep Per page default small, or use Use load more button, which adds products below instead of paging.
• Quantity and cart. The quantity field and the Add to cart button work the same in a card; give the Cart column an early position so customers do not scroll past the price to find it.

Test it on a phone

• Narrow the desktop browser window below Compact view width and check that the table turns into cards.
• In the browser's device mode, reload the page after choosing a phone: touch support and the user agent are read when the page loads, so the Mobile switch and the image preview change only after a reload.
• Open the page on a real phone, logged out, after clearing the page cache, and check portrait and landscape.
• Look at the first card: if the order of lines feels wrong, change the order of columns, not the CSS.

If the table still does not fit the screen or the cards look broken with your theme, open a topic on the WOOT support forum with the page link and the phone model, and we will check it.