How To Customize the WooCommerce Checkout Page With Elementor


In this tutorial, I will show you how to customize your WooCommerce checkout page easily using your WordPress page builder. Easily reduce checkout abandonment and get more sales by creating a sales funnel type checkout page.

Recently Amazon posted that optimizing their checkout increased their revenue and the order success rate. So several other eCommerce companies started to do the same and since they have developers in-house, they can optimize and play with their checkout design whenever they want.

Steps to Customize Your WooCommerce Checkout Page

  1. Install Cartflows Plugin
  2. Import a Design for the Checkout Page.
  3. Edit the Content of your Checkout Page
  4. Edit Form Field of Checkout Page
  5. To Get Premium Features of Cartflows plugin
  6. To Create Upsell and Downsell
  7. To Create Order Bump
Do Subscribe to our Channel
Subscribe to my YouTube Channel

Disclosure: I may receive affiliate compensation for some of the links below at no cost to you if you decide to purchase a paid plan. You can read our affiliate disclosure in our privacy policy.

Customize WooCommerce Checkout Page using Elementor

We have updated this article, now you can customize your checkout page using a free plugin. That allows you to customize the checkout page using Elementor ( Free) Page builder. Download this plugin below and continue with this article.

Some Premium Features will not work in the Free Version.

cartflows pro2

Funnel Builder by CartFlows – Create High Converting Sales Funnels For WordPress 

But small and medium eCommerce sellers were always searching for options on how they can customize their checkout page and make it enjoyable so that the user experience is good and has a great user interface that makes customers checkout their products quickly and without getting confused.

So, good news awaits all the users of WordPress and WooCommerce. Now you can easily design and customize your checkout page and optimize it as per your liking and you don’t need to buy several themes and plugins to do so. All you need is just 1 plugin that does the job.

If you have tried to edit and customize the checkout page, then you have discovered that it’s nearly impossible to design it the way you want, and doing it the coding way is much more difficult, That’s Why we recommend CartFlows

The WooCommerce plugin works using hooks and actions that enable the plugin to start working on any theme that supports WooCommerce without changing anything. 

So if you want to change the design layout or add any functions to your checkout page you need to do the coding way or hire a developer and pay him thousands of dollars. Or you can check our WooCommerce Guides and Tutorials that are written by WordPress Experts from GloriousThemes.

Page Builders to Customize the WooCommerce Checkout Page

If you are using any page builders like Elementor, Beaver Builder, Divi. Then you can use your page builder to design and customize the WooCommerce checkout page.

But to do that you will need another plugin called CartFlows Pro. CartFlows Pro allows you to create a custom checkout page, sales pages, and funnel builder by using your page builder plugin.

Customize the WooCommerce Checkout Page

Cartflows Pro integrates with your page builder and gives you the option to drag and drop your checkout page features and design and to add several other custom features like:-

  • Cart Abandonment
  • Analytics & Tracking
  • Templates For Everything
  • Dynamic Linking
  • Conversion Tested Checkout
  • One Click Order Bumps
  • Unlimited Upsells / Downsells
  • Checkout Custom Fields
  • Global Checkout

Templates Are Made For

  • Elementor
  • Beaver Builder
  • Divi Builder
  • Thrive Architect
  • Gutenberg (Planned)

Ways To Customize The WooCommerce Checkout Page

As of now, you have known the features and powers of CartFlows, but if you think you can edit a woocommerce page and customize it without CartFlows Pro then here is a little comparison on which will be easier and 100% error-free.. 

The 2 ways are

  • Easy Way using CartFlows Pro Plugin
  • Hard Way using coding

The CartFlows Way

Using CartFlows Pro, all you need to do is to install the plugin and activate it. After activation create a flow (the funnel) and import a premade template for your page builder or create one from scratch. 

You can also create Upsells, Downsells, and Thank You pages and customize it too. Once you are done designing and creating your checkout pages.

Click on Publish and your new customized checkout page for woocommerce is ready to be used.

And moreover CartFlows pro also has a Cart Abandonment feature, which means if a buyer doesn’t complete the checkout, their info is passed to your CRM to trigger an email.

Customize WooCommerce Checkout Page

Customize the WooCommerce Checkout Page using CartFlows

Customize WooCommerce Checkout Page

Downloading and Installing CartFlows Pro.

The first thing we need to do is to download CartFlows Pro.  Click the below button to download CartFlows Pro.

After you have downloaded the plugin. Go to wp-admin > Plugins > Add New and Upload the CartFlows Pro plugin.

When activating CartFlows Pro will ask to install its base plugin Cartflows Free Version. Install the Free Version.

Then you need to set up the plugin which we have shown below in the step-by-step process.

Customizing Checkout Page.

The CartFlows provide an interactive way to set up the plugin on 1st activation. The plugin will guide you through a 5 steps process that makes the setup completely easy for non-techies

WooCommerce Checkout Page
WooCommerce Checkout Page cartflows

