Page 1 of 1

Put Product Options in Columns Opencart 1.5.1.3

Posted: Sun Jan 01, 2012 7:30 am
by rugbug
I'm having difficulty editing the product.tpl so that my product options are in three columns.

At the moment the colour options and images are in one single column which makes the page quite long:

http://www.ruggerbug.com/store/index.ph ... duct_id=50

I'd like to have them aligned in three columns.

Appreciate any help and happy new year

Dan

Re: Put Product Options in Columns Opencart 1.5.1.3

Posted: Sun Jan 01, 2012 9:38 am
by straightlight
A small modification could be done to your product.tpl file. Could you post it as an attachment file ?

Re: Put Product Options in Columns Opencart 1.5.1.3

Posted: Sun Jan 01, 2012 10:04 pm
by rugbug
Product.tpl attached

Re: Put Product Options in Columns Opencart 1.5.1.3

Posted: Mon Jan 02, 2012 12:48 am
by straightlight
From stylesheet.css file, since the product options are being separated by subjects, you'd need to edit each of those subjects for your product options:

Code: Select all

.product-info .options {
	border-bottom: 1px solid #E7E7E7;
	padding: 0px 5px 10px 5px;
	margin-bottom: 10px;
	color: #000000;
}
.product-info .option-image {
	margin-top: 3px;
	margin-bottom: 10px;
}
.product-info .option-image label {
	display: block;
	width: 100%;
	height: 100%;
}
.product-info .option-image img {
	margin-right: 5px;
	border: 1px solid #CCCCCC;
	cursor: pointer;
}

Re: Put Product Options in Columns Opencart 1.5.1.3

Posted: Thu Mar 08, 2012 7:50 pm
by securition
Hi,

could you please clarify the changes that would need to be made to display the images in two columns as the code posted is identical to the base install css.

Many Thanks.

Re: Put Product Options in Columns Opencart 1.5.1.3

Posted: Wed Sep 26, 2012 11:31 pm
by mirek
A bit old thread but I saw you didn't solve it yet. This works for me:

Add to your css:

Code: Select all

.product-info .option-image tr {
  float: left;
  width: 49%;
  padding-right: 1%;
}
Tested on Chrome 21, FF 15, Opera 12, IE 8.
Opencart 1.5.3.1 (should work on your 1.5.1.3)

Re: Put Product Options in Columns Opencart 1.5.1.3

Posted: Tue Jul 29, 2014 6:34 pm
by paradoxx
mirek wrote:A bit old thread but I saw you didn't solve it yet. This works for me:

Add to your css:

Code: Select all

.product-info .option-image tr {
  float: left;
  width: 49%;
  padding-right: 1%;
}
Tested on Chrome 21, FF 15, Opera 12, IE 8.
Opencart 1.5.3.1 (should work on your 1.5.1.3)
I know the thread is old, but your solution helped me today and as nobody thanked you, I do that now. :D