configurable options as radio buttons

Question

I'm looking for a solution to show my configurable options as radio buttons instead of select field on a product page for a configurable product.

• show the options
• add class="disabled" for options out of stock
• add class="selected" for chosen option

There are a couple of extensions that solve my issue... partly solve my issue... and most of all provide lot of extra unneeded code. example: http://www.bullsandbirds.com/sneaker-internationalist-leather-blue-195944

Answer 1

You can use something like this if you use jQuery. It would go in yourtemplate/template/catalog/product/view/type/options/configurable.phtml.

Sorry I did not test this but it should get you on the right track.

here's a fiddle with the jquery

    if ($_product->getStockStatus() == "out of stock"){

    echo "jQuery('select option').each(function () {

    var optValue = jQuery(this).attr('value');
    jQuery('select').before(optValue + ': <input type="radio" name="' + optValue + '" value="' + optValue + '" class="disabled"></br>');

}); //end;"

    }else{

    echo "jQuery('select option').each(function () {

    var optValue = jQuery(this).attr('value');
    jQuery('select').before(optValue + ': <input type="radio" name="' + optValue + '" value="' + optValue + '" class="selected"></br>');

}); //end"

    }