Need help from Drupal Commerce experts on setting up Products

I'm currently feeling my way through Drupal Commerce structure, particularly on the Product creation part for now.

I'm still new to Product vs Product Display concepts. I have read and watch some tutorials on how to go about it.

I just need some help or an idea / suggestion on how I will organize / structure my Products if I'm to build a site similar to http://www.getuncommon.com. What will go to Products, and what will be my Product Display.

Here's what I've accomplished so far. Also let me know if I'm going on a right direction.

I have set the following as Products:

Deflector, Gallery, Loop, and Capsule

Now I'm currently stuck on how to organize it into iPhone 4, iPhone 3G, iPod, iPad... and so on. Since Deflector product can be an iPhone 4 Deflector or iPad Deflector, same thing with Capsule.

Should I use taxonomy? Or I'm supposed to utilize the Product Display? if yes how do you suggest that I do it? If I'm using Ubercart, I would probably categorizing them. Will it still be true with Drupal Commerce?

Thanks in advance

Posted: Sep 9, 2011


neardark on September 10, 2011

Here's one way to do it. I'm guessing you have unique SKUs for each product variation, like (making these up):

iPhone 3GS Deflector - SKU 001-IP3G
iPhone 4 Deflector - SKU 001-IP4
iPad Deflector - SKU 001-IPAD

iPhone 3GS Capsule - SKU 002-IP3G
iPhone 4 Capsule - SKU 002-IP4
iPad Capsule - SKU 002-IPAD

and so on...

Begin by setting up the Product Type. In addition to your standard title and body fields and perhaps an image field and so on, you'll want to add two custom fields that are of type List (text) using the Select List widget. One for the Case Design and One for the Device type.

When configuring the fields, be sure to enable the checkbox that says Enable this field to function as an attribute on Add to Cart forms. Under Field Settings, set the Number of Values to 1. For the allowed values list, enter the relevant names. Below are examples of two custom fields to handle the Case and Device variations:

Field Label: Case Names
Field Name: field_cases
Field: List (text)
Field Widget: Select List

Allowed Values List

Field Label: Device
Field Name: field_device
Field: List (text)
Field Widget

Allowed Values List
iPhone 4|iPhone 4
iPhone 3GS|iPhone 3GS

For each field, don't forget to check that checkbox that says Enable this field to function as an attribute on Add to Cart forms and set the values to 1.

Add your products...Denote each product variation using the new fields you created. You should have 16 products, each with their own sku.

Then, you can set up a single Product Display. Add a Product Reference field with its Widget set to Select List. Enable the Render fields from the reference product when viewing this entity checkbox. Select the appropriate Product Type to the type you created for your products. Under Product Reference Field Settings, set number of values set to Unlimited.

Time to add a product display! Choose Content > Add Content > [ your new Product Display Type ]

In the Product References select list, select the 16 products. Save and view your product display.

You should see two drop downs next to your Add to Cart button. Selecting different combinations will place different products/skus into your cart.

You now have a starting point for theming your product selection experience for you visitors. Hope this help.

NOTE: I hope I didn't screw up these instructions ... it's late...


John McCormick / NEAR DARK

commercestudy on September 11, 2011

I have to say your instructions are the most clear on Drupal Commerce for multi-attribute multi-product display

But for the life of me I can not find a field of type List (text)?

Also to Randy, I would have to say this is something in much need of an in depth video tutorial.

commercestudy on September 12, 2011

In answer to my question of
"But for the life of me I can not find a field of type List (text)"

The answer is beyond simple, for some reason the list module was unchecked in my core Drupal modules. I just ticked the check box clicked save and field of type List (text) was now available. A simple answer for a very simple problem solved.

marvzz on September 11, 2011

I really appreciate your effort of explaining things. It's quite clear now. Will get back on this thread if i encountered issues. thanks.

marvzz on September 19, 2011

Hi again John,

Thanks for your response earlier. But would just like to check with you if i should be adding the Artwork too under fields creation. Currently you only mentioned the Case Name and Device Type.

Are these fields different to Attributes from Ubercart? or will i still need an Attribute module to accommodate various product options?


marinoszak on November 26, 2011

Your instructions are very helpful!
In my case i have size and color.
i followed your guidelines but i can only choose one attribute of the two.
Why this happens?

thanks in advance.

marvzz on October 12, 2011

Please see attached. I'm trying to theme my product display similar to the one attached. How should I start and go about it.

The last screenshot is what I have currently. And I'm trying to customize node--product_display.tpl.php, can I achieve this with this template?