How to Customize WooCommerce Checkout With Elementor

WooCommerce checkout with Elementor can match the rest of your store, but making it convert well takes more than a design change.

Think about a store that redesigns its checkout counter, moves the card reader somewhere easier to reach, and puts up clearer signs.

It looks better, but if the cashier still asks every customer for information they don't need, the line will still move slowly.

That extra friction can cost you sales.

A better-looking checkout can build trust, but removing unnecessary steps and making the next action clear helps more shoppers finish their order.

Elementor handles the design side well.

But if you want more control over the checkout itself, a dedicated checkout builder gives you more options to change fields, create multi-step layouts, and add order bumps without piecing everything together yourself.

We'll start with what you can do with a checkout builder, then move on to Elementor Pro's built-in Checkout widget and a common Checkout block issue that can catch newer stores off guard.

Then we'll look at options like editing checkout fields and using a checkout builder for multi-step layouts and order bumps.

Here's a complete tutorial if you prefer watching videos over reading:

What is the Elementor Checkout widget?

The Checkout widget is one of the WooCommerce widgets included with Elementor Pro.

It replaces the [woocommerce_checkout] shortcode on your checkout page, so you can build and customize the entire checkout visually in the Elementor editor.

Elementor gives you control over how the checkout looks.

You can change the layout, section titles, field labels and placeholders, colors, fonts, spacing, and the Place Order button.

The checkout form itself still comes from WooCommerce, so the fields, their order, and the standard single-page flow remain largely the same.

That's where a checkout builder gives you more control. Instead of only changing how the existing WooCommerce checkout looks, a checkout builder can change the checkout structure itself.

Depending on the tool you use, you can remove or reorder fields, create multi-step layouts, add custom fields, and include offers such as order bumps.

You can still use Elementor for the design when the builder supports it. That gives you control over both sides of the checkout: how it works and how it looks.

The Elementor Checkout widget can make the checkout match the rest of the site, but it doesn't give you the same control over checkout fields and flow that a dedicated checkout builder does.

3 Ways to Customize Your Checkout in Elementor (Free and Pro)

There are three main ways to customize a WooCommerce checkout with Elementor.

Which one makes sense depends on whether you only want to change the design or need more control over the checkout itself.

1. Use a checkout builder

A dedicated checkout builder gives you control over more than just the design.

Depending on the builder, you can edit, remove, or reorder fields, create multi-step checkouts, add order bumps and upsells, and run A/B tests.

Many checkout builders also work with Elementor, so you can still use Elementor (free) to design the page.

2. Style it with Elementor Pro's Checkout widget

This built-in option comes with Elementor Pro. It lets you change the checkout layout, labels, spacing, colors, fonts, and other design elements, but it offers little control over the checkout fields or steps.

If your main goal is to make the checkout match your brand, this may be all you need.

3. Use a free add-on or the Shortcode widget

You don't need Elementor Pro for this approach. Some free Elementor add-ons include their own checkout widget, while Elementor's free Shortcode widget can display the WooCommerce checkout with added CSS for styling.

This approach can give you a clean result, but you'll generally face the same limits when it comes to changing checkout fields and the checkout flow.

If you're comfortable with PHP, you can edit your checkout page with WooCommerce hooks and filters. But this guide focuses solely on Elementor, so we won't cover this code method.

If you need a high-converting checkout with custom fields, optimization, order bumps, and conditional form fields, option 1 is more practical.

However, if you only need the checkout to match the rest of your store, option 2 is enough, and you don't need another plugin.

Before You Start: Requirements and the Checkout Block

Before you start customizing your WooCommerce checkout, check which checkout your store is using and which approach you want to take.

What you need

At a minimum, you'll need:

