How edit PHTML template in Magento 2?

Question

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;">
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#checkout": {
                "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
            }
        }
    </script>
    <script>
        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;
    </script>
    <script>
        require([
            'mage/url',
            'Magento_Ui/js/block-loader'
        ], function(url, blockLoader) {
            blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
            return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
        })
    </script>
</div>

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

Answer 1

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.

app/design/frontend/vendor/theme/Magento_Checkout/templates/onepage.phtml

This file can then be modified accordingly.

Answer 2

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

app/design/frontend/vendor/theme/Magento_Checkout/web/template/onepage.html

and copy it from here

vendor/magento/module-checkout/web/template/onepage.html

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.

Answer 3

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

app/design/frontend/Vendor/Theme/Magento_Checkout/templates/onepage.phtml

Copy the Code from

vendor/magento/module-Checkout/view/frontend/templates/onepage.phtml

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.