Drupal Commerce Blog

What's happening in the world of Drupal Commerce.

Commerce Module Tuesday: Commerce Product Add-on

Commerce Product URLs

Welcome to another Commerce Module Tuesday! Today we are looking at Commerce Product Add-on, maintained by Matt Robison who is the Vice President of Louisville Web Group. While I was at Drupalcon Portland, I was approached by two different individuals looking to do something that this modules makes very easy: Add a product as a checkbox on the add-to-cart form for another product.

How simple is it? Fantastically simple. All you need to do is add an entity reference field, target the product type you want to have as “add ons” and boom! you have a set of products that are displaying within the add-to-cart form. Matt has done a great job at making something so powerful exactly that easy. Make a donation product for your favorite charity and allow your users to choose a donation before adding to cart. Or perhaps you are selling event tickets and would like to add on an inexpensive training the day before.

Enabling the module

Getting this module up and running with a bare-bones Drupal Commerce install was as easy as enabling the module and making sure you have the entityreference field installed (most sites will have this already installed). There isn’t a configuration screen for the module in general, but it does enhance the entity reference field and adds a display format for “addons”

Adding a Product Type

Go to admin/commerce/products/types/add (standard Commerce), or admin/commerce/config/product-variation-types/add (Commerce Kickstart 2). Call it “Donations” (or anything you want). Add two products with different prices. admin/commerce/products/add

Adding a Field

Go to the product type (not product display) that you want to have access to addons. Choose to add an “Entity Reference” field. You’ll want to change “node” to “Commerce Product”. Pick the bundle “Donations” or whatever you chose to call it.

Edit your product

Edit your product to reference your addons, and then view your final product and the checkboxes. Note that the design could definitely use some CSS love to make it look a little more fancy.

Changing the Display Format

Let’s simplify the experience a bit by tweaking the display of our addons and our products that display them. View the final result by going back to your product.

Comments or thoughts on what Commerce Module we should feature in next week’s Commerce Module Tuesday? Let us know in the comments!

Josh Miller
Posted: Jun 11, 2013

Comments

zach.bimson on August 7, 2013

Brilliant module, have been avoiding this functionality on a current build until found this. Useful video as ever (you were right, I missed the check-box on the field config haha) have you run into any problem with site search? I've raised the ticket on Drupal.org but was curious to see how you'd found it.

Thanks again,

Zach

Eric Shell on August 12, 2013

I can't seem to get the products to populate the list in the field. I am using kickstart 2.0 and I was never prompted by the "commerce products add-on settings." What am I overlooking?

joshmiller Josh Miller on August 23, 2013

Not sure what you're asking about. I'll ping Matt (the author of the module) on Twitter, see if we can get him to weigh in. Feel free to reply with more details.

jazzdrive3 on August 23, 2013

You cannot completely hide the label from the UI. This is simply a limitation of the product title field in Commerce under Manage Display. You just have to do it via CSS.

suntower on November 25, 2014

I followed the video with one exception: we would -prefer- to use the same Product Type for both the parent and the 'add-ons' if possible. But perhaps this creates a recursive problem?

1. On the Product Edit form, instead of getting a multi-select list to assign add-on products to the parent, I get a big 'Add New Product' button.

2. I tried with another field name and it 'sorta' worked... ie. the multi-select box appeared in the Product Edit form so I could assign 'add-ons' to the parent, but on the Product display, I get the field label and the add-on title but no checkbox.

Any ideas what could be going wrong?

domineaux on March 9, 2015

Where can we find the mentioned screencast for applying this module to Kickstart2?

The terminology between the KS 1 and KS 2 is different and hard to follow in this example using KS2.

KS2 has Variation Types under Products, Variation Types under Store Settings, and Content Types under Content,

Using the Kickstart 2 the admin menu doesn't follow the same naming conventions as KS 1 and it is confusing.

Would you make a KS2 screen cast applying this module, or if there is one refer us to it?

Thank you