• WooCommerce with at least one payment method enabled.
• Elementor if you want to design the checkout with Elementor.
• Elementor Pro if you want to use Elementor’s built-in Checkout widget. You won't find this widget in the free version.
• A checkout builder (like FunnelKit Funnel Builder) if you want to change the checkout fields, create a multi-step layout, add order bumps, or make other changes beyond the standard WooCommerce checkout.
• Compatible theme, such as the Hello theme.
• A staging site or recent backup because you'll be working on the page where customers enter their details and pay, so it's worth having a fallback before you start.

Is your store using the Checkout block or the classic checkout?

Most tutorials skip this step. Since WooCommerce 8.3 (November 2023), new stores get the block-based Cart and Checkout by default.

Older stores that were using the classic [woocommerce_checkout] shortcode kept it after updating.

This matters because Elementor's Checkout widget works with the classic checkout. A checkout builder like FunnelKit handles both checkouts efficiently.

To check, go to Pages ⇨ All Pages, open your checkout page.

• If you see a Checkout block with editable sections like Contact information and Shipping address, you're on the block checkout.
• If you see a Classic Shortcode block or [woocommerce_checkout], you're on the classic checkout.

If you replace the page content with Elementor's Checkout widget, you'll be moving from the block checkout to the classic WooCommerce checkout.

Before doing that, check whether your payment gateway and other checkout extensions support the classic checkout.

If you want a simple fallback, you can convert the Checkout block to a classic shortcode before opening the page in Elementor.

In List View, select the Checkout block, open the Block Transform menu, choose Classic Shortcode, and update the page.

You can switch back to the block checkout later if you need to.

If you’re customizing the checkout without Elementor, see our guide to customizing the WooCommerce checkout page.

Method 1: Using Checkout Builder to Customize Your Page with Elementor

To build a fully customized WooCommerce checkout page in Elementor with multi-step layouts, field editing, express checkout, and conversion elements, we'll use FunnelKit Funnel Builder.

FunnelKit offers a free version that includes Elementor-compatible checkout page templates you can import and customize.

The Pro plan adds one-click upsells, order bumps, A/B testing, and advanced field editing.

Get a copy of FunnelKit’s Funnel Builder by clicking on the button below.

Install and activate the Funnel Builder plugin on your WordPress website.

Follow the step-by-step instructions to customize the WooCommerce checkout page with Elementor.

Step 1: Create a store checkout

Go to FunnelKit ⇨ Store Checkout and click the ‘Create Store Checkout’ button.

You'll be directed to the templates page.

In addition to Elementor, FunnelKit integrates with page builders like Bricks, Divi, Oxygen, Gutenberg, and others via checkout shortcodes.

If you like any template, click 'Preview' next to it.

Take the full preview of this template here. Choose the number of steps for your checkout page layout: one-step or multi-step (two or three steps).

We will import the two-step Minimalist template for our WooCommerce Elementor checkout page here.

Clicking on ‘Done’ will import your store checkout.

Step 2: Edit the design in Elementor

Click on the page to start editing your WooCommerce checkout with Elementor.

You'll get inside the Checkout customization area.

On the Design tab, click 'Edit Template' to start customizing your checkout page with Elementor.

This page will load in Elementor.

You can now start customizing your checkout page using different Elementor widgets.

Business logo

Start by changing the icon on your checkout page. To do this, click on the icon and upload a new image from the URL or media.

Progress bar

You get access to FunnelKit's checkout form widget for Elementor. Here, enable the steps and format them as breadcrumbs or tabs.

Here, you'll also find the option to modify the titles of your checkout steps:

Shipping address field widths

Next, adjust the field widths of your checkout form.

Go to the ‘Customer Information’ or ‘Shipping Address’ section. You'll find options to adjust the widths of your shipping and billing address fields to full, one-half, one-third, or two-thirds.

The 'Style' section on the left-hand panel lets you change borders, colors, field width, and more.

Mini cart section

Customize the cart section by clicking on the mini cart widget (this is the second checkout widget built by FunnelKit).

Next, enable the product’s images and quantity switcher, and allow deletion if you want shoppers to modify their cart items.

