InMotion Hosting Support Center

Change Layout of Options on Product Page in OpenCart

Category: Opencart

2012-11-03 3:31 am EST

Hits: 5,185
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
Color B
Color C
Color D
Color E
Color F
Color G

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

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

You must login before you can submit an answer.



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">

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?

Need more Help?


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:
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!