Configurable.phtml File for Magento that will switch SELECT to RADIO Buttons. Some customization required. This is not an automated extension but rather a hack. Working on a live site and tested on Magento 1.7 -- Full Instructions will be available on our blog, http://www.revitalagency.com/blog This file is at: template/colorselectorplus/catalog…

Using Radio Buttons on Color Selector Plus for Magento

<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
$swatch_attributes = Mage::helper('colorselectorplus')->getSwatchAttributes();
$title = Mage::getStoreConfig('color_selector_plus/colorselectorplusgeneral/title', Mage::app()->getStore());
$hide = Mage::getStoreConfig('color_selector_plus/colorselectorplusgeneral/hidedropdown', Mage::app()->getStore());
?>

<?php if ($_product->isSaleable() && count($_attributes)): ?>
    <dl>
    	<?php foreach($_attributes as $_attribute): ?>
			<?php $_productAttribute = $_attribute->getProductAttribute(); ?>
			
			<?php if(in_array($_productAttribute->getAttributeCode(), $swatch_attributes)): ?>
				<?php $attributeId = $_attribute->getAttributeId(); ?>
       			
       				<dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
                	<div class="input-box">
                	<select role="zeno" name="super_attribute[<?php echo $attributeId ?>]" id="attribute<?php echo $attributeId ?>" class="required-entry super-attribute-select<?php if($hide == 1) echo ' swatchSelect' ?>">
                   		<!--<option><?php //echo $this->__('Choose an Option...') ?></option>-->
               		</select>
               		</div>
					<?php echo Mage::helper('colorselectorplus')->getSwatchHtml($_productAttribute->getAttributeCode(), $attributeId, $_product); ?>
					</dd>
     		<?php else: ?>
        			<dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        		
                	<div class="input-box radios">
                		<div id="customRadiosLabel"></div>
                		<div id="customRadios">
	                		<div id="radioZero"> </div><div id="radioOne"> </div><div id="radioTwo"> </div><div id="radioThree"> </div><div id="radioFour"> </div><div id="radioFive"> </div>
	                		<div id="radioSix"> </div><div id="radioSeven"> </div><div id="radioEight"> </div><div id="radioNine"> </div><div id="radioTen"> </div>
                		</div>
						<div id="sizeDisplay">
		                	<div id="customSizeLabel"></div>
	                	</div>	
						
              		</div>
			  		</dd>
   			<?php endif; ?>
    	
    	<?php endforeach; ?>
    	
    </dl>
    
	<script type="text/javascript">
		var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
		var selecttitle = '<?php echo $title ?>';
		
		/* START CUSTOM RADIOS */
		var JSONobj = '<?php echo $this->getJsonConfig() ?>'.evalJSON();
		
		//Lets isolate just the options aka products // 92 is attribute id in my installation for "color"
    	var optionsArray = JSONobj.attributes[92].options;

		//Lets isolate just the Sizes for the products // 138 is attribute id in my installation for "size"
    	var sizesArray = JSONobj.attributes[138].options;
		
		//console.log(sizesArray[3].products); // medium products
		
		//this function is called at the end of colorselected.js line 291
		function customRadios(selectedid) {
    		//alert(id); //testing to show me the value
    		
    		//lets clear out all the sizes before we start
    		$("radioZero").update("");
    		$("radioOne").update("");
    		$("radioTwo").update("");
    		$("radioThree").update("");
    		$("radioFour").update("");
    		$("radioFive").update("");
    		$("radioSix").update("");
    		$("radioSeven").update("");
    		$("radioEight").update("");
    		$("radioNine").update("");
    		$("radioTen").update("");
    		$("customSizeLabel").update("");
    		
    		//loop through json 
			var i=0;
			for(var id in optionsArray){
				
				//find the id in the Array and go
				if(optionsArray[i].id == selectedid){
					//var colorid = optionsArray[i].id;
					var label = optionsArray[i].label;
					var price = optionsArray[i].price;
					var children = optionsArray[i].products;
					$("customRadiosLabel").update("Color: " + label + " is <strong>$" + price + "</strong> Extra");
					
					// Loop through Children Products
					for(var i = 0; i < children.length; i++) {
			            //console.log("child id"+children[i]); // print all my children products just to check
			            //i have 10 Size Attributes, I know this from Admin
			            
			            //find child in XSmall
			            if(sizesArray[0]){
			            if(sizesArray[0].products.indexOf(children[i]) != -1){
			            	//console.log("sizeArray0 id"+children[i]);
			            	// NOTE: 138 is the id in my installation for "size"
							$("radioZero").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[0].price+"\" value=\""+sizesArray[0].id+"\" id=\""+sizesArray[0].label+"\"><label for=\""+sizesArray[0].label+"\" onclick=\"sizeDisplay(sizesArray[0].label,sizesArray[0].price)\" id=\""+sizesArray[0].label+"label\">"+sizesArray[0].label+"</label> ");
						}
						}
						
						//find child in Small
						if(sizesArray[1]){
			            if(sizesArray[1].products.indexOf(children[i]) != -1){
							$("radioOne").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[1].price+"\" value=\""+sizesArray[1].id+"\" id=\""+sizesArray[1].label+"\"><label for=\""+sizesArray[1].label+"\" onclick=\"sizeDisplay(sizesArray[1].label,sizesArray[1].price)\" id=\""+sizesArray[1].label+"label\">"+sizesArray[1].label+"</label> ");
						}
						}
						
						if(sizesArray[2]){
			            if(sizesArray[2].products.indexOf(children[i]) != -1){
							$("radioTwo").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[2].price+"\" value=\""+sizesArray[2].id+"\" id=\""+sizesArray[2].label+"\"><label for=\""+sizesArray[2].label+"\" onclick=\"sizeDisplay(sizesArray[2].label,sizesArray[2].price)\" id=\""+sizesArray[2].label+"label\">"+sizesArray[2].label+"</label> ");
						}
						}
						
						if(sizesArray[3]){
			            if(sizesArray[3].products.indexOf(children[i]) != -1){
							$("radioThree").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[3].price+"\" value=\""+sizesArray[3].id+"\" id=\""+sizesArray[3].label+"\"><label for=\""+sizesArray[3].label+"\" onclick=\"sizeDisplay(sizesArray[3].label,sizesArray[3].price)\" id=\""+sizesArray[3].label+"label\">"+sizesArray[3].label+"</label> ");
						}
						}
						
						if(sizesArray[4]){
						if(sizesArray[4].products.indexOf(children[i]) != -1){
							$("radioFour").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[4].price+"\" value=\""+sizesArray[4].id+"\" id=\""+sizesArray[4].label+"\"><label for=\""+sizesArray[4].label+"\" onclick=\"sizeDisplay(sizesArray[4].label,sizesArray[4].price)\" id=\""+sizesArray[4].label+"label\">"+sizesArray[4].label+"</label> ");
						}
						}
						
						if(sizesArray[5]){
						if(sizesArray[5].products.indexOf(children[i]) != -1){
							$("radioFive").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[5].price+"\" value=\""+sizesArray[5].id+"\" id=\""+sizesArray[4].label+"\"><label for=\""+sizesArray[5].label+"\" onclick=\"sizeDisplay(sizesArray[5].label,sizesArray[5].price)\" id=\""+sizesArray[5].label+"label\">"+sizesArray[5].label+"</label> ");
						}
						}
						
						if(sizesArray[6]){
						if(sizesArray[6].products.indexOf(children[i]) != -1){
							$("radioSix").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[6].price+"\" value=\""+sizesArray[6].id+"\" id=\""+sizesArray[6].label+"\"><label for=\""+sizesArray[6].label+"\" onclick=\"sizeDisplay(sizesArray[6].label,sizesArray[6].price)\" id=\""+sizesArray[6].label+"label\">"+sizesArray[6].label+"</label> ");
						}
						}
						
						if(sizesArray[7]){
						if(sizesArray[7].products.indexOf(children[i]) != -1){
							$("radioSeven").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[7].price+"\" value=\""+sizesArray[7].id+"\" id=\""+sizesArray[7].label+"\"><label for=\""+sizesArray[7].label+"\" onclick=\"sizeDisplay(sizesArray[7].label,sizesArray[7].price)\" id=\""+sizesArray[7].label+"label\">"+sizesArray[7].label+"</label> ");
						}
						}
						
						if(sizesArray[8]){
						if(sizesArray[8].products.indexOf(children[i]) != -1){
							$("radioEight").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[8].price+"\" value=\""+sizesArray[8].id+"\" id=\""+sizesArray[8].label+"\"><label for=\""+sizesArray[8].label+"\" onclick=\"sizeDisplay(sizesArray[8].label,sizesArray[8].price)\" id=\""+sizesArray[8].label+"label\">"+sizesArray[8].label+"</label> ");
						}
						}
						
						if(sizesArray[9]){
						if(sizesArray[9].products.indexOf(children[i]) != -1){
							$("radioNine").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[9].price+"\" value=\""+sizesArray[9].id+"\" id=\""+sizesArray[9].label+"\"><label for=\""+sizesArray[9].label+"\" onclick=\"sizeDisplay(sizesArray[9].label,sizesArray[9].price)\" id=\""+sizesArray[9].label+"label\">"+sizesArray[9].label+"</label> ");
						}
						}
						
						if(sizesArray[10]){
						if(sizesArray[10].products.indexOf(children[i]) != -1){
							$("radioTen").update("<input name=\"super_attribute[138]\" type=\"radio\" price=\""+sizesArray[10].price+"\" value=\""+sizesArray[10].id+"\" id=\""+sizesArray[10].label+"\"><label for=\""+sizesArray[10].label+"\" onclick=\"sizeDisplay(sizesArray[10].label,sizesArray[10].price)\" id=\""+sizesArray[10].label+"label\">"+sizesArray[10].label+"</label> ");
						}
						}
						
			        }// eof Children Products Loop
			        
					//break; // just stop the loop b/c we found our product
				}
				i++;
			} // eof for

    	} // eof customRadios 
    	
    	
    	//lets display some cool stuff when they click on the size button too
    	function sizeDisplay(radiolabel,price){
			
			$("customSizeLabel").update("Size: " + radiolabel + " is <strong>$" + price + "</strong> Extra");
			$(radiolabel+"label").addClassName("radioLabelSelected");
			
			
			var i=0;
			for(var label in sizesArray){
				//console.log(sizesArray[i].label);
				if($(sizesArray[i].label+"label")){ //if the label exists
					if(sizesArray[i].label != radiolabel){ // if it doesnt equal the selected label
						
						if($(sizesArray[i].label+"label").className == "radioLabelSelected"){ // if it has that clasname
							$(sizesArray[i].label+"label").removeClassName("radioLabelSelected"); // remove the class
						}
							
					}
				} 
				i++;
			}
			
		}
		
		
    	/* EOF CUSTOM INPUTS */
    	
    </script>

<?php endif;