Customize the Magento 2 Checkout course image

Customize the Magento 2 Checkout

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

37 lessons

3h 35m

View enrollment options

Everyone wants to modify the Magento checkout, but no one quite understands how. It's sort of a "black art". The intention of this course is to tackle the M2 checkout head-on, with real-life working examples.

This advanced course goes into detail about the layout & rendering process, tapping into the checkout steps & actions, extending UI components & templates, hooking dynamic CMS blocks into checkout areas, input field validation & sanitation, as well as creating custom attributes & saving them to quotes & orders.

Meet Mark, the course teacher

“Thanks to this checkout course, I was able to close multiple checkout-address-related issues today that I've been struggling with for like 2 days straight during last working week. It amazes me how your simplification framework works, everything just becomes crystal-clear and obvious.”  

Course curriculum

Each video lesson can be played back & referenced as many times as you wish at slow or fast speed, tech-friendly closed captions, and includes full source code.

Includes English captions, and Spanish translations provided by Google Translate

37 lessons

3h 35m

Checkout initialization

Intro & prerequisites
Free preview
Intro & prerequisites
Prepare your Magento environment for checkout development
Free preview
Prepare your Magento environment for checkout development
Overview of the checkout layout rendering process
Free preview
Overview of the checkout layout rendering process
The bootstrapping process of Magento’s checkout
The bootstrapping process of Magento’s checkout
Create the skeleton of a custom checkout module
Free preview
Create the skeleton of a custom checkout module

Checkout address form fields

Determine position of shipping address checkout fields
Determine position of shipping address checkout fields
Reorder checkout field positions with XML
Reorder checkout field positions with XML
Reorder checkout field positions with a custom layout processor
Reorder checkout field positions with a custom layout processor
Customize the customer configuration options for checkout
Customize the customer configuration options for checkout
Add a built-in validation rule to a checkout address field
Add a built-in validation rule to a checkout address field
Add a custom input mask to a checkout field
Add a custom input mask to a checkout field

Checkout steps

Add a new step to the checkout header
Add a new step to the checkout header
Create a button to navigate to the next checkout step
Free preview
Create a button to navigate to the next checkout step
Move a component to another checkout step
Move a component to another checkout step
Disable or remove a checkout UI Component
Disable or remove a checkout UI Component
Validate component field on form submission
Validate component field on form submission
Refactor custom component code to use a core method
Refactor custom component code to use a core method
Add a step to the end of the checkout process
Add a step to the end of the checkout process

Modifying checkout components & templates

Understanding regions and displaying components within loops
Understanding regions and displaying components within loops
Move a component to an existing checkout region
Move a component to an existing checkout region
Style a repositioned checkout component
Style a repositioned checkout component
Move a component to another checkout region
Move a component to another checkout region
Alternative method of overriding Knockout.js templates
Alternative method of overriding Knockout.js templates
Extend a custom checkout UI component
Extend a custom checkout UI component
Show the view/edit cart link in the sidebar
Show the view/edit cart link in the sidebar
Create a custom checkout UI Component for logged in users
Create a custom checkout UI Component for logged in users
Add a new UI Component to Order Summary component
Add a new UI Component to Order Summary component
Customize the email step for logged in users
Customize the email step for logged in users

Checkout config providers

What is window checkoutConfig and is it a good practice?
What is window checkoutConfig and is it a good practice?
Add to window checkoutConfig with a checkout config provider
Free preview
Add to window checkoutConfig with a checkout config provider
Add a CMS block to the sidebar with a checkout config provider
Add a CMS block to the sidebar with a checkout config provider
Install a CMS Block programmatically
Install a CMS Block programmatically

Custom shipping address attributes

Create a new customer address EAV attribute
Create a new customer address EAV attribute
How customer EAV attributes are stored in the database
How customer EAV attributes are stored in the database
Update the customer address HTML template for a new attribute
Update the customer address HTML template for a new attribute
How custom customer attributes are rendered at checkout
How custom customer attributes are rendered at checkout
Scope the shipping address attribute as a custom attribute
Scope the shipping address attribute as a custom attribute
Add the new attribute as a shipping address extension attribute in the frontend
Add the new attribute as a shipping address extension attribute in the frontend
Add the new attribute as a shipping address extension attribute in the backend
Add the new attribute as a shipping address extension attribute in the backend
Create database columns to store extension attribute data
Create database columns to store extension attribute data
Save new extension attribute data to the database
Save new extension attribute data to the database
Hide a custom attributes from the billing address renderer
Hide a custom attributes from the billing address renderer
Hide a custom attributes from the billing address form
Hide a custom attributes from the billing address form
This course retails for
$ 299
* Individual course enrollment no longer available.
Enroll in the University to access this course 👇
Graduation cap on M.academy

University

Get access to all current & future courses at M.academy.
Learn more & enroll

“Thank you so much for the wonderful course. The way you drill down the checkout process is awesome. It helps me understand the whole checkout, UI component, and extending core JavaScript processes. I appreciate you helping us with your knowledge.”  

Frequently asked questions

Who is this course meant for?
This course was designed to be consumed by developers with a working knowledge of Magento 2 who want to advance their knowledge of the advanced areas of the Magento checkout. It is not intended for those new to Magento 2 programming.
What do I need to know to take this course?
Those new to Magento should first becoming familiar with Magento core development. Before taking the course, they should also have a solid understanding of JavaScript Development Fundamentals as well as Frontend UI Components in Magento 2.
Attempting to take this course without a solid understanding of all of these prerequisites will inevitably lead to failure.
Do I need a development environment setup?
Yes, this course assumes you have a running development environment of Magento setup and running locally. If you don't already have a development environment setup, please set one up before enrolling in the course. M.academy has a free course, Set Up a Magento 2 Development Environment with Docker.
What version of Magento is this based on?
This course was created using concepts featured in Magento version 2.4. If a new best-practice approach is introduced in a future version of Magento 2, the course will be updated appropriately.
This course comes with access to Maggie, your personal Magento tutor!

Maggie Bolt 💁‍♀️

Hi, I'm Maggie! 👋

Your dedicated Magento 2 mentor, on-hand 24/7 within all premium courses to help guide you through your learning journey.

Read more about Maggie
Maggie's avatar