Commerce Add to Cart Extras is a great little module that provides the ability to turn a product listing view into an add to cart form. It does this by providing a new field that you add to a view which provides a quantity text box and makes the entire view an add to cart form. This differs from the existing “Add to Cart” field provided by commerce, which allows you to add a single item to the cart from a list.

This allows you to do some useful things such as creating a bulk order form which lists some or all of the products on your site, allowing customers to enter a quantity directly for the products they want. Or, you can utilize standard Views functionality to create another add to cart form for wholesalers on products with several attributes allowing them to add quantities of each individual product quickly and easily.

Let’s take a brief look at how we can create an add to cart page for a shoe, which can allow a wholesaler to add one or more of each individual SKU to the cart in a snap.  Just download and enable the module, and you’re ready to get started.

First, we’ll create a new view that will show Commerce Products of type All and leave sorting alone.

Next, we’ll check the block because what we want is a block that shows up on the product page.  We’ll just add a quick title, set the display format to Table and set items per page to 0 so that we get everything. Click Continue & Edit.

Next, we’ll head over to the advanced tab to add our relationship to the reference product. This is required to tie the individual SKUs to the product display we’re looking at. You can search for “ref” and then choose "Commerce Product: Referencing Node”. We’ll set the id to Product and require the relationship. Then, we’ll apply it.

Now we need to add the contextual filter that lets the view know what product we’re looking at. Search for “nid” and choose “Content:nid” and apply it. The relationship should automatically be selected, but we’ll need to tell it to provide a default value. Change type to the first option “Content ID from URL.” Apply that bad boy.

If you’re using Kickstart and you type in “22” into the preview area, you should see a list of numbers. These should be product IDs for the shoe SKUs.

Now we just need to create our fields and we’ll be good to go. Under fields, add the SKU, the rendered commerce product, and the quantity input field. For the rendered commerce product, we’ll choose to show complete entity and choose the add to cart view because in this case I’ve modified it to suit my purpose. When adding the quantity field, we’re going to remove the label for the field so that it’s a bit cleaner in the form. For the others, you can leave them at the defaults. While we’re at it, we’ll also exclude the product id from the display and rearrange the fields to look a bit better.

Now, review and save. Head over to the block config page, and add this block to the content region and save.

When you view the product page at the bottom, you should see a nice bulk add to cart form. You can style and customize to your liking, including adding forms just like this to category listing pages, creating entire pages that are devoted to entry, or customizing in other ways.

There is even a patch (though I’ve not yet tested) that allows you to choose a “checkbox” that sets the qty to 1 so that you can add it to the cart.

Notes & Caveats

1. The form is pretty slow if you are handling tons of products  If you are wanting to handle 100s of products at a time, you might consider using Commerce Add to Cart Ajax if you are serving up forms with lots of products.
2. You’re not currently going to be able to have custom product fields show up in the form. You’re essentially limited to the quantity per SKU you want to add to the cart.
3. While the module does honor the active (or inactive state) of a product, it isn’t smart enough to check to see if stock is available. You’ll have to set the enable/disable flag yourself.