Sorry for duplicating the question, i put it in the wrong section before.
Now I need to rearrange the select lists, tick boxes and radio buttons in a straight lines rather than under each other, for the product options, on the product display page
———————————————————————————--
I am creating a site for an optician. There are lots of custom option ‘select’ boxes which are making the page size too big. At the moment the option select boxes show like this:
*Option Label1
Here is the select drop down 1
*Option Label2
Here is the select drop down2
*Option Label3
Here is the select drop down2
I want to display them ON ONE LINE WITH THE LABELS FIRST
*Option Label1 Here is the select drop down 1
*Option Label2 Here is the select drop down 1
*Option Label3 Here is the select drop down 3
OR TH BETTER OPTION IS TWO PER ROW LIKE THIS:
*Option Label1 Option2 Label
Here is the select drop down 1 Here is the select drop down2
*Option Label3 Option4 Label
Here is the select drop down 3 Here is the select drop down4
I have reduced the widths of the fields in template css lines 106
.product-options dd select {
width: ; /* maz product options selct box was 99% wide*/
}
Also in this file app/design/frontend/base/default/template/catalog/product/view/options/wrapper.phtml
I changed the <p> around the options to <span> … I was hoping it may put each custom option NEXT to each other on one line, but that didnt work either. Your help would be really appreciated. Many thanks.
