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

Create a button to navigate to the next checkout step

Lesson content locked

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

Enroll in Course to Unlock