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

Normally, you'd just have a Price field on your product but if you want to use variants, you can switch it out for a Product Variants field.

Simple Commerce will detect if it's a variants enabled product or not and it will adapt.

Note: Make sure the handle of your product variants field is product_variants. Simple Commerce isn't clever enough to find it with any handle.

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 }}

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.