This documentation will guide you through integrating Easy Digital Downloads and the Elementor page builder plugin to create an engaging and customizable EDD checkout page for your online store.

The integration enables enhanced styling options and layout flexibility using both the EDD Checkout Block and settings available via Elementor’s drag-and-drop editor and dedicated EDD Checkout widget.

EDD Checkout Block
Edit Checkout With Elementor
- Accessing Editor
- Add & Configure Checkout Widget
Troubleshooting

EDD Checkout Block

The Checkout page is automatically created for you upon activating the EDD plugin. Find it under Pages » Checkout Page. It uses the EDD Checkout block.

Note: The EDD Checkout Block and its settings are available to all users regardless of whether Elementor is used.

When you go to the Checkout page, the block settings are on the right.

Preview

First, you have the option to toggle the Preview as Guest setting. This helps you ensure the experience is optimal for both first-time visitors and returning customers.

This shows you a real-time preview of the checkout page and credit card form directly in the editor. You can choose one of your products from the Select a Download drop-down menu and see a real-time preview of what the checkout form looks like with an item in the cart.

Settings

Change the Layout
Adjust the Cart Thumbnail Size
Show/Hide Discount Form

Edit Checkout With Elementor

Elementor built its own EDD Checkout widget, which offers users deeper design control directly in Elementor.

Access Elementor Editor

With the Elementor page builder plugin installed and activated on your WordPress site, your EDD Checkout page offers the option to Edit with Elementor.

Clicking on it takes you to the Elementor editor interface.

Add & Configure Checkout Widget

In the elements panel on the left side of the screen, search for EDD Checkout. Drag-and-drop it to your page.

The widget provides a real-time preview of your checkout form. You configure the element settings in the left-side panel to customize each aspect of your checkout page.

The EDD Checkout has three main settings tabs.

Content

These settings are similar to the block settings in the native EDD Checkout block.

General

Cart Item
Account Alignment
Layout

Cart

Header
Thumbnail & Thumbnail Size
Discount Form

Section Titles

You can show/hide:

Personal Info
Billing Details
Payment Method
Card Info

Style

The Style tab is where you can customize the styling of your Checkout widget. This includes things like the typography and text/background colors, radius and padding, etc.

General
Purchase Button
Cart
Form Sections
Form Elements
Personal Information
Billing Details
Payment Method
Card Details

Advanced

This tab is where you can find more advanced options for customizing the look and appearance of your checkout page. There are multiple accordions, each with its own subset of settings you can configure. The sections include:

Layout
Motion Effects
Transform
Background
Border
Mask
Responsive
Attributes
Custom CSS

When you’re done, you can click the downwards arrow in the top right-hand corner of the screen. Then choose Save Draft, Save Template, or View Page. You can also select Publish to make your changes live.

If you have any questions about the specific widget settings, feel free to explore the Elementor widget knowledge base.

Troubleshooting

If you’re not seeing the EDD Checkout Block or widget options discussed above, you may need to update your Easy Digital Downloads plugin.

Check for updates by going to Dashboard » Updates in your WordPress admin area. Ensure you’re using version 3.5.3 or higher.

Customize EDD Checkout with Elementor