register and checkout buttons move to bottom of form

[ultimamedia]

Hey all, does anyone know how i can put the register and checkout buttons at the bottom of add/edit billing address information?

Ta,
Chris

[jenkinhill]

http://forum.virtuemart.net/index.php?topic=122913.0

And for much earlier VM2 version: http://forum.virtuemart.net/index.php?topic=106178.msg354220#msg354220

[ultimamedia]

thanks Kelvyn but what if your not using default VM templating - im using yagendoo.
i edit the edit_address.php file which is the only one that controls the buttons but editing it overwrites the yagendoo CSS - no other php file in this folder overwrites yagendoo except the one i need to edit!

[jenkinhill]

Sounds like you will need to discuss this with Yagendoo. I have no idea how they code their VM theming.

[Gomad]

Hello

I am using

Distro Name: CentOS Linux release 7.9.2009 (Core)
PHP Version 7.4.24
Joomla! 3.10.2
Virtuemart 3.8.8 10472
Template Protostar (for the moment, I am learning and setting-up , testing etcetera)

I am trying to understand how to move the register and cancel buttons to the end of the form, but looks alike all what I can find is about older versions of virtuemart.

Can anyone tell what to do with the actual Virtuemart version 3.8.8 10472?

Btw, why are those buttons at the beginning of the form?

Thank you

[jenkinhill]

If you are talking about the account details/registration form the register buttons are at the bottom of the form.  See http://demo.virtuemart.net/account/editaddresscartBT

[Gomad]

Hello

Is this template/setup I see on the demo you linked included into the official standard Virtuemart release? ( that can be found here http://virtuemart.net/download )

If that layout comes out of the box then I am doing something wrong as I see a different thing when using vmbeez3 template.

What should I check and do to have it working as you shown?

Btw, I am referring to this page you can see also on your demo http://demo.virtuemart.net/account

As you see the registration and cancel buttons are on top of the page.

Thank you

[jenkinhill]

http://demo.virtuemart.net/account is a hybrid page allowing Joomla registration together with the ability to enter billing address. So the top part is Joomla and VirtueMart registration and the lower part of the form is just VM. You will see this if you have the login module published and the plugin usefully called "VM Framework Loader during Plugin Updates" set to Redirect Joomla to VirtueMart registration. If you turn that setting off then the form changes to just Joomla registration with the sbmit/cancel buttons.

I never use that facility, requiring registration at checkout (for those few sites that require registration). I usually leave the Joomla login module unpublished, as the login fields will appear on any page that needs it.

If you want to use that page on a site with buttons at the bottom then edit and override  components/com_virtuemart/views/user/tmpl/edit.php

[Gomad]

Hello

Yes, I verified that the page you pointed out in fact has the buttons at the end, but, if e.g. one does a menu using the Virtuemart Account Maintenance, the button are at the top anyway.

For the beginners alike me

I managed to do it, it is quite easy if you know the necessary steps, I am not sure that is all correct, but seems to work, for me at least.

Create an override in your template

First go to Extensions > Templates > Templates

Now choose your template, in this panel go to the tab Create Ovverrides

In this tab you will see lists of elements that you can override, choose the one named com_virtuemart, from the dropdown list choose then "user" and create the override, if everything goes fine you will read a message alike this one:

"Override created in /templates/YOURTEMPLATE/html/com_virtuemart/user
Successfully created the override."

Using a file manager or ftp or what you prefer go to that folder and edit the file edit.php

In this file you need to find the two buttons, in Virtuemart 3.8.8 the code you need to find is this one:

Code Select Expand

<?php //if($this->userDetails->user_is_vendor){ ?>
    <div class="buttonBar-right">
<button class="button" type="submit" onclick="javascript:return myValidator(userForm, true);" ><?php echo $this->button_lbl ?></button>
&nbsp;
<button class="button" type="reset" onclick="window.location.href='<?php echo $cancelUrl ?>'" ><?php echo vmText::_('COM_VIRTUEMART_CANCEL'); ?></button></div>

Select it, cut it and paste it at the end of the form before the tag </form>

If you like you can add some line before the buttons, e.g. an horizontal rules, or a text line or whatever you like or need (but if your site is multilingual you need to do it accordingly, I did not look into that yet).

e.g.

Code Select Expand

<?php echo  "" . date("Y-m-d h:i:s"); ?>

This should show current date and time, just as an example.

You also might want to style the buttons, you can sue the same method, you need to first discover how to create a CSS override in your template, e.g. if you use Protostar you need to create a file named user.css in the folder templates/protostar/css/user.css

With other templates this can be done in similar ways, depends on the template and its version, check what your template require to be done.

Edit the new override css file and insert your styles, do not forget to add a margin on top and bottom of the buttons, otherwise will look too tightly attached to the previous line and eventually lines that are below it

e.g.

Code Select Expand

.button2 {
  background-color: #5CAF20;
  border: none;
   margin-top: 25px;
   margin-bottom: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}


.button3 {
  background-color: #ff0017;
  border: none;
   margin-top: 25px;
   margin-bottom: 25px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Now go back to the file edit.php and change the class of the buttons, for the sample css code above you need to change it respectively in class="button2" and/or class="button3" accordingly to your preferences.
Check how you can further style your buttons on https://www.w3schools.com or other websites.

That's all for now, it might be enough, if you want to change the form even more I think that much can be done using this same scheme.

There surely are even better ways to arrange all of this, however, this is what I could do for myself.

If you come up with additions and other modifications that can be useful, please post it here.

Thank you