Variation Card Layouts

Introduction

Many products in WooCommerce feature multiple options like sizes, colors, and materials. Managing these variations quickly at the checkout counter is essential for efficient order entry.

WooCommerce Point of Sale (POS) includes a customizable Variation Selection Layout system. This allows store managers and cashiers to choose how product variations are displayed inside the selection pane, matching the layout structure to the specific type of inventory.

This page explains how to configure variation views in the admin backend and details each layout mode.

Layout Configurations

Section 1: Variation View Configuration

Store administrators can configure the default presentation style for variable products globally. To set the default layout:

  1. Log in to the WordPress Admin Panel.
  2. Navigate to Point of Sale > Settings > Products.
  3. Locate the Product Variation View option.
  4. Select your preferred default display mode: Card View, Table View, or List View.
  5. Save the configuration changes.

Variation View Configuration

Section 2: Card View

The Card View displays variations as a visual grid of thumbnail tiles. When a cashier clicks on a variable product, they are presented with large visual cards containing images and attribute labels.

  • Visual Selection Experience: This mode is highly interactive and visually descriptive, making it easy to identify options by color, pattern, or aesthetic design.
  • Ideal for: Apparel, footwear, accessories, and products where physical appearance is the primary differentiator.

Card View Layout

Section 3: Table View

The Table View presents variations in a structured database-style grid with multiple columns. Cashiers can view detailed attributes, SKUs, exact pricing, and live stock counts side-by-side.

  • Detailed Comparison Layout: Cashiers get full data density on a single screen, allowing them to compare quantities and prices at a glance.
  • Ideal for: Wholesalers, industrial parts, building materials, and high-volume counters where cashiers need quick access to technical details and stock numbers.

Table View Layout

Section 4: List View

The List View displays variations in a clean, vertical stack of simple text rows. Each row shows the variation attribute and a clear selection button.

  • Compact Selection: Reduces visual clutter and helps cashiers navigate through simple choice lists without thumbnail distractions or wide column tables.
  • Ideal for: Electronics (e.g., storage capacity or RAM options), software licenses, and basic sizes where simple text labels are sufficient.

List View Layout

Variation Layouts Comparison

The table below contrasts the features and best fits for each layout option:

Layout ModeBest Use CaseAdvantagesUser Experience
Card ViewRetail outlets selling clothing, fashion items, and visual goods.Image-focused, lets cashiers match visual items instantly.Visual, engaging, and easy to select on touch screens.
Table ViewWholesalers, spare parts dealers, and technical inventory.High data density, displays SKUs, prices, and stock numbers.Structured, detail-heavy, perfect for product comparisons.
List ViewSimple variations like sizes (S/M/L) or capacities (64GB/128GB).Fast vertical scrolling, no visual distraction.Compact, text-focused, optimized for rapid clicking.