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!

1 Answer 1


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, 2015 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. Jun 20, 2015 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, 2015 at 16:28
  • Do you have bootstrap and jquery libs included in this file? Jun 21, 2015 at 7:45
  • I don't. I'm sorry, I'm not sure how to do that.
    – Frank
    Jun 21, 2015 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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