Klarna Checkout – Hooks (action & filter)

Hooks in WordPress essentially allow you to change or add code without editing core files. They are used extensively throughout WordPress and WooCommerce and are very useful for developers.

Read more about action and filter hooks here:

In Klarna Checkout for WooCommerce there are some action and filter hooks available, mainly for modifying the order data sent to Klarna and how the checkout page should be displayed.

Actions

The appearance of the Klarna Checkout page comes with a two-column layout. In this layout we have shopping cart, delivery options and customer order note in the left-hand column while Klarna’s checkout (where you enter personal information and choose payment method) is shown in the right-hand column.

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

1. 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:

2. 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 Klarna 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.

3. 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 Klarna Checkout is called klarna-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_formmust remain for the plugin to work properly.

Filters

Action filters are used to modify data before sending it to an external service, rendering it in the browser or storing it in a database. The most common occasion this might be used in the plugin is if you want to modify the order/cart data sent to Klarna before the KCO checkout is rendered.

1. Modify order data sent to Klarna

classes/class-kco-api.php

To modify the order data sent to Klarna (actually the cart data since the WooCommerce order isn’t created until after the purchase is finalized in Klarna Checkout), you use the filter kco_wc_api_request_args as described in the following example:

Information about available parameters in Klarnas API can be found here.

2. Display Klarna Checkout even on free orders

If you have a coupon that brings the total order value down to zero making the order free for the customer, by default this will show the standard WooCommerce checkout instead of the Klarna Checkout. If you would rather want to show the Klarna Checkout for this you can use the filter kco_check_if_needs_payment. And return false instead of true to this filter.

3. Set a forced purchase country

If you need to set a forced purchase country for any reason other then what the store country is and you don't want to use geolocation, then you can use this snippet to do so. Simply change SE for any other two letter country code that you want to use.

4. Only accept purchases from customer over 18 years of age.

Code example on how to only accept purchases from people over 18 years of age with Klarna Checkout for WooCommerce (plugin for Klarnas v3 platform - https://wordpress.org/plugins/klarna-checkout-for-woocommerce/).

This only works if Klarna has activated the "Allow merchant to read customers national identification number" setting in your account…

5. Add Cancellation terms sent to Klarna

URL for the cancellation terms page of the merchant. The URL will be displayed in the email that is sent to the customer after the order is captured (max 2000 characters).

6. Add additional checkboxes

There are times when you might want to add an additional checkbox, like a newsletter sign-up or something else.

To show the checkbox with associated text in the Klarna Checkout we need to send the info about this to Klarna along with all other order/cart information. We do this by adding the filter kco_additional_checkboxes in the following way:

Text - In the field text you can add the text that you want to display in connection with this checkbox.

Checked - In the field checked you set whether you want the box checked (true) or unchecked (false) on the initial load of the checkout.

Required - In the field required you can set if this checkbox is required (true) or not (false) to be able to complete the order.

Save the result in the order

When the purchase is completed by the customer and are redirected to the Thank you page we can collect the information, which is whether the customer checked the box or not. We do this with the action hook kco_wc_confirm_klarna_order in the following way:

In this example our checkbox is for letting people subscribe to a newsletter through MailChimp in the way the plugin MailChimp for WooCommerce wants it. Here you need to change the name on the post meta field to the name of where your plugin saves the information. In our example the number 1 is saved in the post meta field mailchimp_woocommerce_is_subscribed if the customer has opted in to subscribe to the newsletter. The process of sending this information to the newsletter provider is something the plugin for the newsletter, in the case MailChimp for WooCommerce, handles. That is both outside of the Klarna plugin and the examples above.

Note that this is only an example on how you save the information with the order and we can't guarantee that we have all the updated info on how a specific plugin other than our own handles things, so you need to look this up for yourself.

How and where to insert the code?

To get the function to work you need to add the code to your theme's functions.php, as its own plugin or through the Code Snippets plugin.

7. Modify payment method icon

An icon is displayed next to the payment method name on the checkout page.

If you want to change this icon there is a filter available for that.

By using the filter wc_klarna_checkout_icon_html in the following way you can change it to your needs.

A set of different logos/badges to use can be found at the Klarna Developers site.