After installing cartflows you will get a popup like this


Click on the blue button ” Start Wizard” and start the settings process. It’s a 5 step process. So let’s get started.

Step: 1 – Welcome

The first page is a welcome page that welcomes you to the plugin and gives a small introduction on how this plugin can help you generate more sales from your eCommerce and help you customize your checkout page easily.

customize woocommerce checkout page cartflows step 1.png

Just click the “Let’s go” button and proceed to the next step.

Step: 2 – To choose your page builder.

In step:2 you will be asked to choose the page builder plugin that you want to use, If you are using any page builder plugin then select the one from the drop-down.

If you are not using any page builder then I will ask you to use Elementor as your page builder. Elementor Pro has great features that enable you to design, customize, and add functionality to your existing page and even create a new theme all by yourself.

customize woocommerce checkout page cartflows step 2

After selecting the page builder plugin, click on the “Next” button.

Step: 3 – Checkout 

In step 3, cartflows recommends you to use and install the recommended plugins like WooCommerce, WooCommerce Cart Abandonment Recovery.

You need to install and activate those recommended plugins for cartflows to work properly. The plugins will automatically install and activate when you click on Yes.

customize woocommerce checkout page cartflows step 3

Click on the “Yes” button and proceed to the next step.

Step: 4 – Training

In step 4 they offer free training, which I think you don’t need as we have covered in detail how to customize the WooCommerce checkout page Elementor.

customize woocommerce checkout page cartflows step 4

Click on “No Thanks” and proceed to the final step.

Step: 5 – Final and Ready

Now everything is done and ready to be used.

Now we will create our first flow. Flow is a funnel for your sales page. In simple words, we are going to create and design your checkout page, upsells page, down sell page and thankyou page.

customize woocommerce checkout page cartflows step 5

Click on the “Create a Flow” button.

Now we will create a flow for our checkout page.

Creating a Flow in CartFlows – Custom Checkout Page

Flow is basically a sales funnel or a checkout page follows by upsells, downsells, and thank you page. You may keep it simple or use these features to upgrade.

To create a custom checkout page for your WooCommerce website, you need to create a flow in cartflows.

To create a flow, go to wp-admin > cartflows > Flows > add new. A new popup will appear that provides you the option to choose ready-made premium templates.

Since we have CartFlows Pro, we will import the 1st option which is a pro template.

CartFlows create a flow 1

Once the import process is over, you will be redirected to the newly created flow which will look something like this.

cartflows creating flow

Now name the Flow by adding a Title and click on the update button from the right sidebar.

Once the title has been saved, now you need to work on the flow of your customized woocommerce checkout page.

The Flow has 4 steps:

  1. Optin Page / Landing Page
  2. Checkout Page
  3. Upsells and Downsells Page
  4. Thankyou page
cartflow steps

If you want only the checkout page and want to get rig of the optin page, upsells and thank you page. Then click on the delete button on the right sidebar of the steps.

So if you just want the checkout page, you delete the rest of the cartflows steps and click on the update button.

Your checkout page will look something like this.

Edit WooCommerce Checkout Page

Awesome Right. Yeh, I Know. Thank me later.

But wait it will not work right now. Why? because right now you have neither assigned any product for that checkout page nor you made woocommerce to use this custom checkout page instead of the boring one.

Which WooCommerce will continue using the original but boring checkout page.

Assigning Product

So by default CartFlows ask you to assign a product, so that you can have different types of the custom checkout page for each product and offer different upsells, thank you page and other options.

But if you want to use a default custom checkout page for all WooCommerce products then don’t assign any products in this step.

Making WooCommerce use custom Checkout page.

To use a single custom checkout page for all of your products, you need to save and update your current flow and go to CartFlows Settings.

cartflows global checkout

In CartFlows Settings > General Settings, you will find a dropdown with the Global Checkout options, as shown in the pic above.

Select the Flow that you have created right now. You will have only 1 flow, If you are creating for the first time.

Select that flow as your global checkout page and click on “Save Changes“. Your new custom woocommerce checkout page is now ready to be used.

Now test whether your new checkout page is working properly or not. Go to any products on your website and click on “Add to Cart” and proceed to checkout. If you see the newly created page then it means it works. Your WooCommerce payment gateways will be automatically be activated on your custom checkout page.

Do a test purchase and you are ready to rock.

But what if I want to use the Upsells and Thankyou page

Creating UpSells

Creating Upsells is really easy and is divided into 2 parts.

  • Designing the upsells page
  • Assigning a Product for upsells
Designing the upsells page

To Design the upsells page, open the flow and click on the edit link on that upsells column, Like the pic below:-

cartflows upsells edit

After clicking on the edit link, a new page will appear with a “Edit with Elementor” button and some custom fields under “Offer Page Settings“.

cartflows upsells edit design

To edit the design of the page, click on Edit with Elementor and design the upsells page easily with elemetor.

