Editor Themes: Product page does not display Klarna options

[sophiegyo]

Quick summary

Summary: When the Tsubaki theme is active on a site, Klarna options are not displayed on the product page.
This does not occur with non-Site-Editor themes that don't use blocks for the product page template.

User report in: 7400853-zen

I'm guessing this is related to the cart and checkout page issue for Tsubaki.

Steps to reproduce

1. Head to the user site (noted in 7400853-zen) as a regular visitor, while Tsubaki is active.
2. Check any product.
3. Klarna options are not shown on the product page (but they are currently showing at checkout)

This can be consistently reproduced.
I tested with the Health Check & Troubleshooting plugin to deactivate everything else.
In Troubleshooting Mode, with ONLY Woo, Klarna, and Tsubaki active, the Klarna options do not show.

What you expected to happen

The Klarna financing option should be shown on the product page.

For comparison, how it shows up when using Storefront. Specifically: Troubleshooting mode, with only Woo, Storefront, and Klarna active:

And for good measure: Troubleshooting mode with only Woo, 3pd theme Aotwo, and Klarna active:

What actually happened

It doesn't appear. Screenshot:

Browser

Google Chrome/Chromium, Mozilla Firefox

Context

Customer report 7400853-zen

Platform (Simple, Atomic, or both?)

Atomic

Other notes

I haven't been able to set up test Klarna credentials of my own to try to reproduce this on a test site, but I'm pretty confident it's the same as the issue mentioned earlier.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

The only workaround that I can see would be to switch to a non-Site-Editor theme - or at least any theme which uses a classic PHP template for the product page.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7400853-zen

[nerrad]

It'd be good to see if this can be reproduced with other block themes.
@PanosSynetos, my guess is there could be an issue with the single product page block template compatibility if this is also reproducible in other Block themes with no customized Woo Single Product template. If that's the case we may need to work with whatever team helps oversee the Klarna extension to figure out what is happening (what hook is being used etc).

[nerrad]

@danielwrobert please have someone from Kirigami or Origami do some preliminary investigation on this as well. If this is a block template compatibility issue there will be other things that will be affected besides Klarna.

[gigitux]

I'm able to replicate the issue. You have to:

• Klarna Payments for WooCommerce.
• Configure it.
• Install Klarna On Site messaging.
• Configure it.

With Storefront, the placeholder is visible. On TT4, it isn't visible.

Storefront	TT4

Checking Klarna On Site messaging codebase, I found the issue. The class that injects the Klarna content is initialized during the wp_head hook. (source code). When the wp_head is run, the logic of the compatibility layer has already been executed. The compatibility layer logic runs when WordPress retrieves the right template to render. https://github.com/woocommerce/woocommerce/blob/76d43014a373a79a888bff470bd5c24aae[…]2c/plugins/woocommerce/src/Blocks/BlockTemplatesController.php/
The action wp_head is too late because WordPress already retrieved the template.

If I updated to:

add_action( 'wp', array( $this, 'init_class' ) );

The Klarna placeholder is injected correctly on a block theme as well:

Furthermore, I noticed that the plugin proposes different positions in the settings, but with block themes, the setting will not work. The plugin logic is based on priority, but this approach doesn't work with the compatibility layer. (source code)