Klarna – On-site Messaging

Installation

  • To install this plugin you first need to have either Klarna Checkout for WooCommerce or Klarna Payments for WooCommerce installed. You can find the links to this above. 
  • You can download the plugin directly via the Klarna Add-Ons menu in WooCommerce or via this download link.

You install this plugin just like any other WordPress plugin:

  1. Download and unzip the latest release zip file.
  2. If you use the WordPress plugin uploader to install this plugin skip to step 4.
  3. Upload the entire plugin directory to your /wp-content/plugins/ directory.
  4. Activate the plugin through the ‘Plugins’ menu in WordPress Administration.

Configuration


  1. Go to the settings for either the Klarna Checkout or Klarna Payments gateway ( WooCommerce –> Settings –> Payments ). At the bottom of these pages you should now see a section called Klarna On-Site Messaging.
  2. Data Client ID -  retrieved from your merchant portal. Copy the value entered inside the data-client-id (just the string inside the double quotes) and paste it in the settings field.
  3. Enable the Product placement - tick this box to display On-Site Messaging on product pages.
  4. Product page placement data key - enter the product page data-key (retrieved from your merchant portal).
  5. Product On-Site Messaging placement - where on product page the Klarna on-site message should be displayed.
  6. Enable the Cart placement - tick this box to display On-Site Messaging on the cart page.
  7. Cart page placement data key - enter the cart page placement data-key (retrieved from your merchant portal).
  8. Cart On-Site Messaging placement - where on cart page the Klarna on-site message should be displayed.
Now when you navigate to either a product page or the cart page you should see the widget that you setup in your merchant portal.

Changing widget location

In your Klarna settings there is a select option to select where on the page you want to display the widgets.
You can also change the location of the individual widget by using the following filters:
  • klarna_onsite_messaging_product_target for the Product page placement action.
  • klarna_onsite_messaging_product_priority for the Product page priority.
  • klarna_onsite_messaging_cart_target for the Cart page placement action.
  • klarna_onsite_messaging_cart_priority for the Cart page priority.

Code example

// Change the placement action for the widget.
add_filter( 'klarna_onsite_messaging_cart_target', 'change_klarna_onsite_messaging_cart_location' );
function change_klarna_onsite_messaging_cart_location( $location ) {
    // Here you need to replace the $location variable with the action that you want to use instead of the default.
    // You can also add custom checks to apply different locations depending on your needs.
    $location = 'woocommerce_after_cart';
    return $location;
}
// Change the priority for the action for the widget.
add_filter( 'klarna_onsite_messaging_cart_priority', 'change_klarna_onsite_messaging_cart_priority );
function change_klarna_onsite_messaging_cart_priority( $priority ) {
	// Here you need to replace the $priority variable with the action that you want to use instead of the default.
    // You can also add custom checks to apply different priority depending on your needs.
    $priority = '10';
    return $priority;
}
These can be used with any action that you want. You can find a list of all WooCommerce actions and where they operate here.

Display On-site messaging via shortcode


From version 1.3.0 you can display On-site messaging via the shortcode  [onsite_messaging].

You can also configure the placement with the following shortcode attributes:

  • data-key (optional)
    The type of placement button/image you want to display. Defaults to homepage-promotion-wide. Look into your Klarna merchant account for possible data-key's.
  • data-theme (optional)
    The theme/style used to display the button/image. Look into your Klarna merchant account for possible data-theme's.
  • data-purchase-amount (optional)
    The specific amount used for the placement. Should be entered in cents/minor units (e.g 100 EUR = 10000).

data-purchase-amount will not change or update automatically if you use the shortcode on a product page with a variable product. The price displayed will be the same regardless of which variant is selected.

An example shortcode could look like this:

[onsite_messaging data-key="credit-promotion-small" data-purchase-amount="89900" data-theme="dark"]



Problems that might occur when optimizing your WooCommerce store when using an Iframe-based checkout

Optimizing can be very powerful when it’s properly configured but when using a Iframe-base checkout and their add-ons there can be compatibility issues.

Common issues:
  • You are minifying/concatenate/caching HTML, CSS and JS-files.
    This can result in that you do not see the On-site placement info.
Common plugins in use when these errors appears:
  • Autoptimize
  • SG Optimizer
  • WP Fastest Cache
  • WP Rocket
  • W3 Total Cache

The summary of this is that if you use a Iframe-based checkout you should NOT do anything with the HTML, JS or CSS on the product / cart page.


Theme support & compatibility

Krokedil and Klarna do not support individual themes. If you want to change the appearance of the widget outside of what we can do with the filter then this requires custom CSS code. Use the classes klarna-onsite-messaging-product and klarna-onsite-messaging-cart respectively.

FAQ

I have activated OSM for my store but it only shows for some customers, what is wrong?

Since version 1.0.5 of Klarna - Onsite Messaging for WooCommerce (OSM) plugin only shows the OSM-iframe if a customer's location (as retrieved from WooCommerce function) matches.

So we recommend you to check your WooCommerce ---> Settings ---> General and then look at the Default customer location. There you should not have set the option to No location by default as that will only show the OSM for logged in customers that has the same country/state as the store have registered as their Store base country/state setting. So we recommend setting the Default customer location to Shop base address.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.