Convert multiple configurable product select boxes to checkbox

Question

I have a configurable product that is configurable by 2 attributes:

product_type
product_size

By default, magento displays this as 2 select boxes.

This is fine.

However, I would like to change this to display radio buttons instead for each type/size option.

For example the x indicates a selected option the dashes indicate radio buttons

                     small  medium  large  x-large
short-sleeved          -       -      -      -     
long-sleeved           -       x      -      -

The code is in template:catalog/product/view/type/options/configurable.phtml

My question is how to convert the two select boxes and do this more table like structure instead?

Im not looking for exact code, more just an idea of how to take the attribute collection and output it in the format needed

Answer 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>