Change Variation Dropdown to radio buttons

In Commerce Kickstart 2, when you have product variations, the variations are shown in a dropdown above the quantity field in the add-to-cart form. In some cases, I would prefer to show the variations as radio buttons instead of the dropdown. Where would I go to change this dropdown to radio buttons?

Posted: Jun 9, 2013


Sem on June 25, 2013

Hi richm,

This is not possible. I have tried to accomplish the same with no success.

richm on July 14, 2013

Does anyone know if there is a template or view that controls this? Do you know which module actually creates the dropdown? Any help would be greatly appreciated.

richm on July 10, 2013

Does anyone know if there is template that controls this display? If not, where would I find the code that produces this display? Thanks.

richm on July 18, 2013

I finally figured out where the dropdown is generated and successfully changed it to radio buttons.

The dropdown is generated in the file: commerce_cart.module (version = "7.x-1.5")

In my configuration, the file is located here: profiles\commerce_kickstart\modules\contrib\commerce\modules\cart\commerce_cart.module

Around line 1862 is the following code:

// Note that this element by default is a select list, so its #options
// are not sanitized here. Sanitization will occur in a check_plain() in
// the function form_select_options(). If you alter this element to
// another #type, such as 'radios', you are also responsible for looping
// over its #options array and sanitizing the values.
$form['product_id'] = array(
'#type' => 'select',
'#options' => $options,
'#default_value' => $default_product->product_id,
'#weight' => 0,
'#ajax' => array(
'callback' => 'commerce_cart_add_to_cart_form_attributes_refresh',

Change '#type' => 'select',
to '#type' => 'radios',

This will change the dropdown to radio buttons.

Obviously this is not an ideal solution and will be a nightmare to maintain in future releases. I would suggest to override the function in your sites directory.

If anyone can propose a better solution, please post.

Dustin on November 13, 2013

Hi Richm ... changing the module directly is not a recommended practice. You can easily create a module that alters the form via the API (using hook_form_alter) ... then you custom module will continue to work even if you update the commerc_cart module.

See these two links for almost complete code examples:


stanb on March 25, 2014

I'm not sure if this applies to Kickstart or not, but in Commerce what I did was to create my own Product type.

Go to Store > Products and click the Product Types tab. Click Add product type. Add a field for your attribute as a Term reference with a Check boxes/Radio buttons widget.

You will need to have a Taxonomy set up for the attribute already (color or whatever).

When you come to ATTRIBUTE FIELD SETTINGS for this field, check "Enable this field to function as an attribute field on Add to Cart forms." and you will see the selection for Radio Buttons.

Hope this helps.