Log in

Courses

Customize the Magento 2 Checkout artwork

Customize the Magento 2 Checkout

Tackle customizing, modifying & updating the many areas of Magento 2's complex checkout process.

Last updated 1 month ago

This is a premium course

Only available to enrolled or University students.
Join today to unlock all lessons in this course.

Enroll now

There are 45 lessons in this course:

Checkout initialization

Review the prerequisites for customizing checkout in Magento
1:19

Review the prerequisites for customizing checkout

Prepare your Magento environment for checkout development
3:26

Prepare your Magento environment for checkout development

Understand the checkout layout rendering process in Magento
4:24

Understand the checkout layout rendering process

Understand the checkout bootstrapping process in Magento
5:58

Understand the checkout bootstrapping process 1

Create the skeleton of a custom checkout module in Magento
3:25

Create the skeleton of a custom checkout module

Checkout address form fields

Determine the position of shipping address checkout fields in Magento
6:10

Determine the position of shipping address checkout fields

Reorder checkout field positions with XML in Magento
6:46

Reorder checkout field positions with XML

Reorder checkout field positions with a custom layout processor in Magento
14:41

Reorder checkout field positions with a custom layout processor 7

Customize customer configuration options for checkout in Magento
4:18

Customize customer configuration options for checkout 5

Add a built-in validation rule to a checkout address field in Magento
3:57

Add a built-in validation rule to a checkout address field 2

Add a custom input mask to a checkout field in Magento
7:12

Add a custom input mask to a checkout field

Checkout steps

Add a new step to the checkout header in Magento
14:32

Add a new step to the checkout header

Create a button to navigate to the next checkout step in Magento
2:45

Create a button to navigate to the next checkout step

Move a component to another checkout step in Magento
6:33

Move a component to another checkout step 10

Disable or remove a checkout UI component in Magento
3:46

Disable or remove a checkout UI component 2

Validate a component field on form submission in Magento
5:43

Validate a component field on form submission

Refactor custom component code to use a core method in Magento
3:12

Refactor custom component code to use a core method

Add a step to the end of the checkout process

Modifying checkout components & templates

Understand regions and display components within loops in Magento
3:48

Understand regions and display components within loops

Move a component to an existing checkout region in Magento
6:01

Move a component to an existing checkout region

Move a component to another checkout region in Magento
3:43

Move a component to another checkout region 2

Style a repositioned checkout component

Override Knockout.js templates with an alternative method in Magento
2:31

Override Knockout.js templates with an alternative method 2

Extend a custom checkout UI component in Magento
5:55

Extend a custom checkout UI component

Show the view or edit cart link in the sidebar

Create a custom checkout UI component for logged-in users

Add a new UI component to the order summary checkout

Customize the email step for logged-in users

Checkout config providers

Understand window.checkoutConfig and whether it is good practice in Magento
1:40

Understand window.checkoutConfig and whether it is good practice 2

Add data to window.checkoutConfig with a checkout config provider in Magento
3:49

Add data to window.checkoutConfig with a checkout config provider 4

Add a CMS block to the sidebar with a checkout config provider in Magento
5:54

Add a CMS block to the sidebar with a checkout config provider

Install a CMS block programmatically in Magento
3:45

Install a CMS block programmatically 6

Custom shipping address attributes

Create a new customer address EAV attribute in Magento
15:10

Create a new customer address EAV attribute 14

Understand how customer EAV attributes are stored in the database in Magento
3:28

Understand how customer EAV attributes are stored in the database

Update the customer address HTML template for a new attribute in Magento
5:52

Update the customer address HTML template for a new attribute 2

Understand how custom customer attributes are rendered at checkout in Magento
4:13

Understand how custom customer attributes are rendered at checkout 2

Scope a shipping address attribute as a custom attribute in Magento
9:57

Scope a shipping address attribute as a custom attribute 4

Add a new frontend attribute as a shipping address extension attribute in Magento
10:29

Add a new frontend attribute as a shipping address extension attribute 8

Add a new backend attribute as a shipping address extension attribute in Magento
2:37

Add a new backend attribute as a shipping address extension attribute 2

Create database columns to store extension attribute data in Magento
5:10

Create database columns to store extension attribute data 3

Save new extension attribute data to the database in Magento
12:16

Save new extension attribute data to the database 6

Hide a custom attribute from the billing address renderer in Magento
6:07

Hide a custom attribute from the billing address renderer 2

Hide a custom attribute from the billing address form in Magento
3:24

Hide a custom attribute from the billing address form

Completion

Downloadable archive of the CustomCheckout module

Implement fun checkout features