*How-to › Design your store › Elementor* # Elementor: Design the Cart and Checkout Design your cart, checkout and order confirmation in Elementor, add a menu cart to your header and, with PRO, a side cart. 9 parts. Quick links - [How the cart and checkout widgets work](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#how-it-works) - [Step 1. Set up your cart page](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#cart-page) - [Step 2. The Cart widget](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#cart) - [Step 3. The Checkout widget](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#checkout) - [Step 4. The order confirmation](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#confirmation) - [Step 5. A menu cart for your header](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#menu-cart) - [Step 6 (PRO). A side cart](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#side-cart) - [One flow per page](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#one-flow) - [If it does not work](https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/#troubleshooting) **Where to find it:** WP Admin › EasyCart › Settings › Elementor *Before you start* ## What you are building The cart and checkout widgets and how the cart page works. ### How the cart and checkout widgets work One page, three jobs **What you need.** WP EasyCart and Elementor. The free version of Elementor is enough, and so is the free WP EasyCart, for everything except the Side Cart and the extra Checkout layout controls, which are PRO. **What they do.** They draw the store’s own cart and checkout, so payment gateways, shipping, tax, coupons and orders behave exactly as before. You change the layout and the look. **On any theme.** Untouched, the widgets keep their own sizes and take your Elementor kit’s font families, not its sizes. Words and prices take the colour of the text around them, so a dark template kit reads as well as a light one, and buttons take Elementor › Site Settings › WP EasyCart › Buttons, with words that read on them. A widget whose typography or colour you set, or set to a global, keeps it. The widgets are in the **WP EasyCart · Cart & Checkout** group: **Cart**: the shopper’s cart. **Checkout**: the checkout, one page or in steps, as set in Settings › Checkout. **Order Confirmation**: what shoppers see after they place an order. **Order Summary**: the products and totals, on any page. **Menu Cart**: a cart icon with a mini cart, for a header. **Side Cart** (PRO): a cart that slides in when a shopper adds a product. Your cart page holds the cart, every checkout step and the order confirmation at one address. The steps: set up the cart page, style the cart, the checkout and the confirmation, then add the menu cart and, with PRO, the side cart. *Build it* ## Six steps Set up the cart page, style the cart, the checkout and the confirmation, add a menu cart and a side cart. ### Step 1. Set up your cart page Cart, Checkout and Order Confirmation on one page Edit your cart page with Elementor. Your cart page is the one chosen in **Settings › Store details**, in the Store pages card. Then either insert the starter layouts (Cart page, Checkout page and Order confirmation page, from Add Template › My Templates, one below the other) or drag the **Cart**, **Checkout** and **Order Confirmation** widgets yourself. Each widget shows when its part of the cart page is open. The cart shows first, the checkout steps show when the shopper checks out, and the confirmation shows once an order is placed. Settings › Elementor has a **Cart and checkout** card that names your cart page, links to edit it with Elementor and links to the Checkout settings. ![Settings › Elementor, the Cart and checkout card.](https://docs.wpeasycart.com/wp-content/uploads/2026/09/elementor-checkout-01-cart-checkout-card-v2.jpg) > **⚠️ Careful:** Test a full purchase after you change the cart page: an item in the cart, every checkout step, the payment and the confirmation, on a phone as well as a desktop. ### Step 2. The Cart widget The cart, styled to match your site The **Cart** widget shows the shopper’s cart. On your cart page it starts the checkout. On any other page it shows the same cart with a Checkout button, so you can also build a cart into a landing page. **Look** comes first in the Cart section. **Modern** (the default) shows each product as a card with a − / + quantity stepper, the coupon, gift card and shipping estimate under them and a summary box beside them, as your one-page checkout’s cart does. **Classic table** is the older cart table. A one-page checkout always shows its own cart. Then the Cart section has a switch for each part, all on by default: **Coupon box** (while coupons are on in Settings › Checkout), **Gift card box** (while gift cards are on in Settings › Checkout), **Shipping estimate** (while the estimate is on in Settings › Shipping), **Continue shopping button** and **Checkout steps**, the line above the cart. These switches change the cart only. The checkout always shows every part. **Show in the editor** switches between *A cart with products* and *The empty cart*, so you can style both. It only changes what you see while editing, and it shows the Look you chose. Two more switches are **Product names link to the product** and **Express buttons** (Apple Pay, Google Pay and PayPal beside the totals, when your payment settings show them), and **Below the cart** adds a saved template under the cart, such as a trust badge row. The Layout section sets the Totals column width (100% puts the totals under the cart), the space between columns, **Totals** Beside the cart or Under the cart, and **Keep the totals in view** while shoppers scroll a long cart. The Style tab covers the table header, products, quantity and remove, and the totals box. ![The Cart widget with Look on Modern: products as cards with the quantity stepper, totals beside them.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/elementor-design-cart-and-checkout-cart-606.jpg) ### Step 3. The Checkout widget Your checkout, one page or in steps The **Checkout** widget shows your checkout on your cart page: the one-page checkout, or details, shipping and payment in steps, as you chose in Settings › Checkout. The widget links to those settings. **Checkout steps** shows or hides the line of steps above the checkout. **Show in the editor** switches between *A sample checkout* and *The empty cart* on the one-page checkout. With the checkout in steps it shows one step at a time, as shoppers see it: *The checkout details step*, *The shipping step* (when your store ships), *The payment step* and *The empty cart*. Your style settings reach every step, including the order summary beside the form, its bar on phones and the ways to pay on the payment step. Layout controls set the order summary width (100% puts the summary under the checkout) and the space between columns. The Style tab covers heading lines, the shipping and payment choices, the order summary and the gift options. On the one-page checkout the order summary follows **Items can be changed on the one-page checkout** in Settings › Checkout: on, each line has − and + buttons and a bin, and the editor sample shows them; off, the quantity sits on the product picture. On a store with the checkout in steps and no Cart widget on the cart page, the Checkout widget also draws the cart, in the look chosen under **Settings › Design › Cart page look**. **With PRO** the widget gains two sections. **Layout and sections** puts the order summary beside the checkout on the right or left, above it or below it, or as totals only below it when you use the Order Summary widget. It also switches Coupon box, Gift card box, Gift options, Order notes and Express checkout buttons (the wallet and PayPal buttons at the top of the one-page checkout), and lets you place your own Text, HTML or a saved template between the checkout’s sections. Contact, shipping and payment stay in checkout order. **Totals lines** hides the Shipping line or the Tax lines. Only what the shopper sees changes: the order is still charged its full total, and the grand total always shows. The free plugin shows both sections locked, with an upgrade link. ![The Checkout widget on a store with the checkout in steps, Show in the editor on The payment step.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/elementor-design-cart-and-checkout-checkout-606.jpg) ### Step 4. The order confirmation The thank-you page after an order Add the **Order Confirmation** widget to your cart page. It shows once an order is placed, together with your purchase tracking, and the editor shows a sample order. It draws the store’s own confirmation and adds what you choose below it. Write a **Message** for what happens next; simple HTML is allowed. Then switch each part on or off: Check mark, Order number, Email note (where the confirmation email went), Order links (downloads, the order in My Account and Continue shopping), Print receipt, How to pay (for bank transfer orders: your payment details and a Pay now button while pay links are on), Products, Totals and Addresses. **Account prompt** is off by default. It asks guests to create an account and opens your sign-up page, but the order they just placed stays a guest order, so switch it on with that in mind. The Style tab has the Thank-you box (check mark colour) and Products and totals. Without the widget, your cart page already shows a full confirmation page with its own items, totals and addresses (see [The Order Confirmation Page](https://docs.wpeasycart.com/docs/how-to-guides/the-order-confirmation-page/)). With the widget on the page, that summary is left out and the widget draws its own parts, so nothing shows twice. ![The Order Confirmation widget in Elementor: the sample thank-you card with Print Receipt in its corner, How to pay and the order.](https://docs.wpeasycart.com/wp-content/uploads/2026/10/elementor-design-cart-and-checkout-confirmation-604.jpg) ### Step 5. A menu cart for your header Menu Cart and Order Summary The **Menu Cart** is a cart icon with the item count. It fits a header template: in a header built with Elementor Pro’s Theme Builder, or wherever your theme lets you use Elementor. It replaces the older Cart Icon widget. A page that still has the Cart Icon offers a Replace button. Choose the **Icon**, and switch Item count (on by default), Subtotal and Hide when the cart is empty. **When clicked** can Open the mini cart below it, Open the mini cart in a side panel or Go to the cart page. A dropdown can Open on hover (on computers with a mouse). A panel has a Panel side, left or right, and a link can go to a page you choose. Set the Alignment. The **Mini cart** section sets the Title, the View cart button and its text, the Checkout button and its text, and Show it open in the editor so you can style it. The Menu Cart never prints the visitor’s cart into the page, and fills it in after the page loads. So it stays correct on a cached site. **Order Summary** works on any page. It shows the products and totals in the shopper’s cart, kept up to date while they check out, and shows nothing while the cart is empty. Choose a Heading and its text, and switch Product images, Product options and Totals. Pair it with PRO’s *Totals only* position when you want the summary somewhere else on the page. ![The Menu Cart widget in Elementor, with the Menu cart section open.](https://docs.wpeasycart.com/wp-content/uploads/2026/09/elementor-checkout-04-menu-cart-v2.jpg) ### Step 6 (PRO). A side cart A cart that slides in when a product is added The **Side Cart** slides in from the side when a shopper adds a product. It shows quantities with remove buttons, a free shipping progress bar, and buttons to the cart and the checkout. It needs PRO with an active license. The free plugin shows a locked description in the editor, and visitors see nothing. Put it on every page, in a header or footer template. Under **Opens when** choose *Any product is added*, *An Add to Cart widget set to open it adds a product* or *Only its cart button is clicked*. In the Add to Cart widget, the **After adding** choice can be Stay on the page and confirm, Open the side cart, or Go to the cart. Set the Side (left or right), the Title, the Cart button and Icon, and whether it floats in the corner. **Free shipping progress** takes the amount from *My shipping rates* (the lowest order value that ships free) or *An amount I enter*. A full bar means free shipping is available, which may depend on the shipping method or region. You can also add a Note under the subtotal and change the View cart and Checkout button texts. The cart button and the quantity buttons keep their own look on any theme, instead of taking the theme’s button colours when clicked. ![The Side Cart widget in Elementor. On a store without PRO it shows the locked description.](https://docs.wpeasycart.com/wp-content/uploads/2026/09/elementor-checkout-05-side-cart-v2.jpg) > **💡 Note:** Every cart widget shares the same cart. A change in the side cart, the menu cart and the cart page shows in all of them. *Good to know* ## The one flow rule and fixes Why the cart page draws each part once, and the usual problems. ### One flow per page Why a second Checkout widget does nothing The cart page has one cart, one checkout and one confirmation, and the checkout scripts find their parts by id, so the page can only draw them once. When you put several widgets on it, WP EasyCart picks one to draw each part: **The order confirmation** goes to the Order Confirmation widget, else the Checkout widget, else the Cart widget. **The cart** goes to the Cart widget, else the Checkout widget. With the one-page checkout, which draws the cart and every step on one page, it goes to the Checkout widget, else the Cart widget. **The checkout steps** and every other state, such as a subscription checkout or a pay link, go to the Checkout widget, else the Cart widget. The other widgets print nothing. A page that also carries the `[ec_cart]` shortcode leaves the cart to the shortcode. Widgets with an Elementor display condition are not counted: when every candidate has one, the first that draws takes the cart page. So use one of each widget per page, and do not add a shortcode next to them. ### If it does not work Blank pages and missing parts **The cart page is blank.** Check your cart page is the one in Settings › Store details, and that it holds a Cart or Checkout widget. In the editor, set Show in the editor to a cart with products. **The checkout shows only once.** That is by design, see One flow per page. Remove a shortcode or a second widget. **The Side Cart does not appear.** It needs PRO with an active license, and a place in a header or footer template. Check Opens when, and that Add to Cart widgets are set to Open the side cart. **The Order Summary shows nothing.** It shows nothing while the cart is empty. **The editor says shoppers see the classic table, not the Modern look.** Your store has its own copy of the cart table (ec_cart.php) or an older copy of WP EasyCart’s stylesheet (ec-store.css) in the wp-easycart-data folder. Remove or update the copy to show the Modern look. **Styling does not change a colour.** Set a colour in the widget’s Style tab. The checkout styles override the store’s own cart CSS, so use these controls rather than custom CSS where you can. *Keep going* ## Related panels - [Checkout](https://docs.wpeasycart.com/docs/administrative-console-guide/checkout-settings/): The checkout settings the Checkout widget follows. - [Store details](https://docs.wpeasycart.com/docs/administrative-console-guide/store-details/): Where you choose your cart page. - [Shipping](https://docs.wpeasycart.com/docs/administrative-console-guide/shipping-settings-and-setup/): The shipping estimate and free shipping settings. - [Payments](https://docs.wpeasycart.com/docs/administrative-console-guide/payments-setup/): Connect the payment gateways the checkout uses. ## Ready to run your store on WP EasyCart? Everything in this guide works with the free plugin. PRO and Premium add subscriptions, memberships, wholesale pricing and more. Try every PRO feature free for 14 days. [Start your free trial](https://www.wpeasycart.com/wp-easycart-professional-14-no-risk-trial/) · [See what is included](https://www.wpeasycart.com/wordpress-shopping-cart-pricing/) ![The WP EasyCart admin: orders and offers](https://docs.wpeasycart.com/wp-content/uploads/2026/09/cta-wpeasycart-pro-v2.jpg) --- Source: https://docs.wpeasycart.com/docs/how-to-guides/elementor-design-cart-and-checkout/ ( updated 2026-11-06 )