Magento 2 - move terms and conditions position in checkout

Question

By default, when we turn terms and conditions on in Magento 2, it's default position is under/ inside each payment method, and it is not shown until customer have clicked on a payment method. I would like to move the terms and conditions out from payment methods, and make it viewable when page is loaded. In other words, I would simply like to have the terms and conditions displayed same way as it was in Magento 1.9

any ideas?

Answer 1

at first you need create checkout_index_index.xml in your theme, then need disable item before-place-order in 314 line:

<item name="before-place-order" xsi:type="array">

with:

<item name="before-place-order" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

Read more here Magento Custimize Checkout Step

Then you need re-add that element on the end of your Checkout, after place order button, like this:

<item name="after-place-agreements" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="displayArea" xsi:type="string">after-place-agreements</item>
    <item name="dataScope" xsi:type="string">before-place-order</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="agreementss" xsi:type="array">
            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
            <item name="sortOrder" xsi:type="string">100</item>
            <item name="displayArea" xsi:type="string">after-place-agreements</item>
            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
</item>

Then copy in your default template(html) after place order:

<!-- ko foreach: getRegion('after-place-agreements') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

Good luck!! :)

See More here

Answer 2

If someone wonder how to make validation of agreements work after moving it (for example to afterMethods area) then you have to change one line in

js/model/agreement-validator.js

agreementsInputPath = '.payment-method._active div.checkout-agreements input';

to proper value depending on where you will have now the inputs of checkout-agreements