Checkout page template

As Klarna Checkout transitions to Kustom Checkout, please note that parts of this documentation are still being updated. You may come across references to Klarna, outdated screenshots, or broken links.

We’re working continuously to revise all content, and we appreciate your patience during this process.

The appearance of the Kustom Checkout page comes with the option to use a one- or a two-column layout.

When using the one-column layout the information provided by WooCommerce (cart content, delivery and customer order note) displayed at the top of the page. Below this the Kustom checkout, where you enter personal information and choose payment method, is displayed.

You also have the option to use a two-column checkout, with the Kustom checkout displayed in the left or right column.

Sometimes you need to change the design of the checkout page and with Kustom Checkout for WooCommerce it is possible in a couple of different ways.

Simple CSS changes

If you only want to make minor design changes, CSS adjustments may be enough to get you where you want. For example, to create a checkout page with a single-column layout, add the following CSS to your theme:

#kco-wrapper #kco-order-review,
#kco-wrapper #kco-iframe {
	width: 100%;
	float: none;
	clear: both;
}

Remove, add and move with action hooks

If you want to make some more extensive changes to the layout of the checkout page, it is recommended to work with action hooks.

The checkout template file

templates/klarna-checkout.php

On the Kustom Checkout template page, there are several action hooks you can use to add code or content. These hooks have the following names:

• woocommerce_before_checkout_form
• kco_wc_before_order_review
• kco_wc_after_order_review
• kco_wc_before_snippet
• kco_wc_after_snippet
• woocommerce_after_checkout_form

You can find their location here:

Through these action hooks, you can easily add information to different locations on the checkout page.

Create your own template file

If you need to make changes that can’t be accomplished via action hooks, then you are able to overwrite the checkout template file via your theme. The plugin supports WooCommerce’s way of handling template files.

The template file used for displaying Kustom Checkout is called kustom-checkout.php and it is located in the templates folder in the plugin. To overwrite the file, copy it from the plugin, then paste it into the /woocommerce folder in your theme. Now you have the opportunity to make the changes you want. Keep in mind that the action hooks woocommerce_before_checkout_form and woocommerce_after_checkout_form must remain for the plugin to work properly.