Checkout Builder

In this article:

• What is the checkout builder?
• Editing the name and slug of your checkout page
• Design the Checkout pages
• Checkout Form Widget
  • Content
  • Address Autocomplete
  • Coupon
  • Shipping Fields and Billing Fields
  • Custom Messages
  • Styling the Checkout widget
• Adding Products to Checkout
• Auto-Apply Coupons
• Checkout Expiry
• How to make Sellkit checkout your default checkout

What is the checkout builder?

With the checkout builder, you can design, personalize and optimize the checkout process for a simple and accessible checkout process for your customers. SellKit lets you create a checkout page as part of your sales process, assign any number of products to it, add order bumps, set expiration, define custom discounts for products within that checkout page, and so on. You will be able to build a new checkout page (which is different from the default WooCommerce checkout page) that can have different options and features. 

In order to create a checkout page, you can either import a checkout template (+ How to import templates) or create a new step and choose Checkout. ( +More information). 

After adding the checkout step as described in this doc, we go through the checkout step options and features. 

Editing the name and slug of your checkout page

Click on the and from the modal you can change the name and the slug of your checkout page. 

Click on the Save button to save your edits.

Design the Checkout pages

SellKit allows you to design your checkout page with both Elementor and Block editor. On the Design tab, click on the related button to start editing the page.

You can take a look at your page by clicking on the Preview button from the design tab.

SellKit adds a couple of Elementor widgets to your website including the Checkout widget. The Checkout widget allows you to design your own checkout pages with any look you want.

Checkout Form Widget

On your Elementor page, add a Checkout Form widget as follow.

On the content tab of the right sidebar, you have these options:

Content:

• Layout: Select between single page or multi steps. Single page let users fill the checkout form via a single page, and by selecting multi steps the checkout process will be divided into three steps, in which users should click on the continue button in order to finish their order.
• Cart Items: Displays the items in the cart in the checkout form.
• Enable Cart Editing: Let users add/remove items from their cart from the checkout form.
• Steps (only available when the Layout option is multi steps): Displays the checkout steps at the top of the checkout form.
• Shipping Method: shows the shipping methods in the checkout process.
  Note: you can add/remove shipping methods from WordPress dashboard > WooCommerce > Settings > Shipping.
• Express Checkout: Allows to select from express checkout options in the form. Express checkout makes a one-click checkout experience without asking the buyer to enter shipping and billing details.

Checkout sticky cart (only available when the Layout option is multi steps): Enables the cart items (your order section) in the right side of the form to be sticky so it stick to the top when you reach its scroll position.

Place Order Button Text: You can edit the text of the checkout form.

Address Autocomplete

• Google Address Autocomplete: Display automated address suggestions to your customers as they are entering their shipping/billing address. You need to obtain a Google Places API to be able to use this feature. Then go to WordPress dashboard > Settings and enter your Google API key.
• Auto-populate State: It will look up the possible address when typing the state.
• State and City Lookup by Postcode: This option will lookup for the state and city when typing postcode.

Coupon

• Enable Coupon Field: Enable the field where users can enter their coupon code.
• Coupon Field Behavior: You can choose your coupon field to be normal or collapsible.

Shipping Fields and Billing Fields

Here, you can edit all the fields in the Shipping and Billing sections. In order to remove a field click on the “X” icon on the right side of the field, and to add a new field click on the + ADD ITEM button, to edit a field, just click on it.

Each field has these options:

• Field Role: As the name implies, you can choose the role of the field from these options:
  • First Name
  • Last Name
  • Company
  • Address 1
  • Address 2
  • City
  • Postcode
  • Country
  • State
  • Custom Field

✍️ Note

When Custom Field is selected, five more options will appear to edit for that field. These options are:

• Custom Field Type: Text, Textarea, Select, Multiselect, Checkbox, Radio, Tel (Phone), Email and Hidden are the field types to choose from.
• Custom Field ID: Type the ID for that custom field, for example, CheckoutOne-Custom-Filed.
• Default Value: Give a default value for that field.
• Show in Thank You Page: By default, it’s hidden and if you toggle to show it will display this field in the Thank You page as well.
• Show in Order Email: By default, it’s hidden and if you toggle to show it will display this field in the Order Email as well.
• Width: Determine the width of the field in the form.
• Field Label: You can type the label of your field or leave it empty.
• Field Class: you can assign a class to your field, you can add multiple classes by adding a space between name of the classes.
• Validation: If your field is a type of Phone or Postcode, you can select its respective validation type to check the validity of the information that users type later on.
• Field Required: If you select “yes” then the user cannot place an order unless filling that field.
• Field Clear: Applies a clear fix to the field.

Custom Messages

In this section, you can edit the messages that users see when interacting with the form.

Styling the Checkout widget

You can style every single part of the checkout form over the Style tab.

Adding Products to Checkout

In order to add product(s) to your checkout page go to the Products tab and follow these steps:

1. Click on the + Add Product button. 

1. In the Add Product modal, type the product you want to add to your page by its name and select it and then click on the Add Product button.

✍️ Note

you can type and select as many products as you want to add to your checkout page.

1. Selected product(s) will be added to the product table. Define the quantity and the amount of discount for the product. You can define the discount type to be fixed or percentage as well.

1. If you want to add more products to be included in the checkout click on the + Add Product button and repeat the second the third steps.

1. Choose one of these settings to determine how users can buy the products in this funnel that by default “a” is selected.
   • Restrict buyer to select only one of the above products (e.g. when selling similar products with different pricing plans or quantity)
   • Allow buyer to select any of the above product(s) (e.g when selling multiple products).
   • Force sell all of the above product(s) (e.g. when selling a fixed price bundle)

✍️ Note

If you want to select “a” or “b” please be sure that “Enable Cart Editing” option is enabled in Checkout Widget’s Content tab.

1. Click on the Save changes button.

Auto-Apply Coupons

In order to create auto-apply coupon, from the WordPress dashboard go to Marketing > coupons and create your coupon then follow these steps:

1. Go to the checkout step of your funnel click on the Optimization tab and click on the Auto-Apply Coupons toggle.

1. Write the name of the coupon you want to add to the checkout and select it.

1. Click on the Save changes button.

✍️ Note

You can select and add as many coupons as you want to your checkout page.

✍️ Note

 SellKit smart coupons will not auto-apply at the checkout. In order to add them to the checkout, you should use the Smart coupon widget.

Checkout Expiry

Sellkit allows you to set a date to expire the checkout and redirect users to a custom URL after expiration. To do so go to the Optimization tab and follow these steps:

1. Click on the Expire Checkout toggle.

1. By clicking on the Close checkout on the field you can choose the date and time.

1. Enter the URL to redirect users after checkout expires.

1. Click on the Save Changes button.

Adding Order Bump to checkout

You can add an order bump to the checkout page to increase the average order value. To add an order bump to your checkout page click on the + bump button in the checkout step.

Then give your order bump a name and click on the create button.

You can customize the design of your order bump, add products, and set conditions for it. Please read the Order Bump article to learn about it.

How to make Sellkit checkout your default checkout