How to Edit PHTML template in Magento 2?

I am trying to Edit PHTML template in Magento 2.

First I "Enabled Template Path Hints for Storefront" from Admin Panel.

Then I found that my template resides here "public_html/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml". I went to that file and found below code there.

<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
    <div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
        <div class="loader">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
                 style="position: absolute;">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
            "#checkout": {
                "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
        window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
        // Create aliases for customer.js model from customer module
        window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
        window.customerData = window.checkoutConfig.customerData;
        ], function(url, blockLoader) {
            blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
            return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');

I would like to edit PHTML template of Checkout Page. I would like to know the location of the PHTML file of Checkout Page.

  • Update your question, with your exact requirement. Which thing you want to edit ?
    – Keyur Shah
    Oct 16, 2017 at 8:58

3 Answers 3


Copy the file to your theme. This will override the core template file.

New file should be located in below location where vendor and theme are your vendor name and theme name for custom theme.


This file can then be modified accordingly.

  • Thanks for reply. My question is Where is the HTML ? I am not getting any HTML code in that specific location/file.
    – abu abu
    Oct 16, 2017 at 8:45
  • That is html and a bit of php, i think a lot of the checkout it loaded via ajax however. What do you need to modify?
    – harri
    Oct 16, 2017 at 8:52
  • Thanks for your reply. I need to modify which is loaded via ajax. Thanks
    – abu abu
    Oct 16, 2017 at 8:55
  • 2
    @harri , checkout page load using knockout js. Oct 16, 2017 at 8:57
  • @Sarfaraj, Could you please help to find out the HTML Code while checkout page load using knockout js. Thanks
    – abu abu
    Oct 18, 2017 at 8:02

You can create HTML file or modify/override if exist from here.


and copy it from here


Note :- In this file the contents are come from different file using knockout.js so you have to modify that file using knockout js.

I hope you get it what you want.

  • Thanks @Sarfaraj. I am not getting any HTML file in your location. Thanks
    – abu abu
    Oct 16, 2017 at 9:03
  • please checkout my answer i have update it. at this place "vendor/magento/module-checkout/web/template" you will get other html files also. Oct 16, 2017 at 9:04
  • There is no web folder inside vendor/magento/module-checkout/. Thanks
    – abu abu
    Oct 16, 2017 at 9:16
  • this is not possible inside a core module of magento vendor module there is available web folder with js and template files. Oct 16, 2017 at 10:50
  • Thanks @Sarfaraj. What do you mean in your comment ? You said in your Answer, I have to copy the HTML and then edit that. But first of all I have to get the HTML. I didn't get the HTML so far.
    – abu abu
    Oct 16, 2017 at 11:18

Create your own theme at the location app/design/frontend/Vendor/Theme & put your template file into it at the following location


Copy the Code from


And paste it to your template file in your own theme & edit it as of you want it to look like.

Note: You also need to take care of knockout js scripts as of in checkout module of magento they used checkout for the template rendering in frontend.

  • Thanks for reply. My question is Where is the HTML ? I am not getting any HTML code in that specific location/file.
    – abu abu
    Oct 16, 2017 at 8:45
  • The phtml file contains the html & php both the contents thats why it is saved as the .phtml So the thing you got into this file it is your html with some amount of php Oct 16, 2017 at 8:48
  • There is no HTML content. Please see my Question first.
    – abu abu
    Oct 16, 2017 at 8:49
  • <div id="checkout".... it is your html content What you are exactly looking for? Oct 16, 2017 at 8:51
  • Thanks for reply. I am looking for HTML content which is adjacent to <div id=""checkout..... There is Form with the id checkout. I am looking for that. Thanks.
    – abu abu
    Oct 16, 2017 at 8:54

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.