# Customizing the EDD Checkout with Elementor Would you like your checkout page to look like the rest of your store instead of a default form? Easy Digital Downloads works with the Elementor page builder, so you can restyle every part of your checkout without touching code. This guide walks you through the EDD Checkout block, the EDD Checkout widget in Elementor, and the individual checkout widgets you use to restyle and rearrange the page. **Requirements**: The Elementor widgets below require the Elementor plugin installed and activated, and the Contain feature set to Active under the Elementor Editor » Settings » Feature screen. - [Starting From a Checkout Template](#aioseo-starting-from-a-checkout-template) - [Configuring the EDD Checkout Block](#aioseo-configuring-the-edd-checkout-block) - [Editing Your Checkout With Elementor](#aioseo-editing-your-checkout-with-elementor) - [Accessing the Elementor Editor](#aioseo-accessing-the-elementor-editor) - [Adding the EDD Checkout Widget](#aioseo-add-configure-edd-checkout-widget) - [Choosing a Checkout Layout](#aioseo-choosing-a-checkout-layout) - [Styling the Checkout Container](#aioseo-styling-the-checkout-container) - [Customizing the Individual Checkout Widgets](#aioseo-customizing-the-individual-checkout-widgets) - [Cart Widget](#aioseo-the-cart-widget) - [Personal Info Widget](#aioseo-the-personal-info-widget) - [Payment Info Widget](#aioseo-the-payment-info-widget) - [Discount Form Widget](#aioseo-the-discount-form-widget) - [Rearranging Your Checkout](#aioseo-rearranging-your-checkout) - [Troubleshooting](#aioseo-troubleshooting) - [FAQs: Customizing EDD Checkout With Elementor](#aioseo-faqs-customizing-edd-checkout-with-elementor) --- Starting From a Checkout Template --------------------------------- If you'd rather not build a checkout from scratch, you can [import a ready-made checkout template](/docs/checkout-templates/) and then edit it with everything above. Each imported template places the four checkout widgets for you, so the styling and reordering steps in this guide apply to it directly. Templates arrive with placeholder headings and sample wording around the live payment fields, so replacing that text with your own is usually the first edit you'll make. Configuring the EDD Checkout Block ---------------------------------- The Checkout page is created for you when you activate Easy Digital Downloads. It sits in your WordPress Pages list as **Checkout**, and it uses the EDD Checkout block. **Note:** The [EDD Checkout Block](https://easydigitaldownloads.com/docs/easy-digital-downloads-blocks/) and its settings are available to every user, whether or not you use Elementor. Open the Checkout page and the block settings appear on the right. Start with the **Preview as Guest** setting, which lets you check the experience both first-time visitors and returning customers get. You also get a real-time preview of the checkout page and credit card form right in the editor. Pick one of your products from the **Select a Download** menu to see how the form looks with something in the cart. ![EDD Checkout block settings preview.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/edd-checkout-live-preview.png)The block's own settings let you change the layout, adjust the cart thumbnail size, and show or hide the discount form. Editing Your Checkout With Elementor ------------------------------------ Elementor builds its own EDD Checkout widget, which gives you far deeper design control than the block alone. ### Accessing the Elementor Editor With the Elementor plugin installed and activated, your Checkout page offers an **Edit with Elementor** option. ![Edit with Elementor button.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/edit-with-elementor-wordpress.png)Selecting it opens the Elementor editor. ![Elementor editor EDD checkout page.](https://easydigitaldownloads.com/wp-content/uploads/2025/10/elementor-edd-checkout-editing.png)### Adding the EDD Checkout Widget In the elements panel on the left, search for **EDD Checkout**, then drag it onto your page. ![The Elementor elements panel with the EDD Checkout widget found by search](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-widget-elementor-panel.png)A newly added widget stays empty until you choose a layout, which is the next step. Once you have, it renders a live preview of your checkout form, so you can see your changes as you make them rather than publishing and checking the front end. This widget is the container for your whole checkout. Its own settings sit under three tabs: **Layout**, **Style**, and **Advanced**. ### Choosing a Checkout Layout On the **Layout** tab, open **Checkout Layout**. You get five ready-made arrangements to choose from, covering single column and two column designs, and toggles to show or hide the cart and the discount form. ![The Checkout Layout settings showing five layout options plus Cart and Discount Form toggles](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-layout-settings.png)**Note:** Elementor warns you that switching layout replaces all widget contents. Pick your layout before you invest time in styling, so your work carries forward. ### Styling the Checkout Container The **Style** tab handles the checkout as a whole, with sections for **Background**, **Background Overlay**, **Border**, **Shape Divider**, and **Form Elements**. **Shape Divider** is the one worth knowing about, because it adds a decorative shape to the top or bottom edge of your checkout instead of a flat boundary. Choose an edge, then pick a shape. ![The EDD Checkout Elementor widget Shape Divider settings with Top and Bottom options and a grid of shape styles](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-shape-divider-settings.png)Customizing the Individual Checkout Widgets ------------------------------------------- Your checkout is built from four separate widgets: the cart, personal info, payment info, and the discount form. Each one carries its own settings, which is what lets you style one part of the checkout without disturbing the rest. You won't find these four in the elements panel, because you don't add them by hand. They arrive as part of the EDD Checkout widget. To reach their settings, select the piece you want directly on the page. ### The Cart Widget On the **Content** tab, the cart gives you a **Cart Header** toggle, a **Cart Thumbnail** toggle, and a **Size** slider for those thumbnails. ![The EDD Checkout Cart content settings with Cart Header, Cart Thumbnail, and Size controls](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-cart-content-settings.png)Its **Style** tab is the deepest of the four. Controls are grouped into **Cart Header**, **Cart Items**, and **Footer Rows**, so you can style the totals differently from the line items above them. ![The EDD Checkout Cart style settings showing the Cart Items and Footer Rows control groups](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-cart-style-settings.png)### The Personal Info Widget This widget covers the name and email fields, plus the log in and register links. Its **Content** tab includes **Preview as Guest**, **Account Alignment**, and a **Single Line Name** option that puts first and last name on one row. ![The EDD Checkout Personal Info content settings including Preview as Guest and Single Line Name](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-personal-info-settings.png)### The Payment Info Widget This one owns the payment area. Its **Style** tab groups controls into **Purchase Button**, **Gateway Selector**, **Payment Method**, and **Card Details**, so the button your customers click can be styled on its own. ![The EDD Checkout Payment Info style settings with Purchase Button controls](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-payment-info-style-settings.png)### The Discount Form Widget The discount form has a single content setting, **Show Discount Field**, and a deep Style tab covering the toggle link, the field itself, and the apply button. ![The EDD Checkout Discount Form content settings with the Show Discount Field toggle](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-discount-form-settings.png)Rearranging Your Checkout ------------------------- Because each part of the checkout is its own widget, you can change the order things appear in. Select a widget, open the **Advanced** tab, then open **Layout**. The **Order** control moves that element to the start or the end of its container, and a custom option lets you set an exact position. ![The Advanced Layout settings showing the Order control for repositioning an element](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-checkout-widget-order-control.png)The quickest way to select the piece you want is Elementor's **Structure** panel, which lists every element on the page. Selecting one there highlights it on the canvas and loads its settings. ![The Elementor Structure panel listing checkout elements with one selected on the canvas](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-elementor-structure-panel-checkout-800x311.png)When you're happy with the result, select the arrow beside **Publish**, then choose **Save Draft**, **Save as Template**, or **View Page**. Select **Publish** itself to make your changes live. ![The Elementor save options menu showing Save Draft, Save as Template, and View Page beside the Publish button](https://easydigitaldownloads.com/wp-content/uploads/2026/08/edd-elementor-save-options-menu-800x372.png)Troubleshooting --------------- If you don't see the EDD Checkout block or the widget settings described above, there are a few options to try. The first is to verify whether the Elementor's Flexbox Container experiment is turned on. From the **Elementor** » **Editor** » **Settings** » **Features** and make sure the **Container** option is set to **Active**. Also, be sure to confirm that your Easy Digital Downloads plugin is up to date. Check for updates under **Dashboard** » **Updates**. The individual checkout widgets and the layout picker need Easy Digital Downloads 3.7.0 or higher. Elementor's own widgets need Elementor 3.35.0 or higher. Otherwise, you may see a widget named **EDD Checkout (Legacy)**. It keeps working, and its settings sit together on one widget rather than being split across the four described above. Add the current **EDD Checkout** widget to a page to move over to the newer settings. For anything specific to Elementor's own controls, the [Elementor widget knowledge base](https://elementor.com/help/elementor-editor/widgets/) covers them in detail. FAQs: Customizing EDD Checkout With Elementor --------------------------------------------- Here are answers to some common questions about customizing the EDD checkout in Elementor. ### Do I need the paid version of Elementor? No. The free Elementor plugin is enough for the EDD Checkout widget and all of the settings covered here. ### Why can't I find the cart or discount form in the elements panel? Those four widgets are not added by hand. They come as part of the EDD Checkout widget, so you reach their settings by selecting them on the page rather than dragging them in. ### Will switching the checkout layout undo my styling? It can. Elementor warns that switching layout replaces all widget contents, so choose your layout first and style it afterwards. ### Can I change the order of the checkout sections? Yes. Select the widget you want to move, then use the Order control on the Advanced tab under Layout. ### Does the checkout still work without Elementor? Yes. The EDD Checkout block handles your checkout on its own, and its settings are available to every user. Elementor adds design control on top of it.