Change Layout of Options on Product Page in OpenCart

Category: Opencart

Wolfman
Asked:
2012-11-03 3:31 am EST

Hits: 3,631
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

You must login before you can ask a follow up question.

You must login before you can submit an answer.

OTHER ANSWERS

0

JacobIMH
Staff
9,968 Points
2012-11-05 10:38 am EST
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

You must login before you can post a comment about this answer.

Like this Question?

Related Articles

It looks like there are no related articles.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!