Checkout Form Widget Overview

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. A single page is straightforward, whereas multi-steps break down the process into several sections, often making it more digestible for the user.
2. Cart Items: Toggle to show or hide the cart items in the checkout form. This allows customers to review their order before proceeding.
3. Enable Cart Editing: When enabled, customers can modify their cart directly from the checkout page, such as changing quantities or removing items.
4. 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.
5. 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

The widget lets you specify which fields are necessary for shipping and billing purposes. You can add or remove fields such as 'First Name', 'Last Name', 'Company Name', and so on, to align with the information you require from your customers.

Adding Personal Touch with Custom Messages

1. Custom Messages: Craft messages that appear during checkout, providing guidance or reassurance to customers, like security notices or personalized greetings.

Styling the Checkout Form

Switch to the Style tab to adjust the visual aspects of the checkout form.

Applying and Updating Changes

After you've made the necessary adjustments to the Checkout Form widget, be sure to click the Update button to save your changes and apply them to your live site.

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.