Post by katblaney2000 » Wed Dec 17, 2014 10:20 pm

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

Newbie

Posts

Joined
Tue Sep 16, 2014 3:17 am

Post by jgsw » Fri Dec 19, 2014 6:11 pm

Hi Katrina,

Replace

Code: Select all

class="radio"
with

Code: Select all

class="radio inline-block"
Replace

Code: Select all

class="checkbox"
with

Code: Select all

class="checkbox inline-block"
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

Quick Edit Admin Panel (40% off!) - CSS Unique (only $10!)
Sticky Admin Menu (Free) - Add Scripts & Styles to head (Free)


Active Member

Posts

Joined
Sat Mar 16, 2013 3:13 am

Post by tmart » Sat Jul 04, 2015 3:58 am

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

Attachments

Tmart_Product_Options.jpg

Tmart_Product_Options.jpg (54.58 KiB) Viewed 2253 times


Image
Logo Printed / Embroidered T-Shirts
Polo Shirts, Sweatshirts & Hoodies

http://www.tmart.in


New member

Posts

Joined
Fri Jan 21, 2011 2:02 am


Post by luican » Mon Jul 06, 2015 2:11 pm

Can you attach product.tpl file?

I can check for you

Image

Free Featured Category Module My themes on Opencart


New member

Posts

Joined
Sun Jul 05, 2015 4:17 pm


Post by justeezin » Thu Jun 23, 2016 6:57 am

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.

Newbie

Posts

Joined
Thu Jun 23, 2016 6:41 am

Post by tingwing » Wed Sep 07, 2016 9:07 pm

jgsw wrote:Hi Katrina,

Replace

Code: Select all

class="radio"
with

Code: Select all

class="radio inline-block"
Replace

Code: Select all

class="checkbox"
with

Code: Select all

class="checkbox inline-block"
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!

my email :support@bestshop24h.com
my wechat:bestshop24h
my extension:https://www.opencart.com/index.php?rout ... estshop24h


Active Member

Posts

Joined
Tue Aug 02, 2016 9:01 pm

Post by IP_CAM » Thu Sep 08, 2016 2:36 am

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 ! :D
I added some &nbsp;'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!!

Attachments

align_radio_checkbox_on_product_page.jpg

Align options horizontal in Opencart - align_radio_checkbox_on_product_page.jpg (49.04 KiB) Viewed 1847 times

radio_checkbox_on_product_page.jpg

Align options horizontal in Opencart - radio_checkbox_on_product_page.jpg (97.58 KiB) Viewed 1847 times


For Sale: Turnkey URLs with Opencart installed
My present Opencart Testsite: http://www.velomech.ch/shop/
Attacker IP Blocks are denied from further access to my Sites!
Just contact me for more Information at: jti@jacob.ch
710 FREE OC Extension-Repositories - from OC v.1.5.x up
on the largest Opencart-Mod Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by AliceH » Thu Nov 17, 2016 10:25 am

I have tried this in Version 2.2.0.0 but it does not work. any other suggestions?

http://www.embroideryallsorts.com.au


User avatar
Active Member

Posts

Joined
Sun Jan 09, 2011 11:00 am
Location - Australia

Post by IP_CAM » Thu Nov 17, 2016 11:28 am

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'; ?>

Attachments

horizontal_options.jpg

horizontal_options.jpg (137 KiB) Viewed 1656 times


For Sale: Turnkey URLs with Opencart installed
My present Opencart Testsite: http://www.velomech.ch/shop/
Attacker IP Blocks are denied from further access to my Sites!
Just contact me for more Information at: jti@jacob.ch
710 FREE OC Extension-Repositories - from OC v.1.5.x up
on the largest Opencart-Mod Github Site: https://github.com/IP-CAM
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by nickelaj » Wed Nov 14, 2018 11:55 pm

Used it for 3.0.2 but couldnt arranged the spaces for columns.
How can i arrange them ?
Image

Newbie

Posts

Joined
Fri Mar 27, 2015 7:53 pm
Who is online

Users browsing this forum: No registered users and 5 guests