Magento 1.9 Default Value – Setting Default Value for Options in Magento 1.9.1

The general recommendation to re-styling the configurable options (especially those that are the pivot attributes which are generally required to be of type Global / Dropdown) follows this sort of a workflow:

• Use Javascript to "hide" the original form elements via CSS style: display: none
• Create new form elements that more closely model the UX that you want your customer to use
• Again, with Javascript, monitor the update of the new form elements and update the hidden (real) configurable elements accordingly

As for HTML markup - it's the same as any other table:

<table>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">small</th>
            <th scope="col">medium</th>
            <th scope="col">large</th>
            <th scope="col">xlarge</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
        <tr class="row">
            <th scope="row">Red</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="red-small" name="red"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="red-medium" name="red"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="red-large" name="red"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="red-xlarge" name="red"></td>
        </tr>
        <tr class="row">
            <th scope="row">Blue</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="blue-small" name="blue"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="blue-medium" name="blue"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="blue-large" name="blue"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="blue-xlarge" name="blue"></td>
        </tr>
        <tr class="row">
            <th scope="row">Green</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="green-small" name="green"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="green-medium" name="green"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="green-large" name="green"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="green-xlarge" name="green"></td>
        </tr>
    </tbody>
</table>

I've toyed around for a while with configurable.js and replaced the fillSelect() function for a fillRadio() function that reads like this:

fillRadio: function(element){
    var attributeId = element.id.replace(/[a-z]*/, '');
    var attributes = this.getAttribute(attributeId);
    var options = this.getAttributeOptions(attributeId);

    var prevConfig = false;
    if(element.prevSetting) {
        prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
    }

    if(options) {
        var index = 1;
        var inputs = [];
        for(var i = 0; i < options.length; i++) {
            var allowedProducts = [];

            var input = document.createElement('input');
            jQuery(input).attr({
                type: 'radio',
                name: attributes.code,
                disabled: 'disabled',
                value: options[i].id,
                price: options[i].price,
                id: attributes.code + attributeId + '-' + i
            }).appendTo(element);

            var label = document.createElement('label');
            jQuery(label).attr({
                for: attributes.code + attributeId + '-' + i
            }).html(this.getOptionLabel(options[i], options[i].price)).appendTo(element);

            if(prevConfig) {
                for(var j = 0; j<options[i].products.length; j++) {
                    if(prevConfig.config.allowedProducts
                        && prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
                        allowedProducts.push(options[i].products[j]);
                    }
                }
            } else {
                allowedProducts = options[i].products.clone();
            }

            if(allowedProducts.size() > 0) {
                options[i].allowedProducts = allowedProducts;
                jQuery(input).removeAttr('disabled');
            }
            if(!element.options)
                element.options = [];
            element.options[i] = input;
            element.options[i].config = options[i];
        }
    }
}

I have also modified configurable.phtml file and removed the select tags and moved the id and classes to the input container:

<?php foreach($_attributes as $_attribute): ?>
    <dt><label class="required"><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box super-attribute-select" id="attribute<?php echo $_attribute->getAttributeId() ?>">
        </div>
    </dd>
<?php endforeach; ?>

Now I'm only debugging the javascript functions (event firing, etc) so that the radio buttons are disabled with every "main" option change