Move Product Options

This topic has been marked as resolved.

As per the attached image, how can I move the product options further to the left?

I have tried editing several stylesheets but I can’t find it anywhere.

Would really appreciate some help.

Also, upon checkout there is no ‘Login’ button for registered customers to login. The Username and Password boxes are there, but no button to submit the information.

February 17, 2017 at 8:55 pm #56571

You could try for product options:

.options .form-group > label {
    min-width: 100px
}

Have you checked the source code if the login button is present but just hidden?

  • This reply was modified 2614 days ago by  WebForm.
February 18, 2017 at 1:32 pm #56581

Thanks, where would I find this code? In what stylehseet?

I have looked at the source code of the checkout page but no login button is present.

The formatting is also messed up.

February 18, 2017 at 4:34 pm #56583

Just put the code into the Custom Stylesheet field in your BurnEngine Control Panel:

“BurnEngine => Theme Options => Custom”.

No need to change the original source files.

Have you changed the template or other files for the checkout page?
Maybe if you could post the shop url?

February 18, 2017 at 4:42 pm #56584

I’ve added that, thanks.

The url is http://bit.ly/2lhwzd6

February 18, 2017 at 5:25 pm #56585

The login button is there – Just very far to the right!

If you have edited the checkout template, you maybe have misplaced a div somewhere.
Try to compare the original checkout template and see if you can find something misplaced.

February 18, 2017 at 5:51 pm #56586

Do you know if the checkout template is pulled from Shoppica or the default theme? As I’ve replaced the checkout with a fresh copy of the shoppica code but it’s still the same.

February 18, 2017 at 6:01 pm #56587

I replaced the checkout.tpl in default and Shoppica and it’s still messed up.

February 18, 2017 at 6:03 pm #56588

Hmm! That get me to believe it’s a CSS problem.
And i think i know where;

It seems like you have in your CSS:

.tb_page_account_login .tb_system_page_content .well, #collapse-checkout-option .row > div, #collapse-checkout-option .tb_new_customer_box {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -ms-flex-item-align: stretch;
    -webkit-align-self: stretch;
    align-self: stretch;
    width: 100%;
}

The correct CSS is:

.tb_page_account_login .tb_system_page_content .well, #collapse-checkout-option .row > div, #collapse-checkout-option .tb_new_customer_box {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -ms-flex-item-align: stretch;
    -webkit-align-self: stretch;
    align-self: stretch;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

So you have properly changed the CSS at some point.

February 18, 2017 at 6:52 pm #56589

Where can I find this file?

February 18, 2017 at 7:37 pm #56590

In your theme folder “tb => css => opencart-2.0.css.tpl”.

But be sure to backup files before you edit.

February 18, 2017 at 8:45 pm #56592

Hi,

Generally, the two column layout in checkout has been fixed with the latest version. Have you updated correctly? Have you remove any CSS fixes for already solved problems (check changelog)?

BR,
ThemeBurn team

February 21, 2017 at 12:10 am #56704

Hello guys.
I have the same question regarding Move Product Options

And this code did not helped a lot
.options .form-group > label {
min-width: 100px
}

Even if I put 0 instead of 100.
Could you please advise how to move options even more close to option description.

Thank you in advance

February 21, 2017 at 11:16 am #56714

It depends on what theme you use?

Try with max-width instead.

February 21, 2017 at 11:55 am #56717

I use kiddos theme
I tried max – it helped a little, the block moved left but I ques there also some margins between option descriptions and option values

February 21, 2017 at 12:41 pm #56718
Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.