Checkout Form (Widget & Block)

The Checkout Form widget is a versatile and powerful tool provided by SellKit that allows you to create a seamless and efficient checkout process for your e-commerce platform. This widget is designed to optimize user experience by offering a range of customizable options that cater to different styles and requirements of online stores. Below, we provide a step-by-step guide to understanding and utilizing the Checkout Form widget to its full potential.

Accessing the Checkout Form Widget in Elementor

1. Locate to the checkout page where you want to insert the new checkout form.
2. Open the page using Elementor editor.
3. Click on the "+" (Add) button and drag the Checkout Form into your page layout.

Configuring Layout Options

While the checkout form widget is selected, go to the content tab in the options panel on the left sidebar. Here, you'll find these options:

1. Layout: Choose between a Single Page or Multi Steps layout for your checkout process.

• Single Page: All checkout fields appear on one screen.
• Multi Steps: Breaks checkout into sections (e.g., billing → shipping → payment) for a cleaner user flow.

1. Cart Items: Toggle to show or hide the cart items in the checkout form. This allows customers to review their order before proceeding.
2. Enable Cart Editing: When enabled, customers can modify their cart directly from the checkout page, such as changing quantities or removing items.
3. Shipping Method, Express Checkout, and More: These toggles allow you to customize what options are available to your customers, such as choosing a shipping method or using express checkout features.
4. Checkout Sticky Cart: When enabled, it keeps the order summary visible while visitors scroll through the checkout page. This feature improves transparency, reduces cart abandonment, and enhances the user experience by providing a persistent display of order details, including products, quantities, and total price.

Enhancing User Experience with Autocomplete and Coupons

1. Address Autocomplete: By enabling the Google Address Autocomplete feature, you can provide real-time address suggestions, improving the accuracy and speed of the checkout process.
2. Coupon: If you offer discounts through coupons, this section allows you to enable the coupon field and define its behavior.

Customizing Shipping and Billing Fields

You can tailor the form to match your business needs:

• Add or remove fields like:
  • First Name / Last Name
  • Company Name
  • Phone Number
  • Notes or custom fields
• Decide which fields are required

Adding Personal Touch with Custom Messages

Use the Custom Messages section to add:

• Security reassurance
• Shipping expectations
• Personalized greetings

These messages can appear right inside the checkout form.

Styling the Checkout Form

Switch to the Style tab to change fonts, colors, button styles, spacing, and more — so the checkout looks and feels like the rest of your website.

Save Your Changes

Once you’ve made your adjustments, click Update to apply them live.

Accessing the Checkout Form Widget in Block Editor (Gutenberg)

1. In your WordPress admin dashboard, navigate to SellKit > Funnels and either create a new funnel or edit an existing one.
2. If your funnel doesn't have a Checkout step, click the + button and select Checkout.
3. Choose Start From Scratch, then give the step a name.
4. Click on the Checkout step within your funnel, and in the next panel, select Edit with Block Editor.
5. In the block editor, add the Checkout block to your page.

The sidebar contains all the necessary settings and options for customizing your checkout experience.

You can easily add, remove, or modify components like the shipping and billing fields, and adjust the form and button design to align with your brand, ensuring a smooth and consistent checkout process for your customers.

Need help?

Need help configuring your checkout? Contact SellKit support team and we’ll be happy to assist.