Magento – Display Product Options change layout of “In Block after info column”

custom-optionsdesignlayout-update

I'd like to change how the display options look like.
I want them in In Block after info column.

But I don't want all options in rows but I'd like them in 3 or 4 columns.
They are now looking like this:

enter image description here

I'd like them to look like this (below), it would save a lot of space.

Thanks in advance.

options

Best Answer

The template used for the custom options is catalog/product/view/options.phtml
You can clone that template into your theme and change the last lines byt adding some markup around them.

So 

<?php foreach($_options as $_option): ?>
    <?php echo $this->getOptionHtml($_option) ?>
<?php endforeach; ?>

can become something like this (I'm not that good at css):

<?php $index = 0;?>
<?php foreach($_options as $_option): ?>
    <?php $index++;?>
    <div class="custom-option<?php echo ($index % 4 == 0) ? ' last':''?>">
        <?php echo $this->getOptionHtml($_option) ?>
    </div>
<?php endforeach; ?>

This will wrap every option in a div with class custom-option and every other 4th div will have the class last.
Then you can do your magic in css making the elements with this class float:left and maybe add a margin or a padding. And you can have special styles for each 4th element.

Related Topic