Magento Configurable Products - Setting Default Value for Options

Have you ever wanted to be able to set the default value for options on configurable products?  We did!  So we decided to build this into our stores.

We use this feature for:

• Allowing us to default options to the most popular options to save customers those extra few clicks
• Lets us display search and category listings with all our available color options - just like Zappos!

Our Solution

To add this feature to our stores, we developed an extension that we are currently using internally. It adds radio buttons on the product edit page beside configurable options, allowing you to specify a default value.  Then on the frontend, there is logic to set the correct values in the product option dropdowns.  We were able to do this without any modification to core code.

The default behavior in Magento for configurable products is for the options to default to “Choose an option”.  There is no way to specify a default value to automatically be selected.

This extra feature we added lets us default options to any value we want. Another added benefit is that we can list products like popular online sites like Zappos.  We wanted the ability to list products on category and search grids in all available colors.  To do this, we create a configurable product for each color.  Then for each of the configurable products, we set a different default color. This way, a customer has the ability to see all colors on the product page, and they can still switch to any other color they desire.  Check it out here.

Update August 24 / 2010 - We have made this into an extension
Available Here.
The extension does not modify any core code, is very high quality code, and tested thoroughly.

Here are some screenshots:

1. Editing a configurable product, we can set the default value for an option by clicking a radio button:

2. When a customer goes to a product, they see this default option selected for them:

An Alternative Javascript Method

If you don’t have many products, there is a way to get the same type of behavior using a javascript “hack”.

This snippet of code, can be placed on a product page and it will select the first value for each configurable option. With a little modification, you can modify it so that it selects a specific option.

 
function fireEvent(element,event)
{
	if (document.createEventObject)
	{
		// dispatch for IE
		var evt = document.createEventObject();
		return element.fireEvent('on'+event,evt);
	}
	else
	{
		// dispatch for firefox + others
		var evt = document.createEvent("HTMLEvents");
		evt.initEvent(event, true, true ); // event type,bubbling,cancelable
		return !element.dispatchEvent(evt);
	}
}
 
Event.observe(window, 'load', function() {
	var spConfigIndex = 0; 
	for (spConfigIndex=0; spConfigIndex<spConfig.settings.length; ++spConfigIndex)
	{
		spConfig.settings[spConfigIndex].selectedIndex = 1;
	    obj = spConfig.settings[spConfigIndex]; // this grabs the first select item
	    Event.observe(obj,'change',function(){});
	    fireEvent(obj,'change'); // this simulates selecting the first option, which triggers
	}
}); 
 

 
function fireEvent(element,event)
{
	if (document.createEventObject)
	{
		// dispatch for IE
		var evt = document.createEventObject();
		return element.fireEvent('on'+event,evt);
	}
	else
	{
		// dispatch for firefox + others
		var evt = document.createEvent("HTMLEvents");
		evt.initEvent(event, true, true );
		return !element.dispatchEvent(evt);
	}
}
 
function setDefaultConfigOptions()
{
	if (spConfigIndex >= spConfig.settings.length)
	{
		return; // stop
	}
 
	spConfig.settings[spConfigIndex].selectedIndex = 1;
	var obj = spConfig.settings[spConfigIndex];
 
	++spConfigIndex;
 
	Event.observe(obj,'change',function(){});
	fireEvent(obj,'change');
 
	window.setTimeout("setDefaultConfigOptions()", 1); // Add a small delay before moving onto the next option
}
 
var spConfigIndex = 0;
Event.observe(window, 'load', function() {
	setDefaultConfigOptions();
}); 
 

The javascript hack above would have been too time consuming for us to use on a live store (too many products and too many options being changed over time).  That is why we decided to add this extra feature to our stores. Our store managers love it.