How can I arrange the slect lists, tick boxes and radio buttons in a straight lines rather than under each other for the product options on the product display page

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.

1 answer

Profile photo of Ziven Staff 100440.00 $tone January 30, 2015
Public

Hi Sir,
Please check the question: http://www.ubertheme.com/question/how-can-i-reorganise-the-product-options-layout/
 
Best Regards,
Ziven.

#1

Please login or Register to Submit Answer

Written By

Comments