Simple Commerce Logo

Product Variants

Product Variants are a pretty common feature amoung e-commerce stores today, especially for stores that sell physical products, like t-shirts.

Product Variants Fieldtype

How it works

For standard products, you would have a Price field in your Product entries. However, to use variants, you need to remove the Price field and switch it for a Product Variants field. Make sure the handle of the field is product_variants or Simple Commerce won't pick it up.

Note: Don't pick the 'Product Variant' (singular) fieldtype. It's used on Orders to relate back to a particular variant.

Templating

You can loop over variants just like you would with any grid of data in Antlers.

1{{ product_variants:options }}
2 {{ variant }} - {{ price }}
3{{ /product_variants:options }}

Adding to cart

To add a variant option to the cart you can use the same workflow you would with normal products. Although, now - you need to also provide the 'key' of the variant option the user wants to add.

1{{ sc:cart:addItem }}
2 <input type="hidden" name="product" value="{{ id }}">
3 
4 <select name="variant">
5 <option disabled>Variant</option>
6 {{ product_variants:options }}
7 <option value="{{ key }}">{{ variant }} {{ price }}</option>
8 {{ /product_variants:options }}
9 </select>
10 
11 <select name="quantity">
12 <option disabled>Quantity</option>
13 
14 {{ loop from="1" to="5" }}
15 <option value="{{ value }}">{{ value }}x</option>
16 {{ /loop }}
17 </select>
18 
19 <button type="submit">Add to cart</button>
20{{ /sc:cart:addItem }}

Code highlighting proudly provided by Torchlight.

Need some help?

There's plenty of ways of getting help: either via opening a GitHub Issue, starting a conversation on the Statamic Discord or directly emailing me.