PHP:Magento How to show configurable product's option like grid in place of default dropdown

Question

I want to change the default behavior of the configurable products option. By default it shows options in a dropdown box; I want to show that on a grid in place of the dropdown.

Answer 1

Creating a new product selector is a pretty big undertaking. I cannot tell you how to turn it into a grid because you have to handle multiple selections, etc. But what I can tell you is that the file you are going to spend a lot of time in is:

/app/design/frontend/base/default/template/catalog/product/view/options.phtml

Answer 2

I have done something similar.

The main Problem you will face is to make it work with the magento javascript components, so you can still use all functions which are provided by Magento.

As this is nearly impossible not to breake, i used a script, which places an own html control over the selectbox.

https://github.com/claviska/jQuery-SelectBox

This is mainly for customice Design of a DropDown box, but you can "misuse" it to have arbitary structures, as you have usual html elements you can place how you wish with CSS.

Answer 3

You could try looking at using a plugin such as this one by Magento Mechanics which will do all the hard work for you: http://www.magemechanics.com/product-grid-options.html

I have used and recommend there plugin.