Page 1 of 1
Align options horizontal
Posted: Wed Dec 17, 2014 10:20 pm
by katblaney2000
Hi,
Does anyone know how to align the product options horizontally?
In the previous version of opencart i believe that you remove the <br> tags but in version 2 there are no <br> tags or <table> tags that i can see to adjust the alignment.
I am using the default template and would like my checkbox and radio options to be displayed 2 or 3 wide rather than in a large list.
The template that im looking at is catalog/view/theme/default/template/product/product.tpl
and the code im referring to is:
Code: Select all
<?php if ($option['type'] == 'radio') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<div id="input-option<?php echo $option['product_option_id']; ?>">
<?php foreach ($option['product_option_value'] as $option_value) { ?>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
I'm not very familiar with php so if someone could point me in the right direction or if there is a mod available to do this?
Thanks
Katrina
Re: Align options horizontal
Posted: Fri Dec 19, 2014 6:11 pm
by jgsw
Hi Katrina,
Replace
with
Replace
with
Then add this line of code to your stylesheet.css
Code: Select all
/* Make radio and checkbox display inline*/
.inline-block {
display:inline-block;
}
Don't forget to make a backup of your original file. Hope this helps.
jgsw
Re: Align options horizontal
Posted: Sat Jul 04, 2015 3:58 am
by tmart
Hi, Well, it did not work for me. Please find attached a screen shot from my present site product options page. The options are displayed horizontally. It is in Ver 1.5.4. I am trying to upgrade to Ver 2.0.3 and trying it out on localhost.
Please help.
Thanks in advance and best regards
Tissy
Re: Align options horizontal
Posted: Mon Jul 06, 2015 2:11 pm
by luican
Can you attach product.tpl file?
I can check for you
Re: Align options horizontal
Posted: Thu Jun 23, 2016 6:57 am
by justeezin
I am looking to set up the same option. I am running oc 2.2.0.0. Will the code change work with that version as well?
Thank you.
Re: Align options horizontal
Posted: Wed Sep 07, 2016 9:07 pm
by tingwing
jgsw wrote:Hi Katrina,
Replace
with
Replace
with
Then add this line of code to your stylesheet.css
Code: Select all
/* Make radio and checkbox display inline*/
.inline-block {
display:inline-block;
}
Don't forget to make a backup of your original file. Hope this helps.
jgsw
it works perfectly!
Re: Align options horizontal
Posted: Thu Sep 08, 2016 2:36 am
by IP_CAM
Yep, it even works in my technically downgraded OC-2to1.5 Theme,
at least, if not misplaced, because one of both routines, replacing the existing one, enlarged the Rest
down below to full page width, because I placed it in all areas on the page, where I found a matching line !
I added some
's, to add a little more room in between, as it can be seen below.
In the Admin Section, I added TWO empty spaces, instead on my Currency Name Short-Value, as prefix,
to push the price away some more from the
+ Sign, in my Test Shop latest View, since I don't need
to display the Currency Name anyway:
http://www.gratis-anzeiger.com/shop/ind ... ct_id=2504
Good and easy Solution, thank you !
Ernie
PS: BE AWARE, Code
LINE NUMBERS may
not be identical with
DEFAULT OC-2 Product.tpl Files!!
Re: Align options horizontal
Posted: Thu Nov 17, 2016 10:25 am
by AliceH
I have tried this in Version 2.2.0.0 but it does not work. any other suggestions?
Re: Align options horizontal
Posted: Thu Nov 17, 2016 11:28 am
by IP_CAM
Sure, it would, if it could, but it's a
col-sm-? space problem as well,
what prevents it from work. Stuff like this below would have to be changed as well,
to enlarge the entire right Section, or then less content, and no Currency or () Characters would be required, to eventually make it look swell.
Good Luck
Ernie
Code: Select all
<?php if ($column_left || $column_right) { ?>
<?php $class = 'col-sm-6'; ?>
<?php } else { ?>
<?php $class = 'col-sm-8'; ?>
<?php } ?>
-----
<?php $class = 'col-sm-6'; ?>
<?php } else { ?>
<?php $class = 'col-sm-4'; ?>
Re: Align options horizontal
Posted: Wed Nov 14, 2018 11:55 pm
by nickelaj
Used it for 3.0.2 but couldnt arranged the spaces for columns.
How can i arrange them ?
