Magento 2 : Place Billing Address Above Payments Methods in Checkout
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.
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
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;