1. Home
  2. Docs
  3. Checkout Widgets for Elementor Pro
  4. Design Your Checkout Page

Design Your Checkout Page

1. Start editing your checkout Page using the “Edit with Elementor” button.
Important:-Remember to remove any shortcode from the Checkout page and make sure the page template is set to “Elementor Checkout”.
2.  You will be able to see three widgets on left panel Billing Details, Order Notes, and Review & Pay under the Woocommerce Checkout section. See screenshot.

checkout Widget elementor

3. Drag your desired widget and start styling it from a list of different controls.
Some common controls you will able to see with each widget are :-

Typography, Color, Size, Background Color, Border, Height Padding, and Margin.
4. Use other Elemneter widget for extra sections or design.

5.That’s it. View your Custom designed checkout page.