Discover the HTML to customize the checkout

[bruno_soares]

Hi All,

I'm trying to change the html of the page "...index.php/checkout/cart/"

I would like to do something like this https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/templates/template-sample.html but not on "mini cart", I would like to do it on checkout page.

So, my question is, How can I know what is the HTML that I need to change?

Thanks!

[bruno_soares]

Someone please? =[

[prakash786]

Hello 

Kindly find below HTML files which are using for knockout checkout.

Payment Method Changes

<Magento_Checkout_module_dir>/view/frontend/web/templat/payment.html

Shipping information and shipping Methods

<Magento_Checkout_module_dir>/view/frontend/web/templat/shipping.html

Cart item in sider over checkout page

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': isItemsBlockExpanded()}}">
    <div class="title" data-role="title">
        <strong role="heading">
            <translate args="maxCartItemsToDisplay" if="maxCartItemsToDisplay < getCartLineItemsCount()"/>
            <translate args="'of'" if="maxCartItemsToDisplay < getCartLineItemsCount()"/>
            <span data-bind="text: getCartLineItemsCount()"></span>
            <translate args="'Item in Cart'" if="getCartLineItemsCount() === 1"/>
            <translate args="'Items in Cart'" if="getCartLineItemsCount() > 1"/>
        </strong>
    </div>
    <div class="content minicart-items" data-role="content">
        <div class="minicart-items-wrapper overflowed">
            <ol class="minicart-items">
                <each args="items()">
                    <li class="product-item">
                        <div class="product">
                            <each args="$parent.elems()" render=""/>
                        </div>
                    </li>
                </each>
            </ol>
        </div>
    </div>
    <div class="actions-toolbar" if="maxCartItemsToDisplay < getCartLineItemsCount()">
        <div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: cartUrl}">
                <span data-bind="i18n: 'View and Edit Cart'"></span>
            </a>
        </div>
    </div>
</div>

<Magento_Checkout_module_dir>/view/frontend/web/templat/summary/cart-items.html

Cart item product image in sider over checkout page

<Magento_Checkout_module_dir>/view/frontend/web/templat/summary/item/details/thumbnail.html

Cart item product details such name in sider over checkout page

<Magento_Checkout_module_dir>/view/frontend/web/templat/summary/item/details.html