Autoplay
Autocomplete

Previous lesson Complete and Continue

Customize the Magento 2 Checkout

Checkout initialization

Intro & prerequisites
Preview
(1:21)
Prepare your Magento environment for checkout development
Preview
(3:28)
Overview of the checkout layout rendering process
Preview
(4:26)
The bootstrapping process of Magento’s checkout
Preview
(6:00)
Create the skeleton of a custom checkout module
Preview
(3:27)

Checkout address form fields

Determine position of shipping address checkout fields
Locked
(6:12)
Reorder checkout field positions with XML
Locked
(6:49)
Reorder checkout field positions with a custom layout processor
Locked
(14:43)
Customize the customer configuration options for checkout
Locked
(4:20)
Add a built-in validation rule to a checkout address field
Locked
(4:00)
Add a custom input mask to a checkout field
Locked
(7:15)

Checkout steps

Add a new step to the checkout header
Locked
(14:34)
Create a button to navigate to the next checkout step
Locked
(2:48)
Move a component to another checkout step
Locked
(6:35)
Disable or remove a checkout UI Component
Locked
(3:48)
Validate component field on form submission
Locked
(5:45)
Refactor custom component code to use a core method
Locked
(3:14)
Challenge! Add a step to the end of the checkout process
Locked

Modifying checkout components & templates

Understanding regions and displaying components within loops
Locked
(3:50)
Move a component to an existing checkout region
Locked
(6:03)
Move a component to another checkout region
Locked
(3:45)
Challenge! Style a repositioned checkout component
Locked
Alternative method of overriding Knockout.js templates
Locked
(2:34)
Extend a custom checkout UI component
Locked
(5:57)
Challenge! Show the view/edit cart link in the sidebar
Locked
Challenge! Create a custom checkout UI Component for logged in users
Locked
Challenge! Add a new UI Component to the Order Summary checkout
Locked
Challenge! Customize the email step for logged in users
Locked

Checkout config providers

What is window.checkoutConfig and is it a good practice?
Locked
(1:42)
Add to window.checkoutConfig with a checkout config provider
Locked
(3:51)
Add a CMS block to the sidebar with a checkout config provider
Locked
(5:57)
Install a CMS Block programmatically
Locked
(3:47)

Custom shipping address attributes

Create a new customer address EAV attribute
Locked
(15:12)
How customer EAV attributes are stored in the database
Locked
(3:30)
Update the customer address HTML template for a new attribute
Locked
(5:54)
How custom customer attributes are rendered at checkout
Locked
(4:15)
Scope the shipping address attribute as a custom attribute
Locked
(9:59)
Add the new frontend attribute as a shipping address extension attribute
Locked
(10:32)
Add the new backend attribute as a shipping address extension attribute
Locked
(2:40)
Create database columns to store extension attribute data
Locked
(5:13)
Save new extension attribute data to the database
Locked
(12:18)
Hide a custom attributes from the billing address renderer
Locked
(6:10)
Hide a custom attributes from the billing address form
Locked
(3:27)

Completion

Downloadable archive of the CustomCheckout module
Locked
Course feedback & certificate for the Customize M2 Checkout course
Locked
Next steps to implement fun checkout features
Locked

Reorder checkout field positions with XML

Lesson content locked

If you're already enrolled, log in to access this lesson.

Enroll in Course to Unlock