Searching for the easiest way to create checkout page using Elementor Pro?
In the past, you needed to rely on your WooCommerce theme for the checkout page design. Or, you might’ve gone with custom CSS or a third-party WooCommerce checkout plugin.
But with the new Checkout widget in Elementor Pro, you can now fully create checkout page using Elementor Pro and customize it using Elementor’s visual interface and code-free options. This widget works alongside the Elementor Cart.
In this tutorial, we are going to show you how to use Elementor Pro’s Checkout widget to customize and optimize your store’s checkout page without needing to leave Elementor.
While you don’t need to use code if you’re using Elementor Pro’s Checkout widget, these action hooks can be useful if you want to add custom content to your checkout page, such as a set of trust badges that appear below the credit card fields.
How Does the Elementor Pro Checkout Widget Work?
The checkout page is an essential part of any store, so it’s important that you optimize it for conversions and make it as user-friendly as possible.
With Elementor Pro, you can fully customize your store’s checkout page directly from Elementor. This helps you create a consistent design with the rest of your store and optimize key details on your page.
You can change colors, and typography, adjust the spacing, change section and form text, and more. You can make checkout-wide changes or you can enable granular options to apply different styles to specific parts of your checkout page.
How to create the WooCommerce checkout page with Elementor Pro
Now, let’s go into a detailed guide on how you can use the Checkout widget in Elementor Pro to create your store’s checkout page.
Step-1: Edit your store’s default cart page in Elementor
When you make a WooCommerce store, a checkout page is automatically created for your store that uses the WooCommerce checkout shortcode.
In this tutorial, you can use that same page for simplicity. Only, instead of relying on the WooCommerce shortcode, you’ll edit the page in Elementor and add the Checkout widget.
To get started, go to the Pages list in your WordPress dashboard and locate the checkout page. WooCommerce will automatically mark it with an identifier that says “Checkout Page”.
When you’ve found the correct page, click the Edit button to open the WordPress editor.
Once you’re inside the editor, click the Edit With Elementor button to enable Elementor for this page and launch Elementor’s editor.
Step-2: Replace the WooCommerce checkout shortcode with the Elementor checkout widget
When you open the default cart page in Elementor, you will see a very simple design. The only elements on the page will be the [woocommerce_checkout] shortcode inside of an Elementor Text Editor widget.
To use Elementor to control your checkout, first, you have to delete the existing widget/shortcode.
Then, add the Elementor Checkout widget in its place. Once you add the Checkout widget, you’ll see a live preview of the checkout page right in the editor.
⇒ Note – because the Elementor editor gives you a visual preview that perfectly matches what your website’s visitors will see, you have to add some items to your shopping cart so that you can see what the actual checkout process looks like. Here’s all you need to do:
- Go to the frontend of your store.
- Add some items to your cart.
- Reload the Elementor interface.
Once you reload Elementor, those items should appear in the checkout summary while you’re working on your design.
Step-3: Customize the general settings of your checkout page
It’s time to start customizing. To begin, open the settings for the Checkout widget in the Elementor sidebar.
Let’s first go through all of the settings in the widget’s Content tab.
Go to General> One-Column/Two-Column Layout
You can use the General settings area to choose between a one-column or two-column layout for your checkout page.
If you choose a two-column layout, you can also make the right column sticky. If you enable the sticky right column, you get an additional option to add an offset, which helps you avoid your header overlapping with the column.
Billing and Shipping Details
The Billing and Shipping Details section lets you customize the billing and shipping form details as you want.
First, in this section, set the section title and alignment.
Then, you can open the settings for each individual field to customize the labels and placeholders.
The Additional Information section lets you customize this area of the checkout page. By default, this is where shoppers can leave special order notes. Upon your store’s setup, you can see additional details.
You can customize the alignment and labels of this section as with the other sections of your checkout page.
Or, you also have the option to hide this section from the checkout page, which might be useful if shoppers don’t need to leave custom notes.
The Your Order settings let you customize the order summary part of the checkout. If you use a two-column layout, this section will appear at the top of the right-hand column. In a one-column layout, it will appear below the billing and shipping details.
The Coupon settings also let you customize the coupon section title and alignment. However, you also get an option to customize the link text for applying the coupon code. This can help you create a more optimized and user-friendly experience for shoppers who are applying coupons.
The Payment settings let you change the alignment of the purchase button and also customize the terms and conditions message and link text.
In order to see the terms and conditions message, you’ll need to have set the terms and conditions page in your WooCommerce settings. To simplify things, you can select this page without leaving Elementor:
- Click the hamburger menu icon in the top-left corner of the Elementor interface.
- Select Site Settings.
- Select WooCommerce.
- Use the Terms & Conditions field to search for and select the right page for your terms and conditions.
Allow guest checkout in WooCommerce’s settings and you’ll get an additional settings area called Returning Customer that lets you customize the message that prompts returning customers to log into their existing accounts.
Customize your checkout page using the Style tab
Step-4: Customize Your Checkout Page’s Style Settings
Next, move to the Style tab of the Checkout widget’s settings to further customize the style and design of the checkout page, including making sure it matches the rest of your store’s design.
In the different settings area, the general design options you can configure:
In the Sections settings, you can control the overall style of all the different checkout parts.
For example, if you change the background color, it will affect the background of all the sections. You can also adjust the border and spacing as needed.
In the Typography settings, you can customize the colors and typography of most of the text on your checkout page, including titles, secondary titles, descriptions, messages, radio buttons, checkboxes, and more.
In the Forms settings, you can control everything about your checkout page’s forms and form fields, which primarily affects the billing/shipping fields and coupon form.
You can adjust the columns and rows gap for the various form fields. You can also customize the typography of labels and fields, as well as adjust spacing, borders, and backgrounds.
Beyond that, you also get an option to style the coupon button, just like any other button on your site.
In Order Summary, you can control the rows, which affects the spacing in the list of items in a shopper’s cart.
You can also control the colors and typography of the different summary items. For example, you could use one typography setting for the items and a different one for the order totals.
In the Purchase Button settings, you can fully customize the purchase button, including typography, colors, spacing, borders, and more.
This is probably the most important button on the checkout page, so you’ll want to make sure that it’s attention-grabbing and matches the rest of your design.
Lastly, the Customize item lets you add individual styling controls for specific parts of your checkout page. You can add them to the following areas:
⇒ Billing Details
⇒ Additional Information
⇒ Shipping Address
⇒ Order Summary
For example, you might want to make the order summary stand out from the rest of the checkout page by adding a custom border.
You could do this by enabling the Customize settings for the order summary area and configuring them according to your preferences.
All done! You have successfully created checkout page using Elementor Pro.
We have shown you above how to create checkout page using Elementor Pro which might help you a lot. You can use it for your own online store and make a satisfied group of customers that will drive more.
Thank you for reading this article patiently. Have a nice day.