Change Layout of Options on Product Page in OpenCart

Wolfman

11 years ago
Answered

Currently when adding many options to a product they list down the page making the area for the product very long. How to get the options listed in three columns instead of one long column

EG currently
Product Pic Color
ColorA
Color B
Color C
Color D
Color E
Color F
Color G

Size
Size 1
Size 2
Size 3
Size 4
Size 5
Want somthing like the following
Color
ColorA ColorB ColorC
ColorD ColorE ColorF
etc

Replies 1

Oldest first
Newest first Oldest first

JacobIMH

11 years ago

Hello Wolfman and thanks for the question.

Typically making changes to any of the layout options in OpenCart is going to be done through your theme files. You would more than likely want to modify the CSS stylesheet files to make the style that you'd like to use. Your theme files should be found in [/catalog/view/theme] and a folder called [default] should be holding all your default files.

Normally with the type of listing that you're talking about that would be an unordered list, with list items inside of it. With CSS you can change the properties of the (li) elements to behave in different ways to create more than 1 column of info. It would look something like this in your CSS stylesheet:

ul{ width:800px; }
li{ float:left; }

#double li { width:50%;} /* 2 columns */
#triple li { width:33.333%; } /* 3 columns */

Then in your HTML you would just have to use:

<ul id="triple">
<li>ColorA</li>
<li>ColorB</li>
<li>ColorC</li>
<li>ColorD</li>
<li>ColorE</li>
<li>ColorF</li>
</ul>

Hopefully that should be enough information to get you pointed in the right direction. It's hard to give exact advise without seeing it on your site itself.

Please let us know if you have any further questions at all.

- Jacob

Reply Link