# Variable Products

A variable product is one product that comes in options, such as a hoodie in five sizes and three colours. Each option has its own price, stock and barcode, and the option is what goes in the cart. WooCommerce calls the options variations.

## Spot a variable product[​](#identifying-variable-products "Spot a variable productへの直接リンク")

* **In the grid** — the tile shows a starting price and how many options it has, such as **from $60.00** and **15 options**. With the **Popover** style, it shows a **Variants** badge and its price range instead.
* **In the table** — the row shows how many options it has. With the **Expanded rows** style, it lists the options under the name.

## Pick an option[​](#adding-variable-products-to-cart "Pick an optionへの直接リンク")

Tap a variable product, and read the section that matches what opens:

| What opens                                                    | Read                                                    |
| ------------------------------------------------------------- | ------------------------------------------------------- |
| The options fill the product panel                            | [Open in place](#open-in-place)                         |
| A box beside the product, or a sheet at the bottom of a phone | [Popover](#method-1-quick-popover) (in **Grid**)        |
| The options appear as rows under the product                  | [Expanded rows](#method-2-expand-inline) (in **Table**) |

A new device opens them in place. To switch, see [Change how a product opens](#change-style). A [scan](#method-3-barcode-scanning) works the same whichever way they open.

### Open in place[​](#open-in-place "Open in placeへの直接リンク")

Tap the product, and its options fill the panel, one tile each. Tap an option to add it.

![Abominable Hoodie opened in place: the Products breadcrumb, the parent tile with its back badge, fifteen option tiles each showing a size, a colour and a price, the first with an in-cart badge, and its line in the cart reading Size: L · Color: Blue](/img/2.x/pos/product-panel/variations/en/tablet-light-regular--var-1-open-in-place.png)12345678

1. **Products** — tap it to go back to the list you came from.
2. **Where you are** — the product you opened.
3. **The product** — its price range and how many options it has. Tap it to go back too.
4. **One option** — tap it to add it to the cart. The chips show its size and colour.
5. **In the cart** — how many of this option are in the cart. You stay here, so you can add another.
6. **The cart line** — the product's name, with the option underneath.
7. **15 options** — the count under the panel now counts this product's options.
8. **In Stock** — while it's on, options that are out of stock are hidden. With it off, they show **Sold out**.

You can also go back by pressing Escape on a keyboard, swiping in from the left edge on a touch screen, using Android's back button, or typing a new search.

In **Table**, tap the row and the options open as rows, with an **Option** column. Tap a row or its **+** to add it.

### Popover[​](#method-1-quick-popover "Popoverへの直接リンク")

In **Grid**, with the **Popover** style, tap the product and pick each option from a popover beside it.

![A popover beside the Abominable Hoodie tile: Size chips XS to XL with L picked, Color chips Blue, Green and Red with Blue picked, 100 in stock, and Add to Cart: $69.00](/img/2.x/pos/product-panel/variations/en/tablet-light-regular--var-2-popover.png)123456

1. **Variants** — this tile has options. Tap it to open the popover.
2. **Size** — one row for each thing the options differ by.
3. **L** — the size you picked.
4. **Green** — tap another chip to change your pick.
5. **100 in stock** — the stock of the option you picked, or **Out of Stock** or **On Backorder**. There's none when the store doesn't track its stock.
6. **Add to Cart: $69.00** — adds the option and closes the popover.

On a phone, the popover opens as a sheet from the bottom of the screen. The numbers are the same as above.

![On a phone, the same choices in a sheet at the bottom of the screen: Size L and Color Blue picked, 100 in stock, and Add to Cart: $69.00](/img/2.x/pos/product-panel/variations/en/phone-light-regular--var-2-popover.png)123456

Greyed-out choices and unavailable options

As you pick, chips that can't make an option are greyed and can't be tapped. When only one choice is left, it's picked for you.

![The Hoodie popover with Logo Yes picked: Blue is picked for you, and Green and Red are greyed](/img/2.x/pos/product-panel/variations/en/tablet-light-regular--var-3-greyed-options.png)1234567

1. **Hoodie** — a product whose options differ by colour and logo.
2. **Yes** — the logo you picked.
3. **No** — tap it to change your pick.
4. **Blue** — the only colour that comes with a logo, so it's picked for you.
5. **Green** — greyed, because there's no green hoodie with a logo.
6. **Red** — greyed for the same reason.
7. **Add to Cart: $45.00** — there's no stock line, because the store doesn't track this option's stock.

When a list of choices is long, it's a dropdown that reads **Select an option**, and one with more than 10 choices has a search box. A dropdown doesn't grey out choices, so you can pick a mix with no option behind it. Then the popover reads **Variant not available** and there's nothing to add. Pick something else.

### Expanded rows[​](#method-2-expand-inline "Expanded rowsへの直接リンク")

In **Table**, with the **Expanded rows** style, the options open as rows under the product.

![Abominable Hoodie in the table with its rows open: its sizes and colours listed under the name, a 15 variations button, Size and Color filters, and one row per option with its stock, price and a plus button](/img/2.x/pos/product-panel/variations/en/tablet-light-regular--var-4-expanded-rows.png)1234567

1. **15 variations** — opens and closes the rows.
2. **XS, S, M, L, XL** — tap one to open the rows and show only that size or colour.
3. **Size** and **Color** — narrow the rows to one size or colour.
4. **Collapse** — closes the rows.
5. **One option** — its size and colour, and how many are in stock.
6. **+** — adds it to the cart.
7. **›** — opens the [popover](#method-1-quick-popover) for this product instead.

## Scan an option[​](#method-3-barcode-scanning "Scan an optionへの直接リンク")

Scan an option's own barcode, and it goes straight into the cart, whichever style you use. If the option isn't on this device yet, the POS shows **Searching store…**, fetches it, and adds it. If the scan can't add the option, check the message, for example:

* **… out of stock** — the scan is refused while **Show out-of-stock products** is off.
* **Scanning unavailable** — the option isn't on this device and the store can't be reached. Search for it when you're back online.

Scan the product's barcode instead, and nothing is added. The POS shows **Choose a variation**, and puts the barcode in the search field so the product is in front of you. Pick the option there.

Which field counts as the barcode is set in [Barcode Field](/ja/settings/general.md#barcode-field). For every other result of a scan, see [Barcode Scanning](/ja/sell/find-products/scan-barcodes.md).

## In the cart[​](#variations-in-the-cart "In the cartへの直接リンク")

The cart line shows the product's name, with the option underneath, such as **Size: L · Color: Blue**. Add the same option again, and its quantity goes up instead of adding a second line. To change the option, remove the line and add the right one.

## Change how a product opens[​](#change-style "Change how a product opensへの直接リンク")

1. Press the settings button beside the search field. **Product settings** opens.
2. Under **View Mode**, choose **Grid** or **Table**.
3. Under **Variations**, choose **Open in place**, or the view's other style: **Popover** for Grid, **Expanded rows** for Table.
4. Press **Close**.

![Product settings: View Mode set to Grid, Show out-of-stock products off, and Variations set to Open in place, with Popover beside it](/img/2.x/pos/product-panel/variations/en/tablet-light-regular--var-5-settings.png)1234567

1. **View Mode** — tiles or rows.
2. **Grid** — its second style is **Popover**.
3. **Table** — its second style is **Expanded rows**.
4. **Show out-of-stock products** — while it's off, options that are out of stock are hidden and a scan of one is refused.
5. **Variations** — how a variable product opens.
6. **Open in place** — where a new device starts.
7. **Popover** — reads **Expanded rows** while **View Mode** is **Table**.

The setting applies on this device only. For every other setting here, see [Display Settings](/ja/sell/find-products/product-display.md#variations).

## Do all the options load?[​](#all-options "Do all the options load?への直接リンク")

Yes. When you open a variable product, every one of its options loads, however many it has, in each style: in place, in the popover and in expanded rows. There's no limit to raise and no setting for it.

The POS fetches a product's options from your store when you first open it on a device, and keeps them there. A product with many options can take a moment the first time: you see **Syncing…** until they arrive. An option still missing after that is usually out of stock and hidden by **In Stock**: see [If something goes wrong](#goes-wrong).

## If something goes wrong[​](#goes-wrong "If something goes wrongへの直接リンク")

* **An option is missing** — check whether **In Stock** is hiding it. Press the cross on the filter, or turn on **Show out-of-stock products**.
* **Add to Cart stays greyed** — the option is out of stock and your store doesn't let the POS sell more than it has. Pick another option, or update the stock in WooCommerce.
* **Variant not available** — no option matches what you picked. Change one of your choices.
* **Syncing…** — the options are still loading onto this device. Wait a moment.
* **Choose a variation** — you scanned the product, not one of its options. Pick the option, or scan the option's own barcode.
* **The wrong option is in the cart** — [remove the line](/ja/getting-started/make-sale.md#goes-wrong) and add the right one.

## Related Documentation[​](#related-documentation "Related Documentationへの直接リンク")

[Product PanelFind a product and add it to the cart](/ja/sell/find-products.md)

[Display SettingsView Mode, Variations and every other setting](/ja/sell/find-products/product-display.md)

[Barcode ScanningScanner setup and what happens on a scan](/ja/sell/find-products/scan-barcodes.md)