Overview

The Kroconnect Shipping Widget replaces or supplements the default WooCommerce shipping method display on the checkout page. It presents available shipping options in a richer format, including carrier icons, delivery descriptions, certifications, and badges. It also includes an optional shipping calculator that lets customers look up available options by entering their postcode before committing to checkout.

The widget is designed to work with nShift Checkout 2.0 but is not limited to it — it renders any WooCommerce shipping methods registered in an active shipping zone. Works with both classic and block-based checkout.

Prerequisites

• The Kroconnect Shipping Widget integration must be enabled.
• An active shipping method registered in a shipping zone. The widget displays rates from any WooCommerce shipping method, but the enhanced presentation (carrier icons, descriptions, certifications and pickup points) requires a method that provides Kroconnect shipping rate metadata — such as nShift Checkout 2.0 (primary tested integration) or Fraktjakt.
• Classic checkout: configure where the widget renders using the placement hook setting.
• Block checkout: add and position the Kroconnect Shipping Widget block in the checkout block editor.

Integration settings

Go to WooCommerce → Kroconnect → Kroconnect Shipping Widget to configure the integration.

Setting	Description
Enable	Activates the shipping widget on the checkout page.
Widget placement hook	Controls where on the checkout page the widget appears. Choose from the predefined positions below. Applies to the classic (shortcode) checkout only. On the block checkout, add and position the “Kroconnect Shipping Widget” block in the checkout editor instead.
Custom placement hook	Enter a custom WordPress action hook name to position the widget. When set, this overrides the placement selection above. Applies to the classic (shortcode) checkout only.
Calculator title	Heading text shown above the shipping calculator. Leave empty to use the default: “Calculate shipping”.
Calculator label	Label for the postcode input field in the calculator. Leave empty to use the default: “Enter postcode”.
Calculator submit button text	Text on the calculator’s submit button. Leave empty to use the default: “Get options”.
Show pickup point address	When enabled, the pickup point selector shows the street address and city below each pickup point name.

Widget placement options

Option	Position
woocommerce_checkout_before_customer_details	Above the billing/shipping form
woocommerce_checkout_billing	Inside the billing section (priority 9)
woocommerce_checkout_after_customer_details	Below the customer details form
woocommerce_checkout_before_order_review_heading	Above the order review heading
woocommerce_checkout_before_order_review	Before the order review block
woocommerce_checkout_after_order_review	After the order review block
(empty)	No automatic placement — you handle rendering yourself

---

Shipping calculator

The widget includes a postcode-based shipping calculator. When a customer has not yet entered a delivery address, the calculator lets them enter a postcode to retrieve available shipping options before completing the rest of the checkout form.

The calculator title, label, and button text are all configurable from the integration settings.

What the widget displays

For each available shipping method, the widget shows:

• Carrier icon — automatically resolved from the carrier code returned by nShift.
• Method name and price
• Description texts — where provided by the shipping service.
• Certifications — displayed with colour coding and icons (e.g. green delivery, eco-friendly options).
• Badges — additional service labels with colour and icon styling.

When a service includes pickup point options, a dropdown appears below the selected method, allowing the customer to choose their preferred collection point. If Show pickup point address is enabled, the street and city of each point is shown in the dropdown.