Coupon section

You can enable or disable the coupon field at checkout and make it collapsible.

You can even change the coupon text using the button.

Checkout button

Under the ‘Content’ tab, update the checkout button's text and subtext, and enable the icon and price.

Elementor's extensive styling options let you customize the button to match your brand colors.

Under the ‘Style’ tab, you can customize your checkout button's typography, including the font family, font color, icon color, button color, padding, margin, and more.

Assurance and testimonials

Change the text on the assurance and testimonials element of your WooCommerce Elementor checkout page.

All you need to do is click on the element and change its text from the left-hand side menu of this Elementor widget.

Hit 'Publish' to save the design changes of your WooCommerce Elementor checkout page.

Step 3: Edit the checkout fields

Back in FunnelKit, open the Design tab and scroll to Checkout Form Fields. Here you can:

• Add new sections and drag them into a different order.
• Drag fields between sections, for example, email to the very top.
• Add fields (text, checkbox, radio, HTML, and more), or edit and remove existing ones.

You can add new sections and rearrange them. Then, you can add, remove, or edit the fields within these sections.

To add a new field, click the option in the right-hand panel. Here's a list of field types you can choose from:

Click ‘Save Changes’ to lock in your changes.

Check out our detailed post on customizing WooCommerce checkout form fields.

Step 4: Turn on the optimizations you need

Streamlining your checkout page to speed up conversions should be your number 1 priority.

That’s why FunnelKit offers several checkout optimization options.

Some of them include:

• Express payments - Enable one-click express payment options like Google Pay and Apple Pay.
• Google address auto-completion - Enable address auto-suggestions as users start typing in the address field.
• Auto-apply coupons - Enter the coupon code and have it automatically applied to incentivize your shoppers to purchase.
• Multi-step field preview - Skip back to the previous step and show a preview of the fields your users entered on the next step.

And so many options.

Go to the Optimizations tab and enable the necessary ones on your checkout page.

👉 Check out the complete checkout page optimizations here in this post.

Step 5: Add attractive order bump offers to your checkout page

Offering attractive order bumps on the checkout page helps boost the average order value in your WooCommerce store.

That's why you should always offer complementary items to the shoppers on the checkout page.

Return to your funnel and click ‘Add Order Bump’ below your checkout page.

Next, enter your order bump name.

Next, choose the design of your order bump offer.

Now, add the items to your order bumps by clicking on ‘Add Products’ on the Products tab.

Feel free to add multiple items here. Once you’ve added your order bumps, you can offer discounts, change quantities, and more in the 'Products' tab.

👉 We have a dedicated post to customize your order bumps' design, copy and style.

You can even add rules to your order bumps that appear only at your store checkout. Thus, setting up rules to offer a relevant and complementary product is quite a smart strategy.

Since you're designing a global checkout, these rules can regulate the bumps on the checkout page.

To do that, go to the Rules tab.

Next, add the rules for your order bumps.

For example, we’ve added the ‘Health’ cart category as a rule to trigger the order bump.

Now, these products will appear as order bumps when a shopper adds an item from the Health category to their WooCommerce cart.

This way, you can add relevant product recommendations on the WooCommerce store checkout page.

Once you’ve saved all your changes, go back to the funnel.

Click on the 'Enable Store Checkout' button to activate.

This will activate the store checkout and replace the default WooCommerce checkout page.

Here’s what the store checkout page looks like:

Well done! You have successfully created your WooCommerce checkout with Elementor and FunnelKit.

Method 2: Edit the WooCommerce Checkout Page With Elementor Pro

If you want to customize the existing WooCommerce checkout with Elementor Pro, you can edit the checkout page directly and replace its current checkout content with Elementor's Checkout widget.

The steps below follow Elementor's Checkout widget documentation.

Step 1: Open your checkout page in Elementor

Go to Pages ⇨ All Pages and click on the Checkout Page in the list.

