How to generate commerce add to cart form on a page with full functionality? I am building a small site with very simple products, what I am trying to do is build a product list based on one product node, it's more easy to use an example to explain.

Like I have a product node with these fields, title, unit number, unit, price, we call it [base product].

Title:  juice
unit number: 100
unit: ml  /milliliter/
price: 3$

Now how to generate a product like this? Please note that the price are auto-calculated.


juice 100ml  3$  add_to_cart_form
juice 200ml  6$  add_to_cart_form  /* 3$x2 */
juice 300ml  9$  add_to_cart_form  /* 3$x3 */
juice 400ml 12$  add_to_cart_form  /* 3$x4 */
juice 500ml 15$  add_to_cart_form  /* 3$x5 */
juice 600ml 18$  add_to_cart_form  /* 3$x6 */
juice 700ml 21$  add_to_cart_form  /* 3$x7 */


Please note that this product is actually one product reference page but have several add_to_cart form buttons,  all the information is generate from [base product]

Because the product is so simple that I don't want the user have to increase the product quality themselves by input numbers or click the add_to_cart buttons again and again, just pick up a quality and add_to_cart.

However, this also can be solved by adding product nodes with different quality number, but it's a pain if you want to change the price information when you product reference page have a much longer list for displaying, especially when all the products have a same [base price].

Any insight or suggestions will be much appreciated. Thanks in advance.
use the inline entity form module to enable product variations. in the node you only have a product reference field, where you reference all your desired product(-variations)

then the user still can input the quantity, but also choose the product-variation. in your case the different ml-units.