My apologies if this question is posed elsewhere.

I am utilizing custom options on my product pages and I have about a dozen drop downs per product. By default, all options list in one column the full width of the block that they are in. In order to prevent the user from having to scroll down to answer each option, I would like to display them in two or three columns across within the same block.

I am new to Magento and PHP so any help and example would be greatly appreciated!


As these elements are generated dynamically I would suggest you to use simple CSS and JS to do it. Here is simple bootstrap and jquery solution.

var $boxes = jQuery('dl.last').children();
var boxesLen = $boxes.length;
for (var i = 0;i < boxesLen;i+=2){
    $boxes.filter(':eq('+i+'),:eq('+(i+1)+')').wrapAll('<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"/>');
  • Thank you Mihail. Can you tell me where I would make these changes? I'm not sure how to identify the specific files. – Frank Jun 18 '15 at 15:48
  • You could apply these in script tag to this file: app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml. Should work properly. – Mihail Kolev Jun 20 '15 at 12:15
  • Thank you again Mihail. Unfortunately adding this to my view.phtml produced the same results. Would it be possible to send you the file so you can see it? Thank you again so much. I really appreciate your help! – Frank Jun 20 '15 at 16:28
  • Do you have bootstrap and jquery libs included in this file? – Mihail Kolev Jun 21 '15 at 7:45
  • I don't. I'm sorry, I'm not sure how to do that. – Frank Jun 21 '15 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.