Magento 2 : How to change html/css classes of onepage checkout in custom theme

Question

I'm creating a new theme from scratch, I would like to change the html code of the checkout/#shipping page. However, the template (Magento_Checkout/onpage.phtml) containing the html code that I would like to change contains mostly javascript.

I couldn't figure out where the html code in this template is located. Is it defined in a .js file?

What is the best way to modify the html classes of the elements in this template and change its layout?

Thanks for reading.

Answer 1

All templates you want to override are in
\vendor\magento\module-checkout\view\frontend\web\template.

EDIT:
To find .html template and .js component: first you need to find the .html template, which is pretty easy. You inspect element, and you search in above folder for this elements. When you have the name of the template you go to checkout_index_index.xml file, which define whole layout for checkout page.
For example: You inspect 'Order summary' and you realized that this element has class name opc-block-summary, so you search for this class in above folder. Div with this class is in web/template/summary.html. When you have name of this template you can search for it in checkout_index_index.xml. Template file is specify by
<item name="template" xsi:type="string">Magento_Checkout/summary</item>, notice that there is no .html. And you also skip web/template. So Magento_Checkout/summary means module-checkout /view/frontend/web/template/summary.html.
Summarizing :
<item name="template" xsi:type="string">Magento_Checkout/summary</item> tells You about template file, and
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item> tells You about Js file.

You have to notice, that M2 uses knockout JS to render elements on checkout.

• ChristopheS: Thanks, if we want to move some container how can we proceed? These are not block I guess so how to move elements?
• SebastianT: Could you specify which block/container you want to move? and where?
• ChristopheS: Ok I understood how to move the elements, is there a way to easily find the JS templates present in the page?
• SebastianT: check my answer
• ChristopheS: Ok thanks, I'm going the right way, so the answer is no we can't find easily template like normal template with hints