General information
- Callbacks
- Checkout blocks in WooCommerce
- Checkout language
- Embedded checkouts in WooCommerce
- Guide to troubleshooting in WooCommerce
- How to prepare a support ticket
- Optimizing your checkout when using an Iframe-based checkout
- Pending payment orders and held stock
- Rollback – Undo plugin and WordPress updates
- Troubleshooting the checkout flow
- Vipps, MobilePay and Swish payments
- WP-Cron and pending or cancelled orders
- FAQ
Optimizing your checkout when using an Iframe-based checkout
Optimizing can be very powerful when it’s properly configured but when using a Iframe-base checkout there can be compatibility issues.
The Krokedil plugins with embedded, or iframe-based, checkouts are Avarda Checkout, Dintero Checkout, Klarna Checkout, Nexi Checkout, Walley Checkout, Payson Checkout, Wasa Kredit Checkout and Qliro.
While Klarna Payments strictly speaking is not an iframe-based checkout, the info in this article can still be applied.
Common issues:
- The JS, CSS files is moved around.
This can result in that the checkout doesn’t appear at all. - You are minifying/concatenate/caching HTML, CSS and JS-files.
This can result in double orders, wrong Information in the orders etc.
Common plugins in use when these errors appears:
- Autoptimize
- LiteSpeed Cache
- 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 cart/checkout page.
Files to exclude from optimization
If you are using some kind of optimization feature there are files that needs to be excluded from any caching or concatenating.
Which files depends on the plugin, but using Klarna for WooCommerce as an example it’s the following files:
- wp-content/plugins/klarna-payments-for-woocommerce/assets/js/klarna-payments.js
- wp-content/plugins/klarna-payments-for-woocommerce/Blocks/Payment/build/klarna-payments-block.css
- wp-content/plugins/klarna-payments-for-woocommerce/vendor/krokedil/klarna-onsite-messaging/src/assets/js/klarna-onsite-messaging.js
- js.playground.klarna.com
- js.klarna.com
- cdn.klarna.com
- x.klarnacdn.net
Check what files to exclude in the plugin you are using below:
Avarda Checkout for WooCommerce
Klarna Checkout for WooCommerce
Payson Checkout for WooCommerce
Do not cache cart and checkout pages
The cart and checkout pages are dynamic pages and if you cache these they will not be dynamic anymore, which can result in several problems. Issues might be, but are not limited to, wrong prices showing, order numbers getting mixed up or even that one customer can see another customers information.
Examples of issues
Examples of issues that might be related to cache and the cart and checkout pages being optimized:
- Double orders created in WooCommerce. A duplicated order is created in WooCommerce that is in status Pending Payment/Cancelled. There is still only one order created in the payment method merchant portal.
- The payment method iframe is not loading correctly on the checkout page, or is not visible in the checkout at all, due to files not being loaded correctly.