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?

6 Answers 6


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;


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


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? Commented Jan 12, 2018 at 6:10
  • It works! Thank you for sharing
    – Silver
    Commented Oct 21, 2019 at 17:05

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


return $jsLayout;
  • Thanks @steros your solution is solved my problem Commented May 31, 2019 at 10:14

You can use flexbox css :

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

.checkout-billing-address {
 order: 1;

.opc-payment {
order: 2;

.opc-payment-additional {
order: 3;

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


Display Billing Address On Payment Method + PayPal Method

If like me, you are required to set Display Billing Address On = Payment Method in

Admin > Stores > Configuration > Sales > Checkout > Checkout Options

But want to force display billing addresses for the PayPal payment method as well. Then you can do the following:

Overwrite: Magento_Paypal::payment/paypal-express.html within your theme:

    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->

Overwrite: Magento_Paypal::view/payment/method-renderer/paypal-express.js within your theme:

], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Paypal/payment/paypal-express'
         * @return {String}
        getBillingAddressFormName: function () {
            // Hijack the Money / Cheque order billing address functionality here.
            return 'billing-address-form-checkmo';

Next, we need to assign the quote address to the order - because this involves manipulating the order data before save, a "before" Plugin (Interceptor) will be appropriate here: In your custom module's di.xml:

<type name="Magento\Sales\Api\OrderRepositoryInterface">
        <plugin name="checkout_order_repository_plugin" type="MyVendor\MyModule\Plugin\Api\OrderRepositoryInterfacePlugin" sortOrder="10" />



namespace MyVendor\MyModule\Plugins\Api;

use Magento\Sales\Model\Order;
use Magento\Sales\Api\OrderRepositoryInterface;
use Magento\Quote\Api\CartRepositoryInterface;
use Magento\Quote\Model\Quote\Address\ToOrderAddress;
use Magento\Quote\Model\Quote\Address as QuoteAddress;

class OrderRepositoryInterfacePlugin
    /** @var CartRepositoryInterface */
    private $quoteRepository;

    /** @var ToOrderAddress */
    private $addressConverter;

    public function __construct(
        CartRepositoryInterface $quoteRepository,
        ToOrderAddress $addressConverter
    ) {
        $this->quoteRepository = $quoteRepository;
        $this->addressConverter = $addressConverter;

    public function beforeSave(OrderRepositoryInterface $subject, ...$args): array
        /** @var Order $order */
        $order = $args[0];
        if (!$order->getBillingAddress()) {
            if ($order->getShippingAddress()) {
            } else if ($order->getQuoteId()) {
                $quote = $this->quoteRepository->get($order->getQuoteId());
                if ($quote && $quote->getBillingAddress()) {
                    $address = ($quote->getBillingAddress() instanceof QuoteAddress) 
                        ? $this->addressConverter->convert($quote->getBillingAddress())
                        : $quote->getBillingAddress();

        return [$order];


If you wants to Display Billing Address before Payment Section in Magento 2.4, then you can do it like below

In Magento, the Checkout page is rendered using JS Layout, You need to create a Plugin for the afterProcess to change the position of the billing address.


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    <!-- Set Billing address above the payment method plugin -->
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="move_billing_address_above_payment_method"


<?php declare(strict_types=1);

namespace Vendor\Module\Plugin\Block\Checkout;

use Magento\Checkout\Block\Checkout\LayoutProcessor as CheckoutLayoutProcessor;

 * Move Billing address to top
class LayoutProcessor
     * @param CheckoutLayoutProcessor $subject
     * @param array $jsLayout
     * @return array
    public function afterProcess(
        CheckoutLayoutProcessor $subject,
        array $jsLayout
    ): array {
        $paymentLayout = $jsLayout['components']['checkout']['children']['steps']

        if (isset($paymentLayout['afterMethods']['children']['billing-address-form'])) {
            // Move Billing Address Before the Payment Method
                = $paymentLayout['afterMethods']['children']['billing-address-form'];

            // remove Billing Address From `Payment Method`

        return $jsLayout;

& then we need to change one store config option

Go to Store Config> Sales > Checkout Section & find "Display Billing Address On" Option field in "Checkout Options" & set this field value as a Payment Page

I hope this one helps to anyone

Reference from :- https://www.rakeshjesadiya.com/move-billing-address-before-the-payment-method-checkout-magento/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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