# Customize EDD Checkout with Elementor

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](#configuring-the-edd-checkout-block)
- [Edit Checkout With Elementor](#using-with-elementors-edd-checkout-widget)
    - [Accessing Editor](#aioseo-access-elementor-editor)
    - [Add & Configure Checkout Widget](#aioseo-add-configure-edd-checkout-widget)
        - [Content](#aioseo-content)
        - [Style](#aioseo-style)
        - [Advanced](#aioseo-advanced)
- [Troubleshooting](#aioseo-troubleshooting)



EDD Checkout Block
------------------

The [Checkout page](https://easydigitaldownloads.com/blog/create-a-checkout-page-in-wordpress/ "How to Create a Checkout Page in WordPress") 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](https://easydigitaldownloads.com/docs/easy-digital-downloads-blocks/ "WordPress Blocks for Easy Digital Downloads") 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.

![EDD Checkout block settings preview.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/edd-checkout-live-preview.png)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**.

![Edit with Elementor button.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/edit-with-elementor-wordpress.png)Clicking on it takes you to the Elementor editor interface.

![Elementor editor EDD checkout page.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/elementor-edd-checkout-editing.png)### 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.

![Elementor EDD Checkout widget.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/elementor-edd-checkout-widget-321x480.png)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.

![Elementor EDD Checkout widget content settings.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/edit-edd-checkout-section-titles-elementor-306x480.png)#### 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 TitlesYou can show/hide:

- Personal Info
- Billing Details
- Payment Method
- Card Info

#### Style

![Elementor EDD Checkout Widget style settings.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/elementor-edit-edd-checkout-styles-229x480.png)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

![Elementor's EDD Checkout Widget Advanced settings.](https://easydigitaldownloads.com/wp-content/uploads/2025/11/edit-edd-checkout-elementor-advanced.png)#### 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](https://elementor.com/help/elementor-editor/widgets/).

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.