I have a product with multiple options (e.g. colour, size, material) that all effect the price that the product then sells for. Is it possible for example if someone chooses the material:walnut that it adds $200 to the current price? How can I set this up inside Craft Commerce.

1 Answer 1


Absolutely that is possible. You can see an example of a complex options set up here for example (click Add Prints to get going...):


Variants are also used for pages like these: https://imagescience.com.au/products/inkjet-papers/museo-portfolio-rag

In terms of the front end, how you set up the UI is entirely up to you - in the top case, it's a React form at work, and in the second case just a simple table really.

Each of these forms ultimately just POSTs a list of fields to a Commerce controller - purchasableID and qty and optionally notes for each item the user chooses using the form. These is posted to a Commerce addToCart controller.

The products themselves are all set up in teh back end of Commerce as variations - see https://craftcommerce.com/docs/products for an overview of that. Basically you define a grid of variant options, each of which gets its own ID (later POSTed, as above) and has its own unique SKU (Stock Keeping Unit). Each variant can have as many or as few custom fields as you wish (as can the parent product)..and of course each variant can have its own price.

The product & variants system in Commerce is VERY powerful indeed, but does take a little getting used to. Best way to get started is to download Commerce and have a look through the sample templates to get an idea how it all works, enter some sample products in the back end, then attempt to make a few simple add to cart forms of your own - one that works for jsut products, then one that works for variant products.

  • Not sure if that belongs here but I just wanted to report a "not good behavior" on your page. As for smartphones your select boxes selectable areas have the same width like the strings in it. So when I click on a box with a text that only contains a few characters, the clickable area becomes really small. Not sure if that is how It is supposed to be - at least for me it's irritating since I'm used to click on the element and not on the string Commented Dec 12, 2017 at 5:47
  • Probably not the right spot but a good point. Not sure why that is (front end isn't my strong point) - but will look for a fix - thanks! Commented Dec 12, 2017 at 6:39
  • Thanks for pointing me in the right direction Jeremy! I didn't really know where to start haha. Am I right in thinking that each possible product variant will need to be set up manually or is there a way to automate it? Additionally can I have a price shown that updates automatically rather than only revealing the price at the end as in your example? Commented Dec 12, 2017 at 23:07
  • 1
    Yes, you fill them in manually. Relative to developing an ecommerce site, it's a minor bit of the work. Re: updating price - front end UI is 100% up to you, do what you like in that regard...you can write some JS to do it, sure. Commented Dec 12, 2017 at 23:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.