You can add a Checkout widget to any page from the Widget menu under Sales within the CCK builder. Click and drag the widget to where the checkout widget needs to be added to the page.

To add products to the checkout page, click on the products option on the editor menu, product select and then + Select products as shown below. Select the applicable products in the popup and click confirm. You also have the option to create a new product from the popup by selecting the Add Store Product option.

You add a Bump offer under the Product Select menu, click on Edit next to Bump Offers to add and customize the Bump Offer you are adding in the next popup:

You can toggle the options to allow customers to change the quantity, products and whether customers can choose multiple products as shown below:

To customize the styling to your checkout widget, click on the styling option on the editor menu. You can set up and customize a wide range of styling options for the checkout widget.

Design Layout

There are 3 different layout options to choose from:

Checkout Step Process

You have the option to set up a 1-step, 2-step or 3-step checkout process:

📌 We recommend using the 2-step process because this allows the option for a customer to register to leave their names and email addresses on the first checkout step on your website - allowing you to follow up with an email to the customer if the checkout process has not been completed.

Customer and Billing Details

Update the Fonts and colours to match your branding.

There is also an option to rename the titles such as the Customer Information Title, Billing Address Title etc.

Checkout Wrapper

The layout of the checkout wrapper.

Order Summary

Customize the styling and layout options for the order summary.

Buttons

You can style the buttons on the checkout widget.

Secure Badge

Showing the security of the checkout process to your customers.

Product Options Style

You can have the selected product highlighted or the default style.

To update the settings of your checkout widget, click on the gear icon on the editor menu as shown below:

Under settings, you can set up a multitude of settings as shown in the video at the top of this article. Some of the settings include:

Thank You page redirect

This is the page that will be shown once a customer makes a purchase.

Enable Allow Discounts

You can set up discount codes in your store module for testing purposes or offer discounts to customers. If you do not use discount codes, disable the Allow Discounts option after testing the checkout process.

Enable Customer Registrations

If you set up your product to be a Membership Product, you don't need to enable this option as membership products automatically allow registration of a customer during the checkout process. This option sends an email to the customer after checkout to set up a password for their login details.

If the product is not set up as a membership product and you would like the customer to register an account on your website, you can tick this option.

Addresses when selling digital goods

You can set the option to remove the billing address details to be entered when a customer purchases from you. We recommend enabling this option if you have tax requirements or need the exact address of your users.

Connect to Email Marketing

Here you can select the list within the CCK Contacts module to add people to. We recommend only having 1 main contact list to add people to and then organizing these contacts by using tags and segments rather than having multiple lists.

➡️ Click here to learn more about email lists

Double Opt-in

This option requires a customer to receive an email confirming that they are added to your contacts and lists. When purchasing, this is not necessarily required, but certainly a good idea to add this to other forms where people sign up to free resources and training on your website. This also prevents people to add incorrectly spelt email addresses.

Tag Customers on New Order

You can add a new tag or select a tag from the tags already set up under the contacts module. We recommend adding tags to the products you are selling instead of under the checkout settings. One tag will be added if you are selling multiple products on this particular checkout page, whereas when setting up the tags on the products in the store area, customers will receive all the tags related to the products they are buying.

➡️ Click here to learn more about contact tags

➡️ Click here to learn more about organizing contacts with tags

To test your checkout page, we recommend you set up a 100% discount code and then apply that code to the checkout page and allow discounts under the checkout settings.

➡️ Click here to learn more about discount codes