4

When using standard checkout in magento 2, I want to place checkbox with address above my payment methods: enter image description here

I think I have to meddle with knockout JS which I have no experience in. Anyone knows where to start?

8

Starting from Magento 2.1.4 release, the checkout configuration has additional Display Billing Address On option (Stores -> Configuration -> Checkout -> Checkout Options). It has two possible values:

  • Payment Method - billing address is displayed per payment method

  • Payment Page - billing address is displayed above payment methods

The second option should solve your problem without any changes in the code base. Also, it might be useful for some methods like PayPal Express Checkout and allows to set billing address different to shipping.

5

I found it myself. Here is the solution

We have to override the payment.html in the checkout module. Copy this file;

\magento\module-checkout\view\frontend\web\template\payment.html 

and place it in your custom theme (we have to create a custom theme for this) with the following structure;

\your-theme\Magento_Checkout\web\template\payment.html

In this file we place

  <!-- ko foreach: getRegion('afterMethods') -->
      <!-- ko template: getTemplate() --><!-- /ko -->
  <!-- /ko -->

just underneath the beforeMethods Like this:

 <!-- ko foreach: getRegion('beforeMethods') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 <!-- ko foreach: getRegion('afterMethods') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->

Delete your caches in var/view_processed/ and the contents inside pub/static/frontend/.

Do a php bin/magento setup:static-content:deploy in your root and after that a php bin/magento cache:flush

  • What to do if want to move below payment methods section not inside payment methods? – Ronak Chauhan Jan 12 '18 at 6:10
  • It works! Thank you for sharing – Silver Oct 21 at 17:05
3

The checked answer might work but is not correct itself. You can't just move the place of the methods. Instead you must move the form itself to beforeMethods.

See https://magento.stackexchange.com/a/170732/42007 You need to create a plugin like in that answer but instead of moving the billing form to the shipping step you just need to move it from the afterMethods to beforeMethods of the billing-step. Something like this:

$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['beforeMethods']['children']['billing-address-form'] = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form'];

unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);

return $jsLayout;
  • Thanks @steros your solution is solved my problem – Nagaraju K May 31 at 10:14
1

You can use flexbox css :

#co-payment-form .fieldset {
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}

.checkout-billing-address {
 flex:1;
 order: 1;
}

.opc-payment {
flex:1;
order: 2;
}

.opc-payment-additional {
flex:1;
order: 3;
}

Job done !! Must be adapted to your magento configuration and theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.