Adding 'Add to Cart' to 'Collection Products' view

Question

I want to add an Add to Cart button to my products when they are still in the Collection Products view (Category overview). By default, when you navigate to a category like /commerce_kickstart/product-category/sample-category-1, you will find the single products display like this:

I would like to have all of the single products be shown like this:

In the Product Display content type, the add-to-cart-form is stored in $content variable. It is pretty easy to access via field_productand I can for example add multiple forms and stuff. But how can I get the form in the Collections Product view? I went to Structure -> Views -> Collection Products -> Field and looked through the available fields. I found field_product but when I add this, everthing that changes is that a link to the product is shown underneath the price.

So how can I add this to the Category overview?

Edit:

I have added this field (because the name appeared to be familiar scince the cart form is stored in this variable (field_product) in node--product_display

https: //i.stack.imgur.com/CaNo9.png

And that caused this to appear, wich only adds a link to the product underneath the price.

https: //i.stack.imgur.com/1vbWW.png

And this is basically all the configuration besides some more irrelevant stuff:

https: //i.stack.imgur.com/fk9BB.png

Answer 1

In your view, can you add a relationship to the product category in your cart? It should be visible as Referenced Entity or Referenced Product... basically in views you need to join your node/product to its related store/product, once you have done that you should see an available field "% to buy" with the formatter "add to cart button"