In this article:
- What is the checkout builder?
- Editing the name and slug of your checkout page
- Design the Checkout pages
- Checkout Form Widget
- Adding Products to Checkout
- Auto-Apply Coupons
- Checkout Expiry
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.
You can design the checkout page using the Elementor page builder. It gives you enough flexibility to design any kind of checkout page you need.
The checkout widget that Sellkit introduces to Elementor has been inspired mostly by the Shopify checkout page. So while using the Checkout widget on your Checkout page, you are turning you may find the WooCommerce checkout somehow looks like Shopify.
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.
In order to use the checkout shortcode in Block Editor, you need to use
[woocommerce_checkout] shortcode instead of the Sellkit’s Checkout widget.
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:
- 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.
Please note that you should download and activate plugins for express payments such as BrainTree Gateway plugin first and then from the WordPress dashboard > WooCommerce > Settings > Payment you can see express payment options. SellKit supports these plugins:
- Payment Plugins Braintree For WooCommerce (recommended)
- Payment Plugins for Stripe WooCommerce
- Amazon Pay
- Klarna Checkout
- PayPal for WooCommerce
Right after you configure these plugins correctly and enable the Express Checkout option in your checkout widget, the express payment button should appear. If the configurations were incorrect, the buttons will not appear. Please note that some payment buttons such as Apple Pay or Google Pay buttons will only appear on real devices with the available wallet applications.
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.
- 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.
- 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
- Address 1
- Address 2
- Custom Field
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.
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:
- Click on the + Add Product button.
- 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.
you can type and select as many products as you want to add to your checkout page.
- 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.
- 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.
- 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)
If you want to select “a” or “b” please be sure that “Enable Cart Editing” option is enabled in Checkout Widget’s Content tab.
- Click on the Save changes button.
In order to create auto-apply coupon, from the WordPress dashboard go to Marketing > coupons and create your coupon then follow these steps:
- Go to the checkout step of your funnel click on the Optimization tab and click on the Auto-Apply Coupons toggle.
- Write the name of the coupon you want to add to the checkout and select it.
- Click on the Save changes button.
You can select and add as many coupons as you want to your checkout page.
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.
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:
- Click on the Expire Checkout toggle.
- By clicking on the Close checkout on the field you can choose the date and time.
- Enter the URL to redirect users after checkout expires.
- 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.