Next, click on the 'Edit with Elementor' button.

Step 2: Replace the shortcode or checkout block with the checkout widget

Remove the content currently displaying your checkout. On older stores, this is usually a [woocommerce_checkout] shortcode. Newer stores may have the WooCommerce Checkout block instead.

Search for Checkout in the Elementor widget panel and drag the Checkout widget onto the page.

Your checkout should appear in the editor preview.

Step 3: Edit your checkout page

One or two-column layout

In the Content tab, open General:

• Layout: One column or two columns. Two columns put customer details on the left and the order summary on the right, and stack into one column on mobile.
• Sticky Right Column: Keeps the order summary in view while shoppers scroll through the form.
• Offset: Adds space at the top of the sticky column so a sticky site header doesn't cover it.

Let's use two columns with the sticky right column on, so the order total stays visible while shoppers type their address.

Edit section titles, field labels and placeholders

• Billing Details and Shipping Details: Change the section title and alignment, then open each field to change its label and placeholder. Each field's advanced options also let you set a default value.
• Additional Information: Rename this section or hide it. If you don't need order notes, hiding it gives shoppers one less thing to read.
• Your Order: Change the order summary title and alignment.

Billing and shipping show as one combined section if WooCommerce is set to ship to the billing address only.

Here, we kept Additional Information visible and renamed it "Delivery notes".

Style the forms, order summary and place order button

Switch to the Style tab:

• Sections: Set the background, border, and spacing for every section at once.
• Typography: Titles, descriptions, messages, radio buttons, and checkboxes.
• Forms: Column and row gaps, label and field typography, field borders and backgrounds, and the coupon button.
• Order Summary: Row spacing and separate typography for line items and totals.
• Purchase Button: Typography, colors, spacing, and border for the Place Order button, including the hover state.
• Customize: Section-by-section overrides for Billing Details, Additional Information, Shipping Address, Order Summary, Coupon, and Payment. Use it when one area needs to stand out, for example, a bordered order summary.

Pull colors and fonts from your Elementor global settings instead of typing hex codes, so the checkout updates whenever the rest of the site does.

Here, we've set the Place Order button to the green Add to Cart button, so it looks like the same button shoppers have been clicking all along.

Tablet and mobile layout

Switch to responsive mode with the device icons and check each breakpoint. On mobile, make sure:

• The Place Order button is full width and easy to tap.
• Field spacing isn’t cramped.
• Input text is at least 16px. iPhones zoom into form fields with smaller text, so the page jumps every time a shopper taps a field.

Step 4: Publish and confirm it's your checkout page

Click Publish. If you built a new page, Elementor will ask if you want to set it as your default checkout page. Accept it.

Then confirm the assignment under WooCommerce ⇨ Settings ⇨ Advanced ⇨ Page setup and set it up next to Checkout page.

For a distraction-free checkout with no header or footer, set the page layout to Elementor Canvas before you publish.

Step 5: Place a test order

Before real shoppers reach the new page, place a test order. We ordered the Monstera with a coupon applied, shipping to an address different from the billing address. Run the same checks on your store:

• Switch your payment gateway to test mode (Stripe and PayPal both have one), or install the free WC Order Test plugin for a dummy gateway.
• Try a private browser window while logged out, then again as a logged-in customer.
• Check it on a real phone, not just in the editor preview.
• Apply a coupon and use a shipping address that differs from the billing address.

Note: For a full pre-launch checklist, see our guide to testing your WooCommerce checkout.

What the Elementor Checkout Widget Can't Do (And How to Work Around It)

The Elementor Checkout widget gives you a lot of control over how the WooCommerce checkout looks, but it has limits when you want to change how the checkout works.

For example, you can change existing field labels and placeholders, but you can't use the widget itself to add a new field, remove an existing one, or change the checkout into multiple steps.

Here's where the main limits are:

If you only need to restyle the existing checkout, these limitations may not matter.

