How to create a custom Woocommerce Checkout page

Let’s see how to create a WooCommerce Checkout page with Elementor and the new Bew Cart & Checkout builder by making a custom and modern layout.

Before creating your custom checkout page, make sure you are editing the actual Woocommerce checkout page and removing the Woocommerce checkout shortcode. Also, you need to have at least one product added to your shopping cart.

1. Open checkout page and edit with Elementor.
2. You can insert our pre-made templates (where are the bew templates) or create them from scratch.
3. Create a section select it, enabled bew checkout form.
4. Drag and drop the checkout widgets.
5. Style, add/remove options, create your own custom checkout.
6. Save it.

What’s new on Bew Checkout?

This is how a standard default checkout page looks:

We’ll go for something like this instead:

Here’s what’s different:

• We’re adopting a better conversion layout instead of the standard old layout. but if you want you can change the layout anytime it si 100% customizable.
• We’re adding and recreating a new look on the checkout form section, getting on it a modern and clean design.
  • Adding a custom form builder for shipping and billing fields.
  • Adding custom contact information fields.
  • The checkout process now captures the shipping address first and uses this as the default billing address.
  • All the checkout interactions are in the left column, and the order review and details are in the right column.
  • The checkout process is made on a steps layout.
  • Relocating the shipping options to the steps process.
  • Relocating the payment methods to the steps process.
  • Adding a radio, tabs, or checkbox layout to show the payment methods.
  • Relocating the place order button to the steps process.
  • Adding a Return to cart link on the place order step.
  • Redesign the discount coupon layout on the review order product list.
  • Adding an option to show product image, count, title, and remove options on the review order product list.
  • Adding a collapsed option to the review order product list.
  • Adding dynamic content feature on the shipping section.
  • Relocating the coupon code input to the review order section and it has an option to change layout between input or collapsed layout. you can have the option to keep/show the standard apply code section too.
• Each part of the checkout is completely customizable, you can change styles, color, add or remove features and create your own unique checkout page, which is combined with the styles of your website.