Order and Download Tables on Mobile

4 min readUpdated October 31, 2026

WooCommerce’s orders and downloads tables have four or five columns, which do not fit a phone screen. WC Account Portal lets you choose how each table is laid out on small screens: keep the full table and scroll it sideways, or turn each row into a card or a short list item.

Choose a layout#

Go to WooCommerce > Account Portal > General.
Find Orders Table (Mobile) and pick one of Scrollable, Card layout, Minimal or Compact.
Find Downloads Table (Mobile) and pick a layout the same way. The two settings are independent, so you can use cards for orders and a minimal list for downloads.
Click Save Settings and open My account > Orders on a phone (or in your browser’s device view, at 768px wide or narrower) to check the result.

General tab rows Downloads Table (Mobile) and Orders Table (Mobile) with their four layout options

The four layouts#

Both settings default to Scrollable.

Orders Table (Mobile)#

Layout	What the customer sees
Scrollable (default)	The full table with the header row and every column. The table keeps a minimum width of 600px and the customer swipes sideways to see the rest.
Card layout	One card per order: order number and a status pill on top, then Date and Total with their labels, then the action buttons at full width.
Minimal	One line per order in a single list: order number, status pill, total and a small View button. The date is hidden, and the total shows the amount only (without “for 3 items”).
Compact	A dense list in small text: order number and status on the first line, date and total on the second, then small buttons below.

Downloads Table (Mobile)#

Layout	What the customer sees
Scrollable (default)	The full table with all its columns, at a minimum width of 560px, scrolling sideways.
Card layout	One card per download: product name on top, then Downloads remaining and Expires with their labels, then a full-width download button.
Minimal	One line per download: the product name and a small download button. Downloads remaining and Expires are hidden. A long file name on the button is cut off with an ellipsis.
Compact	A dense list in small text: the product name, then Downloads remaining and Expires on one line, then a small download button below.

Orders page on a phone in four layouts side by side: Scrollable, Card layout, Minimal and Compact

Downloads page on a phone in dark mode with each download shown as a card

Tip

Card layout is the easiest to read for most stores. Minimal suits stores where customers usually just want to open an order or grab a file. Scrollable is the right choice when customers need to compare every column, or when another plugin adds columns of its own to the table.

How it behaves#

Breakpoint: the layout applies on screens 768px wide or narrower (phones and small tablets). Wider screens always show the normal table.
WooCommerce’s mobile styles: WooCommerce’s own small-screen stylesheet turns table rows into “Label: value” lines. The portal resets those rules first and then draws the chosen layout, so the result looks the same whether or not your theme loads WooCommerce’s mobile CSS. WooCommerce also hides the order number column on small screens; the portal layouts show it again.
Light and dark mode: every layout is drawn with the portal’s colour variables (card background, borders, text colours), so it follows the visitor’s mode and your theme style and brand colours.
RTL: labels and values use start and end alignment, so they swap sides on right-to-left sites.
Button shape: buttons inside the tables follow Appearance > Buttons.
Where the downloads layout appears: on the Downloads page, and anywhere else WooCommerce prints its order downloads table inside the portal (for example the downloads list on a single order’s page).

Note

The layouts change only CSS. The columns, buttons and links come from WooCommerce, so anything another plugin adds to these tables (an extra column or button) is kept. With Card layout, Minimal or Compact, an extra column is shown inside the row along with the other details; check it on a phone after installing such a plugin, and switch to Scrollable if it does not look right.

Fine-tuning with CSS#

The layout CSS sits inside a @media (max-width:768px) rule and uses selectors that start with .wap-portal-body .wap-wc-content table.woocommerce-orders-table (orders) or .wap-portal-body .wap-wc-content table.woocommerce-table--order-downloads (downloads). Because Advanced CSS is printed after it, a rule with the same selector wins. Add these in WooCommerce > Account Portal > Appearance > Advanced CSS.

Give order cards a coloured border:

@media (max-width: 768px) {
  .wap-portal-body .wap-wc-content table.woocommerce-orders-table tr {
    border-color: rgba(var(--wap-primary-rgb), 0.35);
  }
}

Hide the Expires line in the downloads cards (download-expires is WooCommerce’s class for that column):

@media (max-width: 768px) {
  .wap-portal-body .wap-wc-content table.woocommerce-table--order-downloads tr td.download-expires {
    display: none;
  }
}

See Adding Custom CSS for more on how the portal’s styles are ordered.