But once you want to change the fields, checkout flow, or add conversion features, a dedicated checkout builder in Method 1 becomes much more useful.

7 Best Practices to Boost Conversions of WooCommerce Elementor Checkout Pages

Boosting conversions on WooCommerce checkout pages helps maximize sales for your online store.

Here are 7 best practices to help enhance your store’s conversion rates and streamline its buying process:

• Simplify the checkout process

Ensure that your checkout process is easy, intuitive and streamlined. Minimize unnecessary steps or fields that could cause confusion or friction.

You can implement address autofill, express checkout, etc. The easier the checkout process, the higher your WooCommerce store's conversion rate.

• Display trust and security signals

Build shoppers' trust by displaying trust badges and security seals on the WooCommerce Elementor checkout page.

Include popular trust seals like SSL certificates, payment security badges, and payment gateway logos. This shows users that your store is a secure place to shop.

Encourage customers to leave reviews after purchase and demonstrate positive feedback to reassure potential buyers. Social proof helps build trust and credibility for your products and WooCommerce business.

• Optimize for mobile devices

Mobile users drive most traffic to eCommerce stores. Therefore, optimizing your WooCommerce store helps deliver a seamless experience across different screen sizes and devices.

Ensure that your checkout is responsive, loads quickly, and has a user-friendly interface on mobile devices.

• Offer multiple payment methods

Your WooCommerce store should cater to your diverse customer base by offering multiple payment options.

In addition to credit and debit cards, consider integrating with express checkouts and local payment methods. A Stripe payment gateway plugin for WooCommerce can help you set up multiple payment methods.

• Enable guest checkout and make account creation optional

Many shoppers abandon checkout when they must create an account.

That's why you should allow guests to complete their purchase with just an email address. If you want customers to create accounts, make it optional with a simple checkbox at checkout that says, "Create an account for faster checkout next time".

• Display order summary throughout the checkout process

On a two-column desktop layout, keep the order review section sticky so customers can see what they are buying while filling in form fields.

On a multi-step checkout, include a collapsible order summary at the top of each step.

Hiding the order total until the final step creates uncertainty and increases the chance of abandonment.

• A/B test different checkout layouts and elements

Small changes, such as switching from a single-page to a multi-step checkout, changing the button color or text, repositioning the coupon field, or adding an order bump, can have a measurable impact on conversion rates.

Therefore, A/B test one variable at a time and let the data guide your decisions.

You can even measure which variant performed better and declare the winner.

Elementor checkout not working? Here's How to Fix It

If your WooCommerce checkout with Elementor isn't loading or behaving as expected, work through these checks in order.

Start with the simple ones before digging into plugins, JavaScript, or theme conflicts.

1. The Checkout widget is missing from the Elementor panel

• Elementor Pro isn't active or connected: Pro widgets show a lock icon until your license is connected.
• WooCommerce is inactive: The WooCommerce widgets only appear when WooCommerce is running.
• The widget was switched off: Check Elementor ⇨ Element Manager. It can deactivate individual widgets, and it's easy to forget someone did.

2. The checkout page is blank, or the order review keeps spinning

Start with the cart. If it's empty, the checkout may appear blank or redirect back to the cart. Add a product and reload the page.

If there are products in the cart, check these next:

• Two checkout forms on one page: Leftover Checkout block content alongside the Elementor Checkout widget can cause conflicts. Keep only the checkout you intend to use.
• JavaScript errors: Open your browser console (F12) and look for red errors. WooCommerce updates parts of the checkout through AJAX, so a JavaScript error can stop the order review from updating.
• Script optimization: Performance plugins that delay, combine, or otherwise modify JavaScript can interfere with checkout scripts. Exclude the checkout page from these optimizations and test again.

3. Your theme's styles override the widget

Some themes add their own WooCommerce CSS, which can override Elementor's checkout styles.

