In this tutorial, I´m going to show how to create a checkout page using Elementor and customize it to match the look and feel of your WooCommerce Shop.

I’ll show you how to style the different sections of the checkout page, hide some checkout fields, and enable payment gateways on your checkout page among others. If this is something you’re interested in then, read on!

This article is part of my Elementor + WooCommerce series where I show you how to create an eCommerce shop using Elementor and WooCommerce. In the previous articles, I shared how you can create a single product template, a products archive and a cart page using Elementor. Feel free to check them out after this.

Ps: Below is a step-by-step video tutorial you can follow along with.

Video: Create a Checkout Page using Elementor

First, I would like you to check out this checkout page that comes with WooCommerce when you install it, just a basic page.

To make it more appealing to our customers, we’re going to use Elementor to spice up things.

What you’ll need to Create a Checkout Page using Elementor Page Builder

To create a Checkout page you need Elementor Pro. Alternatively, you may also use Elementor Cloud.

If you have any of those ready, let’s get started.

Begin by opening up your WordPress dashboard. Under Pages, find the WooCommerce checkout page and delete it. We are getting rid of it because using WooCommerce default pages while editing with Elementor causes some layout issues/conflicts. So we’re better off just creating a new page.

Create a checkout page

After deleting the WooCommerce checkout page, click the Add New button to create a new page, give it a name; Checkout, then click the Publish button and then the Edit with Elementor button.

When your Elementor opens up, go to the Cart page previously created and copy the container with a hero section then paste it on the checkout page.

The page should automatically update to checkout. And since the heading was already styled on the cart page, we do not need to make any changes to it.

Click the plus (+) to create a new container, then from the Widgets area on the left find the  Elementor checkout widget and add it to the container.

The next thing we do is style our checkout content (titles, buttons, text, etc). Note that I already have global stylings set up to use on this website.

Select the main container and go to Advanced > Padding, unlink the padding values then add 40% at the top and bottom.

Select the Checkout widget, in the Edit checkout section on the left, under Content > Layout, you can choose to use either 1 or 2 columns, we’re using 2 columns. You can also turn on the Sticky right column option too so that your client can see their totals even when they scroll.

Under Billing options, you can add any other fields you may want your clients to fill in for billing.

On the Additional information option, you may choose to show or hide show the option.

Over to the Your order option; this shows a summary of the client’s order.

And lastly, we have the Coupon section which enables your client to apply a coupon to their order and the Payment section where they accept terms and place their order.

Go to the Style tab to check out the different styling options;

Under the Sections options, you can edit how you want the different sections to look. 

For example, you can the Background colour to white, and add a Padding of 35% on all sides. You can also go ahead and add margins, borders, etc if you want.

Under Typography, you can go through the different sections like the Titles, links, checkboxes, messages, radio buttons, etc, and set up what colours and fonts you want them to have. 

For example for the Titles, set the colour to black and choose your Title font style.  

There’s also a section for Forms, Order Summary, and Purchase button, which you can go through and style to your preference. 

When you’re done with the styling, click the Update button and then preview.

In the Responsive Mode at the bottom left, you can check through the different devices (tablet, mobile) to make sure your checkout page is fully responsive.

Disable or hide checkout fields

By default, the checkout widget comes with a bunch of fields to be filled by your client. However, these might require too much more information than you may need from your clients, in which case you may want to hide or disable some of these fields. This is what we’re going to look at.

#1. Disable or hide checkout fields via your customizer

Note that some themes like Astra enable you to disable the fields you want from the customizer. 

Let’s try this out:

Open your WordPress dashboard and go to Appearance > Customize, then go to WooCommerce > Checkout.

In the checkout settings, you’ll find some options that you can disable if you don’t want them, that’s the Company name, Address line 2, and phone option. You can just click on each and choose Hidden, or you can even just make the Optional.

When you’re done click the Publish button at the top. And when you go back and reload your checkout page, you’ll see that your changes have taken effect; whichever field you chose to hide is now gone, and if you made one optional, it should have the word “optional” on it.

And if you decide you now require any of the fields, you can always just go through the same process and restore it.

#2. Disable or hide checkout fields by adding a custom function

The other way you can get rid of the fields you don’t want on your checkout page is by adding a custom function to your function.php file.

Let’s attempt this by hiding the Address field. 

Note: If you’re using Elementor cloud, it does not allow you to edit your theme files directly. You’ll need to go to your Plugins and install the Theme Editor which will enable you to do this. You can deactivate and uninstall the theme editor after using it.

Proceed by going to Appearance > Theme Editor, and selecting the functions.php file.

Go to the very last line of your code ad add the function that will remove all address fields on the checkout page. And when you’re done click the Update file button.

/**
Remove all address fields on checkout page
**/
function wc_remove_checkout_fields( $fields ) {
// Billing fields
unset( $fields['billing']['billing_state'] );
unset( $fields['billing']['billing_address_1'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['billing']['billing_city'] );
unset( $fields['billing']['billing_postcode'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Back to the checkout page, reload and you’ll see that all the address fields are gone.

Tip: Which fields on your checkout page should be necessary/required depends on the type of business you run. For example, if you sell digital products, you probably don’t need address fields on your checkout.

Enable Payment Gateways on your Checkout Page

For your clients to be able to make their payments, you need to configure your payment gateways. This is our next task.

Go back to your WordPress dashboard and go to your WooCommerce settings, then click on Payments.

Under Payments, there are several available payment options. 

For example, WooCommerce payments require you to create an account on the WooCommerce website to enable it, there’s also an option for cash on delivery, checks and direct bank transfers.

In this case, enable the cash-on-delivery option then save changes.

Go back to your checkout page and reload it, and you should have the cash-on-delivery option showing in the payments section.

You can select cash on delivery, accept the terms and conditions then place your order. 

And when you go back to WooCommerce on the WordPress dashboard and go to Orders, you’ll find one placed order processing. And when you click on the order you’ll be able to see all the details.

Add Checkout Page to Menu

Back to your dashboard, go to Appearance > Menus, select the main menu then go to Pages and select the checkout page and add to menu, position it where you want it then save changes.

And when you reload your page you’ll find the checkout item on your navigation menu.

Assign Checkout Page to WooCommerce

Go back to your Elementor and click the hamburger icon (☰) in the upper left corner then go to Site Settings > WooCommerce.

Go to the checkout page option and select your checkout page then click the Update button.

In closing,

That’s how you can create a checkout page for your WooCommerce shop using Elementor and customize it to best suit the specific needs of your brand.

For any comments or questions please use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.