5

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?

4
  • I've got the same problem. You can reposition the checkbox in: module-checkout-agreements/view/frontend/layout/checkout_index_index.xml, but I haven't successfully relocated the checkbox yet. Any input or help would be greatly appreciated .
    – Tjitse
    Feb 15, 2017 at 17:09
  • Let me know if you have fixed this issue. I'm still trying to figure it out. Feb 16, 2017 at 9:51
  • Got to Magento 2 backend > Mageplaza (on the left sidebar) > One Step Checkout (Configuration). Under Display Configuration change the "Show Terms and Conditions" value from "In Payment area" to "In Review area". Solved! :)
    – Patrick
    Aug 29, 2018 at 11:53
  • is ur issue fixed can you please share full code with me ? Oct 15, 2019 at 5:35

2 Answers 2

10

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

4
  • I try your answer. It's working proper. But, validation is not working. So, can you please give me code for validation of terms and conditions? Apr 11, 2018 at 6:24
  • Hi Matej. I've managed to put the terms and conditions out of the payment section into the sidebar. But the validation of the terms and conditions checkbox is not working. Do you know why?
    – Condor
    Apr 13, 2018 at 9:03
  • can please share code of same as its not working for me! Oct 15, 2019 at 5:32
  • Hello. How can I add same in Shipping methods step?
    – Arjun
    Dec 1, 2020 at 12:09
4

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

1
  • The missing piece, thanks.
    – Akif
    Aug 16, 2021 at 14:44

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.