To check whether your theme is responsible, test the checkout on a staging site with the Hello theme. If the problem disappears, the theme is likely causing the conflict.

You can then increase the specificity of your custom CSS or disable the theme's WooCommerce styling if it provides that option.

After making changes, regenerate Elementor’s CSS under Elementor ⇨ Tools ⇨ Clear Files & Data.

4. Payment methods or express pay buttons don't show

First, check that the payment gateway is enabled under WooCommerce ⇨ Settings ⇨ Payments.

Then check whether the gateway has any requirements based on:

• Customer location
• Currency
• Minimum order value
• Product or order type

For express payment buttons, check the payment plugin’s settings and make sure Checkout is enabled as a display location.

Apple Pay has additional requirements, including a supported Apple device and browser, HTTPS, and a verified domain.

Google Pay also depends on the browser and whether the customer has a supported saved payment method.

4. Your changes don't show on the live site

Clear every cache layer that could be serving an older version of the page, including your WordPress caching plugin, hosting or server cache, or CDN cache.

Your checkout page should not be served from a full-page cache. Most caching plugins exclude WooCommerce checkout automatically, but it's worth checking.

If the design still looks outdated, go to Elementor ⇨ Tools ⇨ Clear Files & Data and regenerate the files.

5. The checkout broke after an Elementor or WooCommerce update

Check both plugins' changelogs for checkout-related changes.

If you need the store working now, roll back with Elementor ⇨ Tools ⇨ Version Control or restore your backup.

Then test the update on staging before trying again.

6. Two plugins are fighting over the checkout page

Checkout builders, one-page checkout plugins, and some themes all replace the checkout page.

With two active at once, you'll see duplicate forms, missing fields or the wrong design.

Decide which one owns checkout and turn off the other's checkout feature.

7. The checkout page loads slowly

The checkout has one job: let shoppers finish their purchase. Keep it focused.

• Remove sliders, animations, and unnecessary widgets.
• Check which plugins load scripts on the checkout and remove anything that doesn’t need to run there.
• Compress images and set their width and height so they don't cause layout shifts.
• Test the checkout while logged out with products in the cart. That's closer to what a new shopper will actually experience.

If the checkout is still slow after that, test it with other plugins temporarily disabled on a staging site to see whether one is adding unnecessary scripts or requests.

Frequently Asked Questions on WooCommerce Elementor Checkout Page

We have answered some of the most commonly asked questions related to customizing the checkout page with Elementor:

Build a High-Converting WooCommerce Checkout Page with Elementor Today!

If you only want your checkout to match the rest of your store, Elementor Pro's Checkout widget may be all you need.

You can change the layout, labels, spacing, colors, fonts, and other design details without replacing the standard WooCommerce checkout.

But if you need to change how the checkout works, a checkout builder gives you more control.

FunnelKit Funnel Builder goes further by adding order bumps, a drag-and-drop checkout field editor, A/B testing, detailed analytics, and more.

Its free version includes Elementor-compatible checkout templates and widgets, so you can build and test a custom checkout before deciding whether you need the paid features.

Start your journey with FunnelKit and make a high-converting checkout page today.

Related Blogs

Editorial Team

October 1, 2026

WooCommerce Google Analytics Integration: 4 Ways to Track Every Sale in GA4

A WooCommerce Google Analytics integration can make your store’s revenue look twice as high as it actually is if the tracking is set up incorrectly and GA4 won’t even necessarily...

Editorial Team

September 30, 2026

How to Create a High-Converting Quiz Funnel in WordPress (No Code)

Quick answer: A quiz funnel is a multi-step interactive path that replaces a static lead form where visitors answer 5-8 questions, opt in with their email, and receive a personalized...

Editorial Team

September 29, 2026

WooCommerce Checkout Template: How to Replace the Default

A WooCommerce checkout template controls how your checkout page looks and works, and it's the last screen a shopper sees before paying. The default WooCommerce checkout does the job, but...