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
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
no stored settingsWhat 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.
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
no stored settingsEdit 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.
⚠️ 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
no stored settingsThe 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.
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. The Layout section sets the Totals column width (100% puts the totals under the cart) and the space between columns, and the Style tab covers the table header, products, quantity and remove, and the totals box.
Step 3. The Checkout widget
Your checkout, one page or in steps
no stored settingsThe 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, and Show in the editor switches between A sample checkout and The empty cart. 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.
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.
Step 4. The order confirmation
The thank-you page after an order
no stored settingsAdd 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.
Step 5. A menu cart for your header
Menu Cart and Order Summary
no stored settingsThe 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.
Step 6 (PRO). A side cart
A cart that slides in when a product is added
no stored settingsThe 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.
💡 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
no stored settingsThe 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
no stored settingsThe 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.
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
The checkout settings the Checkout widget follows.
Where you choose your cart page.
The shipping estimate and free shipping settings.
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.
