I would like to place custom bold text beside the place order button in the checkout payment page. I am new to the Magento framework and I want to make sure to make the change the proper way. I assume editing the core template is not the way, so is there a way to override the template with a custom template? or some sort of hook to insert before or after the Place Order button?

enter image description here


Create checkout_index_index.xml

<?xml version="1.0"?>
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="payments-list" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="order-comment" xsi:type="array">
                                                                    <item name="component" xsi:type="string">VENDOR_EXTENSION/js/view/comment</item>
                                                                    <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                    <item name="dataScope" xsi:type="string">checkoutcomment</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>

Create comment.js

    function (ko, $, Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'VENDOR_EXTENSION/checkout/comment'


In comment.html

<form data-role="order-comments" method="post">
    <label><strong>PLACE TEXT HERE</strong></label>
    <textarea class="input-text" name="order_comment" type="text"></textarea>

Create a column in qoute and sales_order column In observer save like this.

    $order = $observer->getOrder();
    $quoteRepository = $this->_objectManager->create('Magento\Quote\Model\QuoteRepository');
    $quote = $quoteRepository->get($order->getQuoteId());
    $order->setOrderComment( $quote->getOrderComment() );


  • So this works on the review and payments page? – jasonhall0612 Sep 11 '20 at 14:19

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.