A new tab will open where you can edit the design of the entire upsells page using the elementor drag and drop feature.

cartflows upsells elementor

After you have designed the upsells page it’s time to assign a product for your upsells. So let’s do that now

Assigning a Product for upsells

Assigning a product as upsells is really easy and simple in cartflows. All you need to do is just go to “Offer Page Settings” and click on “Select Product” and type the name of the product you want to assign to the upsells page.

cartflows upsells assign product

As soon as type the name of the product, the plugin will do a quick search and show you the product if you have spelled it right.

cartflows upsells product2

After selecting the product on the Select product field, Click on “Save Changes“. You can also edit the other option like the redirect options if the customer bought the upsell or declined it.

There are several other functions, but I think the default options are well set.

Now your upsells page is ready to use and we will move to the “Thankyou Page“.

Creating ThankYou Page

Editing the Thank you page is similar to the upsells page. To create and design your thank you page, you have to go through 2 steps:-

Step:1 – Designing the Thank you Page

Click the Edit link on the Thank You step in your flow, which will redirect you to a new page.

cartflows thankyou page

Click on the “Edit with Elementor” and edit the design of your thank you page.

Note: while editing you can’t view the details of order when successful. The Order details will only appear when an order is successful.
But I Got a Hack!
Open a New tab and order a product in test mode, when you will be redirected to the thank you page that you have designed now. When you are on the “Thank You Page“, then click on “edit with elementary” link on the top WordPress bar. And Now You can edit your thank you page with all the details shown.

cartflows thankyou elementor

So now, our Thank you page is designed, all we need to do is the settings. So what are you waiting for. Lets get the settings done.

Step:2 – Editing the Settings
cartflows thankyou settings

So now you have choose the options that you want to show in your thank you page. The options are:-

  • Order Overview
  • Order Details
  • Billing Details
  • Shipping Details

So depending on your store type you may show this options. As I have a Digital store that runs on WooCommerce, so for that I don’t need to show Billing details, Shipping details.

So this is how you can Customize WooCommerce Checkout Page by yourself easily without coding.

Customizing WooCommerce Checkout Page using Codes

To be true, I hate the process of designing the checkout page using code, Why?

Because you need to create the HTML, CSS, JS, and then hook the WooCommerce Actions and Filter together so that the page is designed.

And after all, you cannot have the functions of upsells and thankyou page altogether, You need to separately code all those.

So why would you burn your time by doing all those things manually or waste the money by hiring a developer to create those functions?

You get all those things bundled with a drag and drop interface with cartflows. So get CartFlows Pro today.

The Coding Way

If you want to save a few bucks and do all the work the traditional way then you should know how woocommerce codes work.

Just to design the woocommerce checkout pages

 * Add the field to the checkout page
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
function customise_checkout_field($checkout)
  echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
  woocommerce_form_field('customised_field_name', array(
    'type' => 'text',
    'class' => array(
      'my-field-class form-row-wide'
    ) ,
    'label' => __('Customise Additional Field') ,
    'placeholder' => __('Guidence') ,
    'required' => true,
  ) , $checkout->get_value('customised_field_name'));
  echo '</div>';


We have personally found that a custom well-optimized checkout page increased the checkout and users experience. Many big companies are always testing their checkout process and are making them more friendly and optimizing the user experience.

So Its a great way to do that same those big companies are doing just by using a simple plugin that is going to benefit you in the long run.

If you have customized your checkout page then the next thing you should customize is the account page of your woocommerce.

If you have any queries, you can comment below or contact me on social media at Facebook, Twitter and Instagram. You can follow the Author on Facebook , Twitter, Instagram too.

How to Modify woocommerce checkout page

To modify woocommerce checkout page easily without coding download the plugin we mentioned and use it do drag and drop and add elements to design and modify your woocommerce checkout page.

Leave a Reply

Your email address will not be published.


  1. Angéline L says:

    Hello, very interesting article, thank you!
    Small question because I can’t customize my payment page (checkout) of my funnel on cartflow. I would like to remove the title and sidebar. But I customized this page with Elementor and I can’t find the page in the list of WordPress pages. How to do ? Thanks ::)

    ( TRANSLATED: Bonjour, article très intéressant merci ! Petite question car je n’arrive pas à personnaliser ma page de paiement (checkout) de mon tunnel sur cartflow. J’aimerais retirer le titre et la colonne latérale. Or j’ai personnalisé cette page avec Elementor et je ne trouve pas la page dans la liste des pages de WordPress. Comment faire ? Merci ::) )

    1. Hi, The funnels will not show on pages.. It will appear on Cartflows.

      Secondly, you will need to select the Template as Full Width or CartFlows


      ( TRANSLATED: Bonjour, Les entonnoirs ne s’afficheront pas sur les pages. Ils apparaîtront sur Cartflows.
      Deuxièmement, vous devrez sélectionner le modèle en pleine largeur ou CartFlows